ts 类型体操之 easy 题

终于还是被通知解除合同了,只能全心投入到新的求职之路上去了。不过,我还是想尽快完成《类型体操》系列文章,尽量每周都有产出。Easy 题共 13 题,题目都很短,我就全部整理到这一篇文章了。

If

实现一个实用类型 If<C, T, F>,它接受一个 boolean 类型 C,一个真值 T 和一个假值 F。若 C 是 true 返回 T;若 C 是 false 返回 F。

type A = If<true, 'a', 'b'>; // expected to be 'a'
type B = If<false, 'a', 'b'>; // expected to be 'b'

考点:extends 的两个用途:类型约束和条件判断。

type If<C extends boolean, T, F> = C extends true ? T : F;
  • C extends boolean:约束类型 C 必须是 boolean 类型。
  • C extends true:判断 C 是否为 true 。

Tuple to Object

给定一个数组,将其转换为对象类型,键/值必须在提供的数组中。

const tuple = ['tesla', 'model 3', 'model X', 'model Y'] as const;

type result = TupleToObject<typeof tuple>; // expected { 'tesla': 'tesla', 'model 3': 'model 3', 'model X': 'model X', 'model Y': 'model Y'}

考点:数组(array)或元祖(tuple)类型有个number属性,它可以把数组或元祖中的元素类型提取出来构成联合类型.

比如:

type Tuple = [string, number];
type TupleNum = Tuple[number]; // string | number

所以,我们可以利用这个特性,把数组(T)中的元素类型提取成联合类型(T[number]);然后通过《基础语法》篇里提到的类型映射,用 in 遍历该联合类型,最后确保键/值一致,就完成了这个题。

type TupleToObject<T extends readonly PropertyKey[]> = {
  [K in T[number]]: K;
};

p.s. 还记得 PropertyKey 是什么吗?它是 string | number | symbol 的别名。

Length of Tuple

获取元祖的长度。

如:

type tesla = ['tesla', 'model 3', 'model X', 'model Y'];
type spaceX = [
  'FALCON 9',
  'FALCON HEAVY',
  'DRAGON',
  'STARSHIP',
  'HUMAN SPACEFLIGHT',
];

type teslaLength = Length<tesla>; // expected 4
type spaceXLength = Length<spaceX>; // expected 5

考点:数组类型有个length属性,它表示该数组的长度。用法和T[number]有点区别,length外要加个要引号——T['length']

实现就很简单了,直接返回T['length']即可。

type Length<T extends readonly any[]> = T['length'];

First of Array

从一个数组类型中获取它的第一个类型。

如:

type arr1 = ['a', 'b', 'c'];
type arr2 = [3, 2, 1];

type head1 = First<arr1>; // expected to be 'a'
type head2 = First<arr2>; // expected to be 3

考点:T[0]表示数据第一个元素,T[1]第二个,依次类推。如果 index 超出了数组长度,则返回undefined

实现入下:

type First<T extends any[]> = T['length'] extends 0 ? never : T[0];

简单解释一下:

  1. T extends any[]:限定 T 必须是一个数组类型
  2. T['length'] extends 0:判断T['length']是否为0,如果T['length']不是,则表示大于0,返回T[0]——即第一个元素,否则返回never

这里提一句T[number]本质等于T[0] | T[1] | T[2] | ...,所以它成了数组所有元素的联合类型,而T['length']则是一个具体的数字。

Concat

在类型系统中实现 JavaScript 的 Array.concat 函数。该类型接受两个数组参数。输出一个新数组,按从左到右的顺序包含输入内容。

如:

type Result = Concat<[1], [2]>; // expected to be [1, 2]

考点:... 扩展运算符(Spread syntax):它可以在数组构造时,将数组表达式在语法层面展开。

知道这个考点,答案就呼之欲出了。

type Concat<T extends readonly unknown[], U extends readonly unknown[]> = [
  ...T,
  ...U,
];

但是要注意:这个是类型系统的数组,不是 JS 的数组;它们俩只有极少数的语法是相同的。学习类型系统,还是要以学习新语言的态度去对待。

下面再做两道类似的题目。

Push

实现 Array.push:在数组末尾追加一个元素

如:

type Result = Push<[1, 2], '3'>; // [1, 2, '3']

考点: 还是扩展运算符

type Push<T extends readonly unknown[], U> = [...T, U];

Unshift

实现 Array.unshift,就是在数组的开头添加元素。

如:

type Result = Unshift<[1, 2], 0>; // [0, 1, 2]

做完 Push,这题就毫无压力了。

type Unshift<T extends unknown[], U> = [U, ...T];

Includes

在类型系统中实现 JavaScript 的 Array.includes 函数。该类型接受两个参数。输出应为布尔值 true 或 false。

如:

type isPillarMen = Includes<['Kars', 'Esidisi', 'Wamuu', 'Santana'], 'Dio'>; // expected to be `false`

考点:1. 扩展运算符和 infer 的结合;2. 递归

这题还是有点难度的,理论上不应该是 easy 题。我们先看答案,再解释:

type Includes<T extends readonly any[], U> = T extends [
  infer First,
  ...infer Rest,
]
  ? Equal<First, U> extends true
    ? true
    : Includes<Rest, U>
  : false;

逐行解释:

  1. T extends [infer First, ...infer Rest]:我们使用扩展运算符,将数组 T 展开为FirstRest两部分。其中,First是数组的第一个元素,Rest是数组的剩余部分。这个语法大家要记住,之后的 medium 题里面会反复出现。
  2. Equal<First, U> extends true ? true : Includes<Rest, U>:我们使用 infer 关键字推断出 First 类型,接着将 First 和 U 进行比较。如果相等,则返回 true;否则,递归调用 Includes,将剩余部分 Rest 和 U 进行比较。
  3. : false:如果数组 T 为空,则返回 false。

p.s.Equal 不是原生的 ts 类型方法;但是在 type challenge 里我通常都直接用。它的实现大大超出了本文 easy 的范畴,我会在之后 hard 篇章里解释,这里先把它的实现列一下,有兴趣的朋友可以到这里查看。

type Equal<X, Y> =
  (<T>() => T extends X ? 1 : 2) extends <T>() => T extends Y ? 1 : 2
    ? true
    : false;

其他

还有五道 easy 题,我在之前《内置工具》相关的篇章里系统讲过了,这里就不占篇幅了。大家有兴趣的话可以回顾一下本系列先前的文章。

《ts 类型体操-内置工具(上)》

《ts 类型体操-内置工具(中)》

《ts 类型体操-内置工具(下)》

小结

Easy 篇主要还是在介绍语法,这些语法非常实用,是以后 medium 题目的基础。可以肯定的是,不做题的同学基本不可能了解这类知识。类型系统是一门图灵完备的语言,但是我很想吐槽 ts 官方文档,它把很重要的语法点散落在在边边角角的篇章里,以至于普通人根本意识不到它的语言能力。也许正是因为官方的不重视,导致绝大多数同学的 ts 水平永远停留在了新手村。

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

推荐阅读更多精彩内容