TS中的infer

简介: 处理方式 TS中的infer

假如想在获取数组里的元素类型,在不会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>
相关文章
|
1月前
|
JavaScript 前端开发 程序员
ts学习(1)
ts学习(1)
122 69
|
5月前
|
资源调度 JavaScript 前端开发
介绍一下ts
介绍一下ts
103 1
|
5月前
ts文件解密
ts文件解密
241 0
|
11月前
|
JavaScript 前端开发 开发者
ts详解以及相关例子(一篇带你详细了解ts)
ts详解以及相关例子(一篇带你详细了解ts)
138 1
|
12月前
|
JavaScript 前端开发 安全
|
JavaScript 前端开发
ts - ts基础
https://www.tslang.cn/ TypeScript是Microsoft公司注册商标。 TypeScript具有类型系统,且是JavaScript的超集。 它可以编译成普通的JavaScript代码。 TypeScript支持任意浏览器,任意环境,任意系统并且是开源的。
|
JavaScript 开发者
什么是TS?
什么是TS?
150 0
|
安全
ts是什么
VSCode提示 例如:定义者指定了一个方法: export function foo(name: string): number { return name.length }
228 0
|
人工智能 自然语言处理 JavaScript
为什么我们需要 TS ?
文中不少观点的想法系个人见解,有一定的个人局限性,欢迎交流
814 0
为什么我们需要 TS ?