你了解TypeScript中的never类型吗?

1. never 类型的理解

TypeScript 中的 never 类型,表示:永远不会发生的值的类型。

换句话说,就是不可能存在的类型,即没有值的类型。

2. 可能会出现 never 类型的一些情况

2.1. 函数抛出异常

如果一个函数抛出异常,那么它的返回类型就是 never。因为在函数抛出异常后,会直接中断程序的运行,这使得程序不会继续执行到函数的返回语句那一步。

上面的例子中,函数 throwError 抛出异常,鼠标移到 throwError 函数上面,可以看到函数的返回值类型为 never。

2.2. 不会有返回值的函数

如果一个循环永远无法正常结束,比如无限循环或者总是抛出异常,那么该循环的类型被推断为 never。

上面的例子中,函数 infiniteLoop 是一个无限循环函数,没有任何的终止循环的语句,函数执行永远不会结束,因此不会有任何的返回值,鼠标移到 infiniteLoop 函数上面,可以看到函数的返回值类型为 never。

2.3. 类型判断或类型缩小的细化(全面性检查)

在条件语句中,如果 TypeScript 能够推断出某个分支永远不会执行,那么该分支的类型会被推断为 never 。

typescript 复制代码
type Value = number | string;

const processValue = (value: Value) => {
  if (typeof value === "number") {
    // 在这个分支中,value 的类型被细化为 number
  } else if (typeof value === "string") {
    // 在这个分支中,value 的类型被细化为 string
  } else {
    // 在这个分支中,value 的类型被细化为 never,因为 value 不可能同时为 string 和 number
    const n: never = value
  }
}

上面的例子中,else 分支里面,value 的类型将被细化为 never 类型,然后我们将 value 赋值给一个显示声明了 never 类型的变量,如果逻辑正确,上面的代码可以正常编译通过,但如果你把 Value 的类型改成 number | string | boolean 的联合类型,此时 else 分支的 value 类型就会被细化成 boolean 类型,此时把 value 赋值给一个显示声明了 never 类型的变量就会报错。

typescript 复制代码
type Value = number | string | boolean;

const processValue = (value: Value) => {
  if (typeof value === "number") {
    // 在这个分支中,value 的类型被细化为 number
  } else if (typeof value === "string") {
    // 在这个分支中,value 的类型被细化为 string
  } else {
    // 在这个分支中,value 的类型被细化为 boolean 类型,因为 value 不可能同时为 string 和 number
    // 此时,把 value 赋值给一个显示声明了 never 类型的变量 n 就会报错。

    // 下面的赋值语句会报错:不能将类型"boolean"分配给类型"never"。
    const n: never = value
  }
}

3. never 类型的特点

3.1. never 类型会从联合类型中移除

任意类型和 never 类型的联合类型都是其本身,就好比如:任意数字和0相加,都等于该数字。

typescript 复制代码
type T1 = number | never;  // number
type T2 = string | never;  // string
type T3 = boolean | never; // boolean
type T4 = any | never;     // any
type T5 = unknown | never; // unknown
type T6 = never | never;   // never
type T7 = "abc" | never;   // "abc"
type T8 = 123 | never;     // 123

利用这个特点,我们可以做很多事情,比如:筛选。

我们可以利用条件类型把不符合类型 Type 的类型先转换成 never 类型,然后利用联合类型把 never 类型过滤掉,得到我们想要的结果。

typescript 复制代码
type Filter<T, U> = T extends U ? T : never

type RESULT = Filter<"Echo" | 26 | true | "GuangZhou", string>

上面的代码,按照分布式条件类型机制,Filter<"Echo" | 26 | true | "GuangZhou", string> 将被分解成如下代码:

typescript 复制代码
type RESULT = 
  | ("Echo" extends string ? "Echo" : never) 
  | (26 extends string ? 26 : never) 
  | (true extends string ? true : never) 
  | ("GuangZhou" extends string ? "GuangZhou" : never)

进一步被解析,得到如下代码:

typescript 复制代码
type RESULT = "Echo" | never | never | "GuangZhou"

再一步解析,得到结果:

typescript 复制代码
type RESULT = "Echo" | "GuangZhou"

3.2. never 类型与任意类型的交叉类型都是 never。

typescript 复制代码
type T1 = number & never;  // never
type T2 = string & never;  // never
type T3 = boolean & never; // never
type T4 = any & never;     // never
type T5 = unknown & never; // never
type T6 = never & never;   // never
type T7 = "abc" & never;   // never
type T8 = 123 & never;     // never

3.3. never 可以赋值给任意类型

由于 never 类型是所有其他类型的子类型,所以可以将 never 赋值给任何其他类型。

typescript 复制代码
let n: never

let str: string = n
let num: number = n
let b: boolean = n
let any: any = n
let unknown: unknown = n
let func: () => void = n
let symbol: symbol = n
let n1: never = n

3.4. 其他类型不能赋值给 never

由于 never 没有子类型,所以除了 never 本身,任何类型都不能赋值给 never 类型。

typescript 复制代码
let n: never

n = "Echo"               // 报错:不能将类型"string"分配给类型"never"
n = 26                   // 报错:不能将类型"number"分配给类型"never"
n = true                 // 报错:不能将类型"boolean"分配给类型"never"
n = [1, 2, 3]            // 报错:不能将类型"number[]"分配给类型"never"
n = Symbol()             // 报错:不能将类型"symbol"分配给类型"never"
n = {}                   // 报错:不能将类型"{}"分配给类型"never"
n = new Array()          // 报错:不能将类型"any[]"分配给类型"never"
n = (...arg: any) => {}  // 报错:不能将类型"(...arg: any) => void"分配给类型"never"

4. 总结

以上就是我对 TypeScript 中 never 类型的理解,如果有不正确的地方,欢迎大家在评论区多多指正!

看完记得点个赞哦~ 谢谢!🤞🤞🤞

相关推荐
Wyc7240928 分钟前
HTML:入门
前端·html
Sunny_lxm29 分钟前
自定义列甘特图,原生开发dhtmlxgantt根特图,根据数据生成只读根特图,页面展示html demo
前端·html·甘特图·dhtmlxgantt
熊猫钓鱼>_>1 小时前
建筑IT数字化突围:建筑设计企业的生存法则重塑
前端·javascript·easyui
GISer_Jing3 小时前
前端性能指标及优化策略——从加载、渲染和交互阶段分别解读详解并以Webpack+Vue项目为例进行解读
前端·javascript·vue
不知几秋3 小时前
数字取证-内存取证(volatility)
java·linux·前端
水银嘻嘻5 小时前
08 web 自动化之 PO 设计模式详解
前端·自动化
Zero1017137 小时前
【详解pnpm、npm、yarn区别】
前端·react.js·前端框架
&白帝&7 小时前
vue右键显示菜单
前端·javascript·vue.js
Wannaer7 小时前
从 Vue3 回望 Vue2:事件总线的前世今生
前端·javascript·vue.js
羽球知道7 小时前
在Spark搭建YARN
前端·javascript·ajax