typescript之经常使用工具类型

typescript提供一些工具类型来进行类型转换。这些工具类型都是全局的。

一、Partial<T>

将构造类型T的全部属性设置为可选。

//内部实现原理
type Partial<T> = {
    [K in keyof T]?: T[K]
}
复制代码

interface Todo {
    id: string;
    title: string;
    description?: number;
}

type TodoParial = Partial<Todo>;

//等价于
type PersonParial = {
    id?: string;
    title?: string;
    description?: number;
}

//使用场景
function updateTodo(todo: Todo, fieldsToUpdate: Partial<Todo>){
    return {...todo, ...fieldsToUpdate};
}

const todo1 = {
    title: 'test',
    description: 'test xxxx',
};

const todo2 = updateTodo(todo1, {
    description: 'test yyy',
});

复制代码

二、Require<T>

将类型T全部属性设为require

type Require<T> = {
    [P in keyof T]-?: T[P];
}
复制代码

interface Todo {
    id: string;
    title: string;
    description?: number;
}

type TodoRequire = Require<Todo>;
//等价于
type TodoRequire = {
    id: string;
    title: string;
    description: number;
}
复制代码

三、 Record<K, T>

构造一个类型，其属性名为K，属性值为T

//内部实现原理
type Record<K extends keyof any, T> = {
   [P in K]: T; 
}
复制代码

interface PageInfo {
    title: string;
}
type Page = 'home' | 'about' | 'contact';

type PageRecord = Record<Page, PageInfo>;

//等价于
type PageRecord = {
    home: {
        title: string; 
    };
    about: {
        title: string;
    }
    contact: {
        title: string;
    };
}
//使用场景
const page:Record<Page, PageInfo> = {
    home: {title: '首页'},
    about: {title: '关于'},
    contact: {title: '联系咱们'},
}
复制代码

四、Pick<T, K>

从类型T中挑选部分属性K来构造新的类型

//内部实现原理
type Pick<T, K extends keyof T> = {
    [P in K]: T[P];
}
复制代码

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

type TodoPreview = Pick<Todo, 'title' | 'completed'>;

//等价于
type TodoPreview = {
    title: string;
    completed: boolean;
}

//使用场景
const todoPreview: TodoPreview = {
    title: 'test',
    completed: false,
}
复制代码

五、Exclude<T, U>

从类型T中，剔除全部能赋值给U的属性

//内部实现原理
type Exclude<T, U> = T extends U ? never : T;
复制代码

type T1 = Exclude< 'a' | 'b' | 'c', 'b'| 'c'>;
//等价于
type T1 = 'a'

type T2 = Exclude<number | string | (()=>void), Function>;
//等价于
type T2 = string | number;
复制代码

六、Extract<T, U>

从类型T中提取全部能够赋值给U的类型

//实现原理
type Extract<T, U> = T extends U ? T : never;
复制代码

type T1 = Extract< 'a' | 'b' | 'c', 'b'| 'c'>;
//等价于
type T1 = 'b' | 'c'

type T2 = Extract<number | string | (()=>void), 'b'| 'c'| Function>;
//等价于
type T2 = ()=> void;
复制代码

七、Omit<T, K>

从类型T中剔除全部能赋值给K的属性

type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>
复制代码

interface Todo {
    title: string;
    description?: string;
    completed?: boolean;
}
type T1 = Omit<Todo, 'title'>
//等价于
type T1 = {
    description?: string;
    completed?: boolean;
}
复制代码

八、NonNullable

从T中剔除null和undefined

type NonNullable<T> = T extends undefined | null ? never : T;
复制代码

type T1 = NonNullable<string[] | undefined | null>;
//等价于
type T1 = string[];
复制代码

九、ReturnType<T>

由函数类型T的返回值类型构造一个类型

//实现原理
type ReturnType<T extends (...arg: any) => any> = T extends (...arg:any) => infer R ? R : any;
复制代码

infer R 表示待推断的函数返回值。若是T可以赋值给(...arg:any) => infer R则结果是R，不然是any

type T1 = ReturnType<()=> string>;
//等价于
type T1 = string;
复制代码

十、Readonly<T>

将T中全部属性设为只读

type Readonly<T> = {
    readonly [K in keyof T]: T[K];
}
复制代码

interface Todo {
    title: string;
    description?: string;
    completed?: boolean;
}
type T1 = Readonly<Todo>;
//等价于
type T1 = {
    readonly title: string;
    readonly description?: string;
    readonly completed?: boolean;
}
复制代码

参考文章： TypeScript提供一些工具类型

巧用 TypeScript（五）

深刻理解 TypeScript