TypeScript 之 infer

`infer`

与 extends 和三元运算符组合使用，用于推断某个复杂类型的部分，简单的说，就是用来推导泛型参数。

使用规则

type ParamsArray<T> = T extends Array<infer P> ? P : T;

inter 只能出现在 extends 关键字的右侧；
inter P 可以理解成数学上的未知数 x；
其中 extends 关键字的作用，是用来判断右边的类型是否兼容左边的泛型 T，如果兼容则返回 ? 后面的内容，否则返回 : 后面的内容。

示例一：

type ParamsArray<T> = T extends Array<infer P> ? P : T;type StrignArr = string[];
type Res1 = ParamsArray<StrignArr>; // stringtype NumberArr = Array<number>;
type Res2 = ParamsArray<NumberArr>; // numberinterface Person {name: string,age: number
}
type PersonList = Person[];
type Res3 = ParamsArray<PersonList>; // Person// 使用类型不匹配时，返回传入的泛型
type Res4 = ParamsArray<string>; // string

Array<infer P> 的类型是否能够兼容传入的泛型，如果兼容，则返回 P，也就是 Array 类型的泛型；如果不兼容，直接返回传入的泛型。

示例二：

type ParamsType<T> = T extends (params: infer P) => any ? P : T;type Func = (name: string) => void;
type Params = ParamsType<Func>; // string// 当参数个数对应不上时，类型也就匹配不上了。
type Func1 = (name: string, age: number) => void;
type Params1 = ParamsType<Func1>; // type Params1 = (name: string, age: number) => voidinterface IPerson {name: string,age: number,
}
type Func2 = (person: IPerson) => void;
type Params2 = ParamsType<Func2>; // IPerson

这里是作用于函数类型，如果预先定义的函数类型能够兼容传入的类型，则将函数第一个参数的类型返回。

TypeScript 之 infer相关推荐

typescript_如何掌握高级TypeScript模式
typescript by Pierre-Antoine Mills 皮埃尔·安托万·米尔斯(Pierre-Antoine Mills) 如何掌握高级TypeScript模式 (How to mast ...
学习TypeScript数据类型-从零到英雄
It's all the rage these days in the world of web development - TypeScript. I'd wager by now you hav ...
写给初中级前端的高级进阶指南（万字长文，建议收藏）
前言由于公众号文章不允许外链,需要跳转文中链接的同学可以在脚注里找到各个的资源链接,也可以通过点击阅读原文更加方便的跳转链接. 我曾经一度很迷茫,在学了 Vue.React 的实战开发和应用以后,好 ...
写给初中级前端的高级进阶指南（万字路线）
前言我曾经一度很迷茫,在学了 Vue.React 的实战开发和应用以后,好像遇到了一些瓶颈,不知道该怎样继续深入下去.相信这也是很多一两年经验的前端工程师所遇到共同问题,这篇文章,笔者结合自己的一些 ...
使用TypeScript映射和条件类型使React组件更出色
by Deepu K Sasidharan 通过Deepu K Sasidharan 使用TypeScript映射和条件类型使React组件更出色 (Make your React component ...
什么是TypeScript？为什么我要用它代替JavaScript？ [关闭]
本文翻译自:What is TypeScript and why would I use it in place of JavaScript? [closed] Closed . 已关闭 . This ...
typescript 方法后面加感叹号_使用 TypeScript 模板字面类型
介绍在今天的早些时候,Anders Hejlsberg 在 TypeScript 的仓库中发了一个 Pull Request:Template string types and mapped typ ...
typescript 怎么表示当前时间减一个月_TypeScript类型元编程：实现8位数的算术运算...
失业中在 github 闲逛,看到有人用类型实现的一个4位虚拟机,为什么是4位呢,因为 TypeScript 的类型实例化深度有限制,没法实现太大的数字计算.说到用类型实现数字计算,一大堆邱奇数就冒出 ...
typescript索引类型_TypeScript的索引类型与映射类型，以及常用工具泛型的实现
相信现在很多小伙伴都在使用 TypeScript(以下简称 TS),在 TS 中除了一些常用的基本类型外,还有一些稍微高级一点的类型,这些就是我本次文章要讲的内容:索引类型与映射类型,希望小伙伴们看过 ...
typescript get方法_使用 Typescript 构建类型安全的 Websocket 应用
本文会通过一个简单的聊天室例子分享如何使用 Typescript 实现一个类型安全 Websocket 应用,在文章最后有 Github 项目地址.例子中的前端是使用 Angular 不过本文不会涉及 ...

TypeScript 之 infer

`infer`

使用规则

示例一：

示例二：

TypeScript 之 infer相关推荐

最新文章

热门文章