类型推导: 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 类型推导、类型兼容 (九)的更多相关文章

  1. TypeScript 学习笔记 — 函数中的类型(四)

    目录 函数的两种声明方式 可选参数 默认参数 剩余参数 函数的重载 this 的类型 对于函数主要关心的是:函数的入参类型 和 函数的返回值类型 函数的两种声明方式 通过 function 关键字来进 ...

  2. javascript学习笔记(四) Number 数字类型

    数字格式化方法toFixed().toExponential().toPrecision(),三个方法都四舍五入 toFixed() 方法指定小数位个数  toExponential() 方法 用科学 ...

  3. Typescript 学习笔记三:函数

    中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...

  4. Typescript 学习笔记七:泛型

    中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...

  5. Typescript 学习笔记六:接口

    中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...

  6. Typescript 学习笔记五:类

    中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...

  7. Typescript 学习笔记二:数据类型

    中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...

  8. Typescript 学习笔记一:介绍、安装、编译

    前言 整理了一下 Typescript 的学习笔记,方便后期遗忘某个知识点的时候,快速回忆. 为了避免凌乱,用 gitbook 结合 marketdown 整理的. github地址是:ts-gitb ...

  9. Typescript 学习笔记四:回忆ES5 中的类

    中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...

  10. TypeScript学习笔记(八):1.5版本之后的模块和命名空间

    我之前有写过TS1.5版本之前的“模块”的笔记:TypeScript学习笔记(七):模块 但是TS这里的模块和在ECMAScript 2015里的模块(即JS原生支持了模块的概念)概率出现了混淆,所以 ...

随机推荐

  1. VMware 15pro虚拟机网络设置

    在关闭虚拟机的情况下:VM 15pro. 编辑->虚拟网络编辑器:

  2. bcc分析缓存命中率

    系统环境:centos7/redhat7 安装,提前配好网络yum源,比如aliyun yum install bcc-tools /etc/profile 添加如下命令路径 vim /etc/pro ...

  3. Dapper存储过程分页

    create database Month6use Month6 --用户表create table UserInfo( UId int primary key identity, UName var ...

  4. ORA-01427: 单行子查询返回多个行 出现原因及对应防止措施

    原因:没有做好子查询约束条件 解决方法:1.加 AND ROWNUM =1 条件 但筛选结果可能并非一定是你想要的 2.匹配查询唯一约束条件

  5. docker安装常用软件

    linux安装docker 1.安装gcc相关 yum install gcc -y yum install gcc-c++ -y 2.安装工具包 #安装工具包 yum -y install yum- ...

  6. MyBatis-Plus数据源失效找不到

    记一次项目排查问题项目应用了MyBatis-Plus多数据源配置但是在执行定时任务时发现没达到想要的结果于是查询日志分析问题最终发现问题所在多数据源注解会合事务注解冲突导致失效@DS("&q ...

  7. layui 点击显示与点击隐藏

    主要有lay-filter属性,靠这个属性监听 <div class="layui-col-xs12 layui-col-sm4 layui-col-md4"> < ...

  8. 学习JavaScript第一周

    三种输出方式,console.log.element.write.alert(): 简单数据类型:数值型.字符串型.布尔类型.undefined.null 复杂数据类型:对象 数据类型的转换:字符串转 ...

  9. 2vue

    事件 v-on:click="handle" @click="handle" handle创建在methods里 <!DOCTYPE html> & ...

  10. vue-cli简介

    1.定义:vue-cli(俗称:vue 脚手架)是 vue 官方提供的.快速生成 vue 工程化项目的工具,提供了终端里的 vue 命令.它可以通过 vue create 快速搭建一个新项目: 特点: ...