TypeScript 学习笔记 — infer 类型推导、类型兼容 (九)
类型推导: inference, 使用 infer 关键字
只能用在条件类型中,用来提取类型的某一个部分的类型,放在不同的位置 就可以取不同位置的类型
ReturnType,Parameters,InstanceType,ConstructorParameters 内置的类型
1.ReturnType 返回值类型
function getUser(name: string, age: number) {
return { name, age, address: {} };
}
type ReturnType<T extends (...args: any) => any> = T extends (...args: any) => infer R ? R : any;
type T1 = ReturnType<typeof getUser>; // 泛型需要传递类型,所以使用 typeof
2.Parameters 参数类型
type Parameters<T extends (...args: any) => any> = T extends (...args: infer P) => any ? P : never;
type T2 = Parameters<typeof getUser>;
3.InstanceType 实例类型
class Person {
constructor() {
return { a: 1, b: 2 };
}
} // Person的实例类型是什么? Person
type InstanceType<T extends new (...args: any[]) => any> = T extends { new (...args: any[]): infer I } ? I : never;
type T3 = InstanceType<typeof Person>; // 内置的
type T4 = Person;
4.ConstructorParameters 构造函数参数类型
class Person {
constructor() {
return { a: 1, b: 2 };
}
}
type ConstructorParameters<T extends new (...args: any[]) => any> = T extends new (...args: infer P) => any ? P : never;
type T5 = ConstructorParameters<typeof Person>;
5.infer 实践
``
更改元组类型
type TailToHead<T extends any[]> = T extends [...infer C, infer B] ? [B, ...C] : any;
type x = TailToHead<["Echoyya", 30, 40, 50, "beijing"]>; // ["beijing","Echoyya",30,40,50]
将元组转换成联合类型
写法一:类型单一时,可返回正确类型,元组类型时,不好判断 暂返回 字符串 "R" 进行验证
type ElementOf<T> = T extends Array<string | number | boolean> ? "R" : any; // (string|number|boolean)[]
// 写法二: 由写法一演变而来 infer R
type ElementOf<T> = T extends Array<infer R> ? R : any;
type TupleToUnion = ElementOf<[string, number, boolean]>; // 返回联合类型 string | number | boolean
获取 Promise 返回值类型(递归)
type PromiseV<T> = T extends Promise<infer V> ? PromiseV<V> : T;
type PromiseReturnValue = PromiseV<Promise<number>>; // number
type PromiseReturnValue2 = PromiseV<Promise<Promise<string>>>; // string
TypeScript 学习笔记 — infer 类型推导、类型兼容 (九)的更多相关文章
- TypeScript 学习笔记 — 函数中的类型(四)
目录 函数的两种声明方式 可选参数 默认参数 剩余参数 函数的重载 this 的类型 对于函数主要关心的是:函数的入参类型 和 函数的返回值类型 函数的两种声明方式 通过 function 关键字来进 ...
- javascript学习笔记(四) Number 数字类型
数字格式化方法toFixed().toExponential().toPrecision(),三个方法都四舍五入 toFixed() 方法指定小数位个数 toExponential() 方法 用科学 ...
- Typescript 学习笔记三:函数
中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...
- Typescript 学习笔记七:泛型
中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...
- Typescript 学习笔记六:接口
中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...
- Typescript 学习笔记五:类
中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...
- Typescript 学习笔记二:数据类型
中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...
- Typescript 学习笔记一:介绍、安装、编译
前言 整理了一下 Typescript 的学习笔记,方便后期遗忘某个知识点的时候,快速回忆. 为了避免凌乱,用 gitbook 结合 marketdown 整理的. github地址是:ts-gitb ...
- Typescript 学习笔记四:回忆ES5 中的类
中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...
- TypeScript学习笔记(八):1.5版本之后的模块和命名空间
我之前有写过TS1.5版本之前的“模块”的笔记:TypeScript学习笔记(七):模块 但是TS这里的模块和在ECMAScript 2015里的模块(即JS原生支持了模块的概念)概率出现了混淆,所以 ...
随机推荐
- 个人js基础知识及看js高级程序设计查漏 汇总
1.事件循环机制 js单线程操作. 1>主线程读取js代码 ,此时为同步环境,形成相应的堆和执行栈. 2>主线程遇到异步任务,指给对应的异步进程处理. 3>异步进程处理完毕后,将相应 ...
- docker-compose之memcached
新建docker-compose.yml,写入以下内容 memcached: image: memcached:latest ports: - 11211:11211 启动服务 docker-comp ...
- git rebase之abort,continue,skip
git rebase --abort 会放弃合并,回到rebase操作之前的状态,之前的提交的不会丢 git rebase --skip 会将引起冲突的commit丢弃掉 git rebase --c ...
- 04 使用 BTrace 进行拦截调试
BTrace BTrace 可以动态地向目标应用程序的字节码注入追踪代码,使用的技术有 JavaCompilerApi, JVMTI, Agent, Instrumentation+ASM 使用方法: ...
- [JSOI2014]宅男计划
Description: 外卖店一共有N种食物,分别有1到N编号.第i种食物有固定的价钱Pi和保质期Si.第i种食物会在Si天后过期.JYY是不会吃过期食物的. 比如JYY如果今天点了一份保质期为1天 ...
- noi 1.5 24 正常血压
描述 监护室每小时测量一次病人的血压,若收缩压在90 - 140之间并且舒张压在60 - 90之间(包含端点值)则称之为正常,现给出某病人若干次测量的血压值,计算病人保持正常血压的最长小时数. 输入 ...
- vue-cli项目以script标签方式引入js的方法
在public/index.html中强行添加script标签(可引入本地js和远程js,本地js需放在public内,不能放assets内) 在要使用这个js的地方,将相关对象添加到eslint的全 ...
- gimp脚本.scm一些心得记录
gimp的脚本scm一些心得记录 GIMP 2.10 图像处理脚本推荐GIMP使用脚本使得图像处理的功能更加强大,对于一些常见操作可以通过脚本快速实现.GIMP也出来2.10版本了,比前面的2.8相比 ...
- 下载Vue.js输入Vue -V报错解决办法
报错如图所示 解决办法: 1. 以管理员身份运行vscode; 2. 执行:get-ExecutionPolicy,显示Restricted,表示状态是禁止的; 3. 执行:set-Execution ...
- 文献阅读笔记——Boosting the Performance of CDCL-Based SAT Solvers by Exploiting Backbones and Backdoors
Boosting the Performance of CDCL-Based SAT Solvers by Exploiting Backbones and Backdoors 布尔结构措施 本研究考 ...