2023-10-20-type-challenges-easy

subtitle

Posted by EWL on October 20, 2023

easy01-MyPick

题目

Implement the built-in Pick<T, K> generic without using it.

Constructs a type by picking the set of properties K from T

For example:

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

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

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

解法

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

分析 理解题目中的要求,MyPick要求返回一个对象类型,且对象类型中的属性名属于泛型T中的一部分,并且属性值类型也必须对应了泛型T中该属性名对应的类型。因此,首先推导一下,属性名 K应当限制为T的属性名的一个子集,所以在MyPick中需要限制一下 K extends keyof T,其次,返回对象类型中的属性名属于K,则[key in K]满足这个要求,且属性值只需要找 到T中对应属性名的属性值类型即可,所以T[K]是满足要求的,最终得到了这样的结果。

关键字

  • keyof
  • extends
  • in

keyof作用于对象类型,用于获取该对象类型所有的属性名集合。

type Obj = { x: number; y: string; z: boolean; };
type K = keyof Obj; // type K = 'x' | 'y' | 'z'

type AnotherObj = { [key: string]: number };
type P = keyof AnotherObj; // type P = string | number; 由于obj[0]和obj['0']是相同的,隐式转换的锅,所以这里的key即使被声明为了string类型,也仍然会补充返回一个number类型

type Arrayish = { [n: number]: unknown };
type A = keyof Arrayish; // type A = number;

extends在ts中主要有2种用法接口继承以及条件判断,掘金上有一篇很不错的文章,这里做一下记录即可,不再展开说明

in关键字就很好理解了,in作用于联合类型或者枚举类型

// 联合类型
type Property = 'name' | 'age' | 'phoneNum';
type PropertyObject = {
  [key in Property]: string;
}

// 枚举类型
enum Letter {
  A,
  B,
  C,
}
type LetterMap = {
  [key in Letter]: string;
}

easy02-Readonly

题目 Implement the built-in Readonly generic without using it.

Constructs a type with all properties of T set to readonly, meaning the properties of the constructed type cannot be reassigned.

For example:

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

解法

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

分析 这个题目的关键点在于需要理解ts中的readonly修饰词,可以参考官网文档 ,该修饰词可以类比到js中的const关键字。

easy03-Tuple to Object

题目 Given an array, transform it into an object type and the key/value must be in the provided array.

For example:

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> = {
  [key in T]: T[key]
};

分析 这个题目的关键点在于需要理解ts中的readonly修饰词,可以参考官网文档 ,该修饰词可以类比到js中的const关键字。