typescript之常用工具类型

5,270 阅读3分钟

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

1、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',
});

2、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;
}

3、 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: '联系我们'},
}

4、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,
}

5、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;

6、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;

7、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;
}

8、NonNullable

从T中剔除null和undefined

type NonNullable<T> = T extends undefined | null ? never : T;
type T1 = NonNullable<string[] | undefined | null>;
//等价于
type T1 = string[];

9、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;

10、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