Typescript中extends做条件类型时的几种行为

Extends用于条件类型判断时,有如下行为:

1,简单情况

typescript 复制代码
type A = ('X' | 'Y') extends 'X' ? '1' : '2'

作用:判断 前一个类型 能不能赋值给后一个类型

白话:

typescript 复制代码
const a: 'X' | 'Y' = p1
const b: 'X' = p2

所有能填到这个p1的位置的东西,是不是都能填到p2的位置上

2,含有泛型的情况

typescript 复制代码
type Diff<T> = T extends 'X' ? '1' : '2'

type A = Diff<'X' | 'Y'>

对于属于"裸类型参数"(即T)的检查类型,条件类型会在实例化时期自动分发到联合类型上

原文 : Conditional types in which the checked type is a naked type parameterare called distributive conditional types. Distributive conditional types are automatically distributed over union types during instantiation

白话:没有被额外包装的 泛型参数,拿来做条件类型判断时,会将该 泛型 的联合类型拆开,分别进行判断。

过程:

typescript 复制代码
'X' extends 'X' // => '1'
'Y' extends 'X' // => '2'
// 最终拿到联合类型 '1' | '2'

思考:Exclude是如何实现的?

Exclude源码:

typescript 复制代码
/**
 * Exclude from T those types that are assignable to U
 */
type Exclude<T, U> = T extends U ? never : T;

解析: T是一个泛型,它符合"裸类型参数",此时使用extends做条件判断时,传入T的联合类型会被拆开对比。

例如:

typescript 复制代码
type B = Exclude<'X'|'Y', 'X'> // type B = "Y"

实际对比的过程为:

typescript 复制代码
type Exclude<T, U> = T extends U ? never : T;
'X' extends 'X' // => never
'Y' extends 'X' // => 'Y'
// 最终得到 never | 'Y' , 也就是 'Y'

这就是Exclude的原理。

3,含有泛型,但不是"裸类型参数"

简单处理:使用元组包裹,使泛型不是一个裸类型参数

typescript 复制代码
type Diff<T> = [T] extends ['X'] ? '1' : '2'
type A = Diff<'X' | 'Y'>
// 此时不会被分发,结果:2

以下两种特殊情况不需要记忆,用到的时候查一下就好:

特殊情况 any:

当用any做检查类型,不管是否传入泛型

1:在判断条件非any的情况,都会返回判断结果的联合类型

typescript 复制代码
type Tmp1 = any extends string ? 1 : 2;  // 1 | 2
typescript 复制代码
type Tmp2<T> = T extends string ? 1 : 2;

type Tmp2Res = Tmp2<any>; // 1 | 2

2:判断条件为any的情况,仍然会进行判断

typescript 复制代码
type Special1 = any extends any ? 1 : 2; // 1
typescript 复制代码
type Special2<T> = T extends any ? 1 : 2;

type Special2Res = Special2<any>; // 1

特殊情况never

1:直接使用,仍然会进行判断

typescript 复制代码
type Tmp3 = never extends string ? 1 : 2; // 1

2:通过泛型参数传入,会跳过判断,直接返回never

typescript 复制代码
type Tmp4<T> = T extends string ? 1 : 2;

type Tmp4Res = Tmp4<never>; // never

3:判断条件为never的情况,仍然进行判断

typescript 复制代码
type Special3 = never extends never ? 1 : 2; // 1

但即使判断条件为never,如果传入泛型,也会跳过判断,直接返回never

typescript 复制代码
type Special4<T> = T extends never ? 1 : 2;

type Special4Res = Special4<never>; // never
相关推荐
程序员黑豆38 分钟前
鸿蒙应用开发:一次开发多端部署之响应式布局完全指南
前端·harmonyos
小月土星1 小时前
2.0 React Router 前端路由深度解析:从传统后端路由到现代 SPA 的完整演进
前端
badhope3384 小时前
当所有AI都在抄同一份作业:前端模板的趋同、困局与破局
前端·ai·ai编程·前端开发·tailwind·ui设计
光影少年5 小时前
RN的Fabric 渲染流程
运维·前端·javascript·react native·react.js·fabric
__zRainy__5 小时前
React开始:直接在网站中使用React.js
前端·react.js·前端框架
用户059540174466 小时前
大模型长记忆评测踩坑实录:2000条错位记忆,让我排查了整整3小时
前端·css
码林鼠6 小时前
webpack的基本配置
前端·webpack·node.js
用户938515635077 小时前
React Router 进阶:路由守卫、登录鉴权与状态传递
前端·javascript·全栈
kyriewen7 小时前
我重写了自己用了两年的防抖节流Hook——发现里面藏着3个隐藏bug
前端·javascript·面试
阿祖zu7 小时前
芝士就是力量!开源私有化部署与 GitHub 双向同步的个人知识笔记 App
前端·后端·ios