TypeScript类型编程中的extends和infer示例解析

 更新时间:2023年08月04日 10:54:11   作者:Qing  
这篇文章主要为大家介绍了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 = 1

infer

还是拿例子来进行讲解,下面的例子是要提取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 = string

Parameters

内置工具类型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实现十大排序算法之冒泡排序示例详解

    TypeScript实现十大排序算法之冒泡排序示例详解

    这篇文章主要为大家介绍了TypeScript实现十大排序算法之冒泡排序示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-02-02
  • 微信小程序实现图片预加载组件

    微信小程序实现图片预加载组件

    预加载图片是提高用户体验的一个很好方法。图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度。下面这篇文章主要介绍了微信小程序实现图片预加载组件的相关资料,需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-01-01
  • TypeScript Module Resolution解析过程

    TypeScript Module Resolution解析过程

    这篇文章主要为大家介绍了TypeScript Module Resolution解析过程,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-07-07
  • typescript 支持与本地调试配置详解

    typescript 支持与本地调试配置详解

    这篇文章主要为大家介绍了typescript 支持与本地调试配置详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-09-09
  • 与ChatGPT结对编程实现代码详解

    与ChatGPT结对编程实现代码详解

    这篇文章主要为大家介绍了与ChatGPT结对编写实现代码详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03
  • DS-SDK封装ThreeJS的三维场景核心库Viewer

    DS-SDK封装ThreeJS的三维场景核心库Viewer

    这篇文章主要为大家介绍了基于DS-SDK封装ThreeJS的三维场景核心库Viewer封装示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-10-10
  • TypeScript交叉运算的算法示例解析

    TypeScript交叉运算的算法示例解析

    这篇文章主要为大家介绍了TypeScript交叉运算的算法示例解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-08-08
  • TypeScript快速学习入门基础语法

    TypeScript快速学习入门基础语法

    TypeScript的基础语法,包括变量声明、复合类型(数组和对象)、条件控制(if-else和switch)、循环(for和while)、函数(基础和箭头函数,以及可选参数)、面向对象特性(枚举、接口、继承)以及模块开发中的导出和导入
    2024-07-07
  • Typescript是必须要学习吗?如何学习TS全栈开发

    Typescript是必须要学习吗?如何学习TS全栈开发

    Typescript目前在前端,网站,小程序中的位置基本无可替代,同时也可以构建完美的CLI应用。在移动,桌面,后端方面,性能不是要求很高的情况下完全可以胜任,并且在区块链,嵌入式,人工智能方面也开始茁壮成长。
    2022-12-12
  • 开发typescript项目tsconfig.json配置及选项使用解析

    开发typescript项目tsconfig.json配置及选项使用解析

    这篇文章主要为大家介绍了tsconfig.json配置及选项使用详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-07-07

最新评论