TS中的infer

最新推荐文章于 2024-08-17 08:20:17 发布

前端精髓

最新推荐文章于 2024-08-17 08:20:17 发布

阅读量9k

点赞数 5

分类专栏： JavaScript 文章标签： typescript

本文链接：https://blog.csdn.net/wu_xianqiang/article/details/115427146

版权

JavaScript 专栏收录该内容

149 篇文章 21 订阅

订阅专栏

本文介绍了如何利用TypeScript的infer关键字来更高效地推断和操作数组、对象及联合类型中的元素类型，大大减少了代码量并提高了类型系统的灵活性。通过示例展示了infer在推断数组元素、属性类型以及联合和交叉类型中的应用。

摘要由CSDN通过智能技术生成

假如想在获取数组里的元素类型，在不会infer之前我是这样做的：

type Ids = number[];
type Names = string[];

type Unpacked<T> = T extends Names ? string : T extends Ids ? number : T;

type idType = Unpacked<Ids>; // idType 类型为 number
type nameType = Unpacked<Names>; // nameType 类型为string

上次我写了20多行，就为了获取一堆各种不同类型的数组里的元素类型，然而如果使用infer，会变得十分简单。

type ElementOf<T> = T extends Array<infer E> ? E : T;

type Tuple = string[];

type TupleToUnion = ElementOf<Tuple>

如果T是某个待推断类型的数组，则返回推断的类型，否则返回T

推断对象的属性类型

type Foo<T> = T extends { a: infer U } ? U : never;

type T10 = Foo<{ a: string }>; // T10类型为 string

根据他的位置推断出类型，也就是获取某一个部分的类型。

infer可以推断出联合类型

type Foo<T> = T extends { a: infer U; b: infer U } ? U : never;

type T11 = Foo<{ a: string; b: number }>; // T11类型为 string | number

infer可以推断出交叉类型

type T1 = {name: string};
type T2 = {age: number};

type K2<T> = T extends {a: (x: infer U) => void, b: (x: infer U) => void} ? U : never;

interface Props {
  a: (x: T1) => void;
  b: (x: T2) => void;
}

type k3 = K2<Props>