介绍下type challenge中几道简单的类型体操。涉及的知识点主要是:映射类型、 条件类型、联合类型的分布式、infer R等。
1、实现pick
不使用 Pick<T, K>
,实现 TS 内置的 Pick<T, K>
的功能。
从类型 T
中选出符合 K
的属性,构造一个新的类型。
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[key]
}
2、实现Readonly对象属性只读
不要使用内置的Readonly<T>
,自己实现一个。
泛型 Readonly<T>
会接收一个 泛型参数,并返回一个完全一样的类型,只是所有属性都会是只读 (readonly) 的。
也就是不可以再对该对象的属性赋值。
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]
}
3、实现Exclude
实现内置的 Exclude<T, U>
类型,但不能直接使用它本身。
从联合类型
T
中排除U
中的类型,来构造一个新的类型。
type Result = MyExclude<'a' | 'b' | 'c', 'a'> // 'b' | 'c'
type MyExclude<T, M> = T extends M ? never : T
4、元组转为对象
将一个元组类型转换为对象类型,这个对象类型的键/值和元组中的元素对应。
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 PropertyKey[]> = {
[key in T[number]]: key
}
5、实现Parameters
实现内置的 Parameters 类型,而不是直接使用它,可参考TypeScript官方文档。
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 R) => any ? R : never