TS 内置工具

TS 内置工具

1、Record -> 生产一个属性为K,类型为T的类型集合。

type React<K entends keyof any, T> = {
[P in K]: T;
}
用法
type Foo = Record<‘a’, string> // 相当于 type Foo = { a: string }
type Bar = {
b: string
}
type Baz = Record< keyof Foo | keyof Bar, number > // typ Baz = { a: number, b: number }
注解：可以用于创建 也可以用于合并然后重新赋值。 感觉没什么用

2、Partial-> 全部变可选 - 相反 Required -> 全部必选

type Partial = {
[P in keyof T]?: T[P];
};
用法
type IFoo = {
a?: string,
b: string
}
const foo: Partial = { a: ‘1’ } // 变为可选
const bar: Required<Partial> = { // 变为全部必选
a: ‘1’,
b: ‘2’
}

3、Readonly -> 全部只读 字面意思

type Readonly = {
readonly [P in keyof T]: T[P];
};
用法
type IFoo = {
name: string；
age: number；
}
const foo: Readonly = {
name: ‘cxc’,
age: 22,
}
foo.name = ‘xiaoming’ // 错误，因为 name 仅是只读的
foo.age = 20 // 错误，因为 age 也仅是只读的

4、Pick-> 提取一个属性

type Pick<T, K extends keyof T> = {
[P in K]: T[P];
};
用法
type IFoo = {
name: string；
age: number；
}
const foo: Pick<IFoo, ‘name’> = { // 相当于 type IFoo = { name: string }
name: ‘name’
}
const ifoo: Pick<IFoo, ‘name’ | ‘age’ | ‘msg’ > = { // 取出多个
name: ‘222’,
age: 1,
msg: ‘success’
}

5、Exclude-> 从 T 中排除掉所有包含的 U 属性 -> 相反 Extract 提取 T 和 U 都有的

type Exclude<T, U> = T extends U ? never : T;
用法
type TFoo = Exclude<string | number | boolean, number> // 相当于 type IFoo = string | boolean
type XFoo = Exclude<string | number | boolean, number | string> // 相当于 type IFoo = string | number
const foo: TFoo = ‘2’ // 正确
const foo: TFoo = false // 正确
const foo: TFoo = 2 // 错误
const foo: XFoo = ‘2’ | 2 // 都正确
注释: 去除 T 中 U有的。 和 提取 T U都有的

6、NonNullable-> 去除 null 和 underfined

type NonNullable = T extends null | undefined ? never : T;
用法
type TFoo = 1 | null | undefined
let foo: TFoo = 1
foo = null
foo = undefined
let foo: NonNullable = 1 // 正确
foo = null // 错误，因为这个值已经被去除
foo = undefined// 错误，因为这个值已经被去除

7、Parameters-> 传入一个函数 返回 函数的参数数组

type Parameters<T extends (…args: any[]) => any> = T extends (…args: infer P) => any ? P : never;
用法
type Func = (a: string, b: number) => void
type Param = Parameters // 相当于 type Param = [string, number]

8、ConstructorParameters-> 传入一个类 返回 类的构造函数参数数组

type ConstructorParameters<T extends new (…args: any[]) => any> = T extends new (…args: infer P) => any ? P : never;
用法
class Foo {
constructor(x: string, y: number) {
console.log(x, y)
}
}
const foo: ConstructorParameters = [‘1’, 2]； // 相当于 type foo = [string, number]

9、ReturnType-> 传入一个函数 返回 函数的返回类型

type ReturnType<T extends (…args: any[]) => any> = T extends (…args: any[]) => infer R ? R : any;
用法
type Func = (value: number) => string
const foo: ReturnType = ‘1’

10、InstanceType-> 传入一个函数 返回 函数的返回类型

type InstanceType<T extends new (…args: any[]) => any> = T extends new (…args: any[]) => infer R ? R : any;
用法
class Foo {
public x = ‘1’
public y = 2
public say = (value: string) => {
console.log(value)
}
}
const foo: InstanceType = {
x: ‘1’,
y: 2,
say: (value: string) => {
console.log(value)
}
}
// 相当于
// type Foo = {
// x: string,
// y: number,
// say: (value: string) => void
// }
注释: 上边的7、8、9、10都是从函数和类中获取它们的各种类型参数

11、Omit-> 忽略T 中的 K属性

type User = { id: string; name: string; email: string;};
type UserWithoutEmail = Omit<User, “email”>;// This is equivalent to:
type UserWithoutEmail = { id: string; name: string;};
相当于删除了其中的属性

非内置类型定义

1、DeepReadonly-> 深度遍历 并把属性变成只读

type DeepReadonly = { readonly [P in keyof T]: DeepReadonly<T[P]> }
同上面的Readonly 一样，一个是浅层的 一个是深层的。
type Foo = {
a: string,
b: {
c: string,
}
}
const foo: DeepReadonly = {
a: ‘1’,
b: {
c: ‘2’,
}
}
foo.b.c = ‘s’; // c 为只读

2、ConvertnumberToString-> 将number转化成string

type ConvertNumberToString = {
[K in keyof T]: T[K] extends string ? string : T[K]
}

3、ValueOf -> 同 keyof 的 取出所有属性名， ValueOf是取出所有value裂隙

type ValueOf = T[keyof T]
用法
type Foo = {
a: string;
num: number;
}
type Valuea = ValueOf // string | number

4、Mutable-> 去除所有只读

type Mutable = {
-readonly [P in keyof T]: T[P]
}

总结

大部分的内置方法感觉都用不到，常用的应该是
Partial、Exclude、Pick，像其他全部转化的内置工具，太过于绝对。