ts 类型体操之内置工具类型(中)

书接上文。在上一节中,我们学习了 8 个最常用的内置工具类型。这些工具类型都是对现有类型进行“变形”的工具,它们可以改变类型的结构,但不会改变类型本身的值。这些内置工具类型,本质上就是类型系统中的“函数”,它们接受范型作为参数,返回一个新的类型。

这一节,我们继续学习内置工具类型,主要集中学习infer相关的几个内置工具:

Parameters<T>:获取函数类型 T 的返回参数列表

如下例所示,以元祖形式返回函数参数列表:

type T1 = Parameters<(s: string, n: string) => void>; // [string, number]

实现用到了我们基础语法篇里提到的infer;在这里,我们使用 infer P 来推断函数参数的类型,并将其赋值给 P

type Parameters<T extends (...args: any) => any> = T extends (
  ...args: infer P
) => any
  ? P
  : never;

简单介绍一下:

  1. 所有函数类型的基类是 (...args: any) => any;Parameters 用于函数类型的参数类型提取,所以我们给范型(参数)T加一个限制 T extends (...args: any) => any,确保 T 是函数类型,否则类型抛错
  2. 类型推断 infer 只能配合条件判断 extends 使用;所以我们需要冗余地写一遍类似的代码 T extends (...args: infer P) => any ? P : never;这次主要是为了推断出参数 args 的类型 P,然后返回该类型。

p.s. 上面实现中两个 extends 作用不同:第一个是用于类型限制;第二个是配合infer的条件判断。大家不要搞混了。

ReturnType<T>:获取函数类型 T 的返回类型

同理ReturnType的实现也和Parameters差不多,只不过把推断的参数类型换成了返回类型:

type ReturnType<T extends (...args: any) => any> = T extends (
  ...args: any
) => infer R
  ? R
  : any;

我们扩展一下,能不能自己实现一个类型工具,同时返回参数类型和返回类型呢?当然可以,这就是两个infer推断的事,如下所示:

type ParametersAndReturnType<T extends (...args: any) => any> = T extends (
  ...args: infer P
) => infer R
  ? { parameters: P; return: R }
  : any;

type T2 = ParametersAndReturnType<(a: string) => number>;

// type T2 = {
//     parameters: [a: string];
//     return: number;
// }

ConstructorParameters<T>:获取构造函数类型 T 的参数类型

上文提到:所有函数类型的基类型是 (...args: any) => any。而所有构造函数类型 T 的基类型是:

new (...args: any) => any

由于js的类(class)事实上是构造函数的一个语法糖,所以我们还需要考虑class。普通class的基类也自然是new (...args: any) => any。但是,ts多走了一步,支持了抽象类(abstract class),所以又给new (...args: any) => any找了个基类——abstract new (...args: any) => any。最终,我们判断T是否是构造函数,就成了判断T是否是abstract new (...args: any) => any的子类。

ConstructorParameters就是提取构造函数的参数类型,实现上和Parameters<T>差不多——一个infer的事:

type ConstructorParameters<T extends abstract new (...args: any) => any> =
  T extends abstract new (...args: infer P) => any ? P : never;

InstanceType<T>:获取构造函数类型 T 的实例类型

InstanceType就是获取构造函数的返回类型,实现上参考ReturnType<T>,也很简单:

type InstanceType<T extends abstract new (...args: any) => any> =
  T extends abstract new (...args: any) => infer R ? R : any;

其他

除了上面提到的几个,typescript 3.3 内置了ThisParameterType<T>OmitThisParameter<T>ThisType<T>。这些工具其实为了兼容typescript 2.0 版本里的 this 声明展开的:类型体操中完全用不到,现实开发中也应尽量避免在函数里用 this。这里由于与infer相关,我也把它们的实现列一下:

  • ThisParameterType<T>:提取函数类型的this参数的类型,如果函数类型没有this参数,则返回unknown

    type ThisParameterType<T> = T extends (this: infer U, ...args: never) => any
      ? U
      : unknown;
    

    实现倒不难,就是调用的时候有点蠢:要在函数的第一个参数里声明this类型,而且还不能简单调用该函数,要配合apply、call、bind使用。

    function foo(this: string) {
      return this + ':Hello world';
    }
    
    // type of foo => (this: string) => string
    
    type Foo = ThisParameterType<typeof foo>; // string
    
    function numberToString(s: Foo) {
      return foo.call(s);
    }
    
  • OmitThisParameter<T>:移除函数类型的this参数

    type OmitThisParameter<T> =
      unknown extends ThisParameterType<T>
        ? T
        : T extends (...args: infer A) => infer R
          ? (...args: A) => R
          : T;
    
    
      type omitThis = OmitThisParameter<(this: number, n: number) => void> // (n: number) => void
    

    这个就是移除了this声明的函数类型,稍微解释一下:

    1. unknown extends ThisParameterType<T>: 结合 ThisParameterType 的实现,我们可以得出,如果函数类型没有this声明,那么ThisParameterType<T> 直接返回unknown;所以这里就是单纯判断T有没有this声明,如果没有,直接返回T本身。
    2. T extends (...args: infer A) => infer R: 如果T是函数类型,则提取参数类型A和返回值类型R,反之直接返回类型T本身。p.s. 这种条件写法与 T extends (this: infer U , ...args: infer A) => infer R 区别是:会自动忽略this参数。
    3. (...args: A) => R: 返回一个新的函数类型,这个函数类型不再声明this类型,其他参数类型和返回值类型与T相同。

    实现上也挺简单,就是有两层条件判断。以后我们接触type challenge真题时,会碰到更多层的情况。不要慌,可以把代码类似“抽取函数”(类型嵌套)的形式来重构。比如:

    type OmitThisParameter<T> =
      unknown extends ThisParameterType<T> ? T : OmitThisParameterFunc<T>;
    
    type OmitThisParameterFunc<T> = T extends (...args: infer A) => infer R
      ? (...args: A) => R
      : T;
    
  • ThisType<T>:非推理类型位置的标记

    早古的设计:没啥用,就是个this的标记位,等于空接口,一笔带过了。

    interface ThisType<T> = {};
    

小结

这期我们主要讲了infer相关的几个内置工具类型。infer是type challenge中除了extends以外出场频率最高的一个关键字,它能够让我们在类型体操中实现很多看似不可能的功能。我想大家在学习过这几个工具后,应该能对infer有更深的理解。

本文是该系列的第四篇文章,我们回过头来思考一下type challenge(类型体操),解决这类问题到底有多少意义?其实它就是类似于leetcode的代码训练。很多人对leetcode嗤之以鼻(我个人还是比较肯定leetcode作为日常代码训练的意义的,坚持每天一道leetcode),但是在面试中,leetcode题目还是占据着举足轻重的地位。类型体操自然没有达到leetcode这种业界地位,b不过一到涉及typescript的高级特性考察,你觉得面试官能问什么问题呢?我们学习一种语言本质上是对自己职业生涯的一项投资,投资的最大回报就是找到下一份满意的工作。即然你已经决定学习typescript,那就务必掌握好它最核心的部分——类型系统。

文章同步发布于an-Onion 的 Github。码字不易,欢迎点赞。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,242评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,769评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,484评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,133评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,007评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,080评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,496评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,190评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,464评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,549评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,330评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,205评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,567评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,889评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,160评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,475评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,650评论 2 335

推荐阅读更多精彩内容