搞定TS,就靠这个系列(六)

292 阅读2分钟

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。

序言:

这是搞定 TS 第六篇,如果没有基础的小伙伴想要从零搞定 TS ,请从第一篇开始juejin.cn/post/701033…

第一题

实现一个 IsEqual 工具类型,用于比较两个类型是否相等。具体的使用示例如下所示:

type IsEqual<A, B> = // 你的实现代码// 测试用例
type E0 = IsEqual<1, 2>; // false
type E1 = IsEqual<{ a: 1 }, { a: 1 }> // true
type E2 = IsEqual<[1], []>; // false

本题考察内容

extends 的应用,这里有个小技巧,相互约束的两个属性,类型相同。

题解

type IsEqual<A, B> = A extends B? B extends A ? true :false :false
​
// 测试用例
type E0 = IsEqual<1, 2>; // false
type E1 = IsEqual<{ a: 1 }, { a: 1 }> // true
type E2 = IsEqual<[1], []>; // false

第二题

实现一个 Head 工具类型,用于获取数组类型的第一个类型。具体的使用示例如下所示

type Head<T extends Array<any>> = // 你的实现代码// 测试用例
type H0 = Head<[]> // never
type H1 = Head<[1]> // 1
type H2 = Head<[3, 2]> // 3

本题考察内容

  1. infer 声明变量,占位使用
  2. 数组非空判断

题解一

利用 infer 声明变量占位

type Head<T extends Array<any>> =
T extends [ first: infer R , ...rest: any[]  ] ?  R : never
​
// 测试用例
type H0 = Head<[]> // never
type H1 = Head<[1]> // 1
type H2 = Head<[3, 2]> // 3

题解二

判断数组非空,然后取第一项

type Head<T extends Array<any>> = T['length'] extends 0 ? never :T[0]
// 测试用例
type H0 = Head<[]> // never
type H1 = Head<[1]> // 1
type H2 = Head<[3, 2]> // 3

第三题

实现一个 Tail 工具类型,用于获取数组类型除了第一个类型外,剩余的类型。具体的使用示例如下所示:

type Tail<T extends Array<any>> =  // 你的实现代码// 测试用例
type T0 = Tail<[]> // []
type T1 = Tail<[1, 2]> // [2]
type T2 = Tail<[1, 2, 3, 4, 5]> // [2, 3, 4, 5]

本题考察内容

infer 的应用

题解

type Tail<T extends Array<any>> =  T extends [first: infer A, ...rest :infer B] ? B :[]
​
// 测试用例
type T0 = Tail<[]> // []
type T3 = Tail<[1]> // [2]
type T1 = Tail<[1, 2]> // [2]
type T2 = Tail<[1, 2, 3, 4, 5]> // [2, 3, 4, 5]