banner
raye~

Raye's Journey

且趁闲身未老,尽放我、些子疏狂。
medium
tg_channel
telegram
twitter
douban
github
email
nintendo switch
playstation
steam_profiles
zhihu

TS挑战记录(一)

vipul-jha-a4X1cdC1QAc-unsplash

TS 挑战记录 (一)#

题目记录在这里: https://github.com/type-challenges/type-challenges/blob/main/README.md

这个挑战主要是让挑战者更好的了解 TS 的类型系统,通过 type 这个语法来实现 TS 中的各种功能,感觉还挺有意思的!

同是type是一个图灵完备的系统?也就是可以实现类似C++template 的元编程?🤔有空可以好好研究下:
https://github.com/microsoft/TypeScript/issues/14833

Hello World 挑战:

// expected to be string
type HelloWorld = any

// you should make this work
type test = Expect<Equal<HelloWorld, string>>

第一个示例主要是展示 type 的用法,答案:

type HelloWorld = string

既然这题题目本质上都是为了让你给理解 type 的用法,那先记录下学习 type 的一些笔记,不然后面的题目真的看不懂了

type 的主要用法#

这里先总结一下 type 的主要用法,防止后面的代码看不懂(其实我就是先做题再反过去学 type 关键字的😅)

1. 基本类型别名#

type Word = string;

这个很好理解,自定义一个类型 Word ,用来替代 string

2. 联合类型#

type StringOrNumber = string | number;

这里开始复杂起来了,不过可以理解为一个 union ,通过 StringOrNumber 可以声明 string 或者 number 类型的变量

注意这里的类型也可以是字面量类型,如

type ABC = "A" | "B" | "C"

这就表明 ABC 类型的变量值只能是 "A","B","C" 这三者之一

3. 交叉类型#

type Named = { name: string };
type Aged = { age: number };
type Person = Named & Aged;

如果要使用该交叉类型,则

let person: Person = {
    name: 'Alice',
    age: 30
};

4. typeof && keyof#

typeof 是获取一个变量或值的类型,有点类似C++ 的 type,但是用途更广泛

比如对一个函数使用 typeof 操作符,可以获得函数对应的类型,有点类似 C++ auto 自动推导

const foo = (arg1: string, arg2: number): void => {}

通过 typeof 来定义参数类型

const bar = (f: typeof foo) => {
  f("Hello", 42);
}

keyof 则是获取一个类型的所有键名,如下示例

type Person {
  name: string;
  age: number;
}

type K = keyof Person;  // "name" | "age"

extends#

extends 主要用于判断给定的泛型变量是否可以赋值给指定的类型

T extends U ? X : Y

当然,后续你会发现 extends 有很多神奇的用法 🤣

in#

TS 的 in 运算符除了常用法外,还可以用于遍历类型,可以作为元编程,举例如下:

type Keys = 'a' | 'b'

type MyMap<T> = {
  [K in Keys]: T
}

Keys 代表表示可以是 'a' 或者 'b' 这两种字面量类型

K in Keys 则可以遍历这两种类型

最后的 MyMap 结构你可以理解成这样的:

{
	a: T, // 'a' 类型,其实key必须是a
	b: T // 'b' 类型,其实key必须是b
}

infer#

infer 的作用就是可以放在一个地方,用来指定推断出的类型(我反正这么理解的

看一个简单的示例:

这里我们用 (...args: any) => infer R 这里是一个函数的形式,想象 infer R 是一个整体,其实代表的是箭头函数的返回值,那么 infer R 自然就等于是返回值类型了

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

使用示例:可以看到 ReturnType 推断除了 R 是 string 类型

type T = (a: number) => string
type R = ReturnType<T> // string

补充完这些知识之后,就可以开始做题了 😉

实现 MyPick#

interface Todo {
  title: string
  description: string
  completed: boolean
}

type TodoPreview = MyPick<Todo, 'title' | 'completed'>

const todo: TodoPreview = {
    title: 'Clean room',
    completed: false,
}

通过 keyof 可以获取类型的所有属性组成的字面量联合类型,然后通过 in 遍历即可

type MyPick<T, K extends keyof T> = {
  [P in K]: T[P];
};

实现 MyReadonly#

interface Todo {
  title: string
  description: string
}

const todo: MyReadonly<Todo> = {
  title: "Hey",
  description: "foobar"
}

todo.title = "Hello" // Error: cannot reassign a readonly property
todo.description = "barFoo" // Error: cannot reassign a readonly property

给属性加上 readonly 即可

type MyReadonly<T> = {
	readonly [P in keyof T]: T[P];
}

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'}

这个想法倒是不难,但是没想全,直接看答案了:

type TupleToObject<T extends readonly (keyof any)[]> = {
  [K in T[number]]: K;
};

有一些关键部分要解释下:

  • keyof any 其实就是所有能表述的枚举类型,即 string | number | symbol ,因为 any 类型就是这三种 🤣
  • readonly (keysof any)[] 表示所有只读的 (string | number | symbol)[],即混合类型的数组
  • [K in T[number]] 这里就是用 number 来表示数字字面量

这里为什么要用 readonly (keyof any)[] ?,而不是 readonly any[]

因为最后我们的呢结果是一个 Object,而 JS 中 Object 的 key 只能是 string, numbersymbol ,如果这里改成 T extends readonly any[], 那么就可能导致 undefined, boolean, null 这样的值成为 key 从而报错

另外一个比较难理解的就是 T[number] ,这个看个示例就懂了

type Person = {
  name: string;
  age: number;
};

type PersonName = Person["name"];  // PersonName 将得到 "string" 类型
type PersonAge = Person["age"];  // PersonAge 将得到 "number" 类型

可以理解为通过 T[K] 的语法获得对应的 value 类型

依次类推:

type ArrayType = string[];

type ElementType = ArrayType[number];  // ElementType 将得到 "string" 类型

type TupleType = [string, number, boolean];

type TupleFirstElementType = TupleType[0];  // TupleFirstElementType 将得到 "string" 类型
type TupleSecondElementType = TupleType[1];  // TupleSecondElementType 将得到 "number" 类型

那么答案中的 T[number] 即表示数组中每个元素的类型,再通过 K in T[number] 即可获得每一个类型

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

这题的思路因为要求数组第一个元素的类型,数组的元素类型可以是任意的(没有必须作为 Object Key 的限制)

如果直接取第一个元素

type First<T extends any[]> = T[0]

但是这里要判断数组是否为空,有两种判断方法

最简单的当然是:

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

但是 TS 的类型,还可以当做值一样去运算,比如我们计算 T['length'] 也是可以的,因此

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

还有一种思路就是:把数组做分解,想不出来😓

type First<T extends any[]> = T extends [infer A, ...infer rest] ? A : never

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 属性即可,但也可以不readonly的,猜测是怕影响到原有的数组刻意加的吧

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

Exclude#

type Result = MyExclude<'a' | 'b' | 'c', 'a'> // 'b' | 'c'

这个应该是最难理解的了,答案是这个:

type MyExclude<T, U> =  T extends U ? never : T;

明明 extends 只是判断 T 是否能被赋值为 U 类型,

但是实际这里的执行过程为

  • 'a' extends 'a' ? never : 'a',返回 never
  • 'b' extends 'a' ? never : 'b',返回'b'
  • 'c' extends 'a' ? never : 'c',返回 'c'

最后结果拼接,自然返回就是 'b' | 'c'

参考这篇
https://www.typescriptlang.org/docs/handbook/2/conditional-types.html#distributive-conditional-types

Awaited#

这个也是很难理解的🫠

type ExampleType = Promise<string>

type Result = MyAwaited<ExampleType> // string

刚开始看不是很简单吗,我直接

type MyAwaited<T> = T extends Promise<infer U> ? U : never;

但是你有没有考虑到Promise里面可能嵌套了 Promise 呢?

那就改进下:(对你没看错 type 居然还支持递归)

type MyAwaited<T extends Promise<any>> = T extends Promise<infer U>
  ? U extends Promise<any>
    ? MyAwaited<U>
    : U
  : never;

理论上这样应该就可以了吧,但是我看了点赞最多的一个答案如下:

type Thenable<T> = {
  then: (onfulfilled: (arg: T) => unknown) => unknown;
}

type MyAwaited<T extends Thenable<any> | Promise<any>> = T extends Promise<infer Inner>
? Inner extends Promise<any> ? MyAwaited<Inner> : Inner
: T extends Thenable<infer U> ? U : false

这就有点懵了,为什么还要额外定一个 Thenable 类型,并且额外判断这种情况呢?暂时也没想明白🤔
如果不自定义 Thenable 类型,也可以直接用 PromiseLike ,后面有空再研究下

If#

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

这个就很简单了,第一个值必须 extends boolean ,并且需要判断是否能被赋值给 true 类型(注意直接写 C ? T :F  是不行的 🤣

type If<C extends boolean, T, F> = C extends true ? T : F;

Concat#

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

想不到吧,数组类型居然还支持 ... 运算符

type Concat<T extends any[], U extends any[]> = [...T, ...U]

Includes#

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

这里看上去是要写一个循环,但实际根据 extends,如果是判断能否转为一个联合类型,则会展开然后依次判断,即

type Includes<T extends readonly any[], U> = U extends T[number] ? true : false

可以看到 T[number] 实际上是如下:

'Kars' | 'Esidisi' | 'Wamuu' | 'Santana'

然后 U extends T[number] 就会逐个去判断

Push#

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

这个也很简单了,直接展开 T,并且加上 U 即可

type Push<T extends any[], U> = [...T, U]

Unshift#

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

很简单不细说了

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

Parameters#

const foo = (arg1: string, arg2: number): void => {}

type FunctionParamsType = MyParameters<typeof foo> // [arg1: string, arg2: number]

这个也挺简单的,注意理清关系就好了

type MyParameters<T extends (...args:any) => any> = T extends (...args:infer P) => any ? P : never;
Loading...
Ownership of this post data is guaranteed by blockchain and smart contracts to the creator alone.