TypeScript类型编程中的extends和infer示例解析
引文
在刚接触TypeScript的时候，使用最多的就是type和interface这两个关键字，用来声明类型，其实这样也基本满足日常需求。但是如果需要设计一些高级类型的话，那么仅仅用原来所掌握的TypeScript知识是无法满足需求的。
设计高级类型的话涉及到类型编程的知识点，而类型编程中有两个关键字非常重要，分别是extends和infer。
extends用来约束入参的类型以及进行条件判断，infer用来声明局部的类型变量。
extends
条件判断
我们举个简单的例子来说明
type isOne<T extends number> = T extends 1 ? true : false
我们单独看T extends 1 ? true : false这部分，这里和JavaScript中的三元表达式并无二致，但是有些同学不清楚其中extends表示的是什么含义。
T extends 1 ? true : false表示的含义其实就是传入的T类型是否能够赋值给字面量1这个类型，如果可以的话，就返回true，否则返回false
约束参数类型
继续使用上面的例子，我们单独看T extends number，这里extends的意思就是限制传入的T类型必须是number类型，否则报错。
为什么需要有这个限制？
因为我们是要判断类型T是否能够赋值给字面量类型1，但是如果传入的参数都不是number类型，那么就没必要做后续的条件判断了。
约束infer推导的局部变量类型
type GetFirst<T extends string[]> = T extends [infer FirstChar, ...infer Rest]
? `${FirstChar}`
: never;
type Res = GetFirst<['1', '2', '3']>;来看看报错信息，我们传入的参数类型限制为sting类型的数组，但是infer推导出来的类型实际上是unknown类型，所以导致类型不匹配。
解决办法有三种：
对FirstChar使用extends先做过滤
type GetFirst<T extends string[]> = T extends [infer FirstChar, ...infer Rest]
? FirstChar extends string
? `${FirstChar}`
: never
: never;FirstChar和string进行交叉运算
type GetFirst<T extends string[]> = T extends [infer FirstChar, ...infer Rest]
? `${FirstChar & string}`
: never;使用infer extends做类型转换
type GetFirst<T extends string[]> = T extends [
infer FirstChar extends string,
...infer Rest
]
? `${FirstChar}`
: never;infer extends是在ts 4.7版本支持，低于这个版本无法使用。
类型转换
type StrToNum<T extends string> = T extends `${infer Num extends number}` ? Num : T
type Res = StrToNum<"1">
// ts 4.7时，返回的结果是type Res = number
// ts 4.8及以上， 返回的结果是type Res = 1infer
还是拿例子来进行讲解，下面的例子是要提取Promise包裹的类型。
type PromiseValue<T extends Promise<unknown>> = T extends Promise<infer Value> ? Value : never type Res = PromiseValue<Promise<string>> // string
画个简单的图来描述下如何提取变量类型。
注意：infer声明的局部变量，只能在条件语句为true的分支里面使用。
如果在false分之里面使用通过infer声明的局部变量，编译器会直接报错表示找不到这个变量。
组合使用
ReturnType
内置工具类型RetureType用于获取函数的返回值类型。
type MyReturnType<T extends (...args: any) => any>
= T extends (...args: any) => infer R
? R
: any;
type Res = MyReturnType<() => string> // type Res = stringParameters
内置工具类型Parameters用于获取函数的参数类型。
type MyParameters<T extends (...args: any) => any>
= T extends (...args: infer P) => any
? P
: never;
type Res = MyParameters<(a: string, b: number) => void> // type Res = [a: string, b: number]以上就是TypeScript类型编程中的extends和infer示例解析的详细内容，更多关于TypeScript类型编程extends infer的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要介绍了typescript在vue中的入门案例代码demo,使用技术栈vue2+typescript+scss入门练手项目，天气预报demo，需要的朋友可以参考下。2022-12-12
这篇文章主要为大家介绍了TypeScript数据结构栈结构Stack教程示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-02-02
Manipulation-TypeScript DOM操作示例解析
这篇文章主要为大家介绍了DOM Manipulation-TypeScript DOM操作示例解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-03-03
layui.layer弹出层(子页面)改变父页面内容（访问元素和函数）
当前页面（父框架或父页面）使用layer以iframe层的方式弹出新的窗口（子框架或子页面）时，如何在子页面中访问父页面的元素和函数，从而改变父元素的页面显示，给用户合理舒适的体验。2023-02-02
TypeScript可以使用JavaScript中的所有代码和编程概念,TypeScript是为了使JavaScript的开发变得更加容易而创建的。推荐先精通JS的的前提下再学习TS，这样更有利于同时学习两门语言。2022-12-12
开发typescript项目tsconfig.json配置及选项使用解析
这篇文章主要为大家介绍了tsconfig.json配置及选项使用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-07-07
预加载图片是提高用户体验的一个很好方法。图片预先加载到浏览器中，访问者便可顺利地在你的网站上冲浪，并享受到极快的加载速度。下面这篇文章主要介绍了微信小程序实现图片预加载组件的相关资料,需要的朋友可以参考借鉴，下面来一起看看吧。2017-01-01
本文讲述了typescript开发的一些高级的类型与技术，算是对于基础知识点的补充，具体内容包括：比如元组、枚举类、接口、泛型相关概念等。虽说是进阶，但是内容不算多也并不难理解。2022-12-12
这篇文章主要为大家介绍了TypeScript中的函数重载示例分析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-08-08
这篇文章主要为大家介绍了TypeScript保姆级基础教程示例详解，主要为大家介绍了typescript的类型，函数，对象，接口等基础示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助2022-07-07
最新评论