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