目錄Typescript 高階類型索引類型extendsReadonly 只讀Omit 排除某些字段Typescript 高階類型索引類型

keyof 會提取interface中的key

class KeyCls {name: stringage: number}type KeyClsExample1 = keyof KeyCls // name | agefunction getParams(params: keyof KeyCls) {}getParams('name') // 正常getParams('age') // 正常getParams('sex') // 報錯

in 可以遍歷枚舉類型

type Keys = 'a' | 'b'type Obj = {[p in Keys]: any;}// type Obj = {// a: any;// b: any;// }extendstype TExtends<T, U> = T extends U ? number : never;type TExtendExample = TExtends<number, number | string> // number// 聯合類型, 表示如果T中的類型是U的子集, 那么返回never, 否則返回T, 這個過程可以理解為對T中的類型進行一次遍歷, 每個類型都執行一次extendstype NonNullable1<T, U> = T extends U ? never : Ttype NonExample = NonNullable1<null | string, null | undefined> // string

Pick 英文意思挑選, 也就是從某種類型中挑選出一個或多個屬性

interface Todo {title: stringdesc: stringDone: boolean}type TodoPreview = Pick<Todo, 'Done'>// type TodoPreview = {// Done: boolean;// }// 實現type MyPick<T, K extends keyof T = keyof T> = {[P in K]: T[P]}// K in extends keyof T = keyof T, 意思是取值必須是在T的key上面取, 如果不傳遞取值默認為keyof T,所有的key, 內部取值是如果傳遞了K, 則屬性就在K中任意一個Readonly 只讀interface Todo {title: stringdesc: stringDone: boolean}const todo: Pick<Readonly<Todo>, 'title'> = {title: '你好'}todo.title = '啊啊啊'; // 無法為“title”賦值，因為它是只讀屬性// 實現type myReadonly<T> = {readonly [K in keyof T]: T[K]}// 分析: 通過keyof拿到所有的key屬性值組成聯合類型, 然后通過in遍歷類型,在屬性值前面加上readonly, 值value則是 T[K]// 通過上面案例還可以實現可選類型type myOptional<T> = {[K in keyof T]?: T[K]}

Exclude 語法: Exclude<T, U>, 返回 T 中不存在于 U 的部分

// 回顧extends// // 聯合類型, 表示如果T中的類型是U的子集, 那么返回never, 否則返回T, 這個過程可以理解為對T中的類型進行一次遍歷, 每個類型都執行一次extends// type NonNullable1<T, U> = T extends U ? never : T// type NonExample = NonNullable1<null | string, null | undefined> // string// 自己實現Excludetype myExclude<T, U> = T extends U ? never : T// 測試// 分析: 對T也就是'a'|'b'遍歷, a extends 'a'|'b', 返回never, 'b', 'a'|'c',返回'b', 所以上面的返回'b'type excludeExample = myExclude<'a' | 'b', 'a' | 'c'> // 'b'

Partial 將傳入的屬性變為可選項

interface Todo {title: stringdesc: stringDone: boolean}type Partial<T> = {[P in keyof T]?: T[P]}type KeyOfExample1 = Partial<Todo>let keyofEx1: KeyOfExample1 = {title: '1'}

-? 將可選項代表的 ?去掉, 將該類型變成必選項, 與之對應的還有一個+?,是將可選項變成必選項

interface Todo {title: stringdesc: stringDone: boolean}type Mutable<T> = {-readonly [P in keyof T]: T[P]}type mutableExample = Mutable<Readonly<Todo>>// 將Todo變成可讀之后再變成可寫

Required 將傳入的屬性變成必選項

type Required<T> = {[P in keyof T]-?: T[P]}class KeyCls {name?: string;age?: number;}const requiredExample: Required<KeyCls> = {name: 'John',} // 報錯const requiredExample2: Required<KeyCls> = {name: 'John',age: 20,} // 正常

Record<K, T> 將K中所有的屬性轉化為T類型

type myRecord<K extends keyof any, T> = {[P in K]: T}enum Methods {GET = 'get',POST = 'post',DELETE = 'delete',PUT = 'put',}type IRouter = myRecord<Methods, (req: any, res: any) => void>// type IRouter = {// get: (req: any, res: any) => void;// post: (req: any, res: any) => void;// delete: (req: any, res: any) => void;// put: (req: any, res: any) => void;// }Omit 排除某些字段// 已經學習了Pick和Exclude, 則可以利用這兩個實現Omitclass KeyCls {name: string;age: number;}// 假設 T 為 KeyCls, K為name, 結果是 // type myOmit<KeyCls, 'name'>// { // age: number; // }// 只需要實現成這樣就行了, 也就是獲取到agetype myOmit<T, K extends keyof T> = Pick<T, 'age'>// 排除name, 按照上面的 Exclude<'name' | 'age', 'name'> // 'age'type myOmit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>// 測試type myOmitExample = myOmit<KeyCls, 'name'>;// type myOmitExample = { // age: number; // }

NonNullable<T>：作用是去掉 T 中的 null 和 undefined。T 為字面量/具體類型的聯合類型

// 4.8版本之前type NonNullable<T> = T extends null | undefined ? never : T;// 4.8版本之后type NonNullable<T> = T & {}

infer 可以推薦一個類型變量, 相當于生命一個類型變量, 這個變量的類型取決于傳入的泛型T

type F<T> = T extends () => infer R ? R : T;type F1 = F<string> // stringtype TObj<T> = T extends { name: infer V, age: infer U } ? V : Ttype TObjExample2 = TObj<{name: number;age: string;}>; // number;

ReturnType<T> 獲取函數返回值的類型

type ReturnType<T> = T extends (...args: any[]) => infer R ? R : any;functin getUser() { return {name: 'xxx',age: 20 }}type GetUserType = typeof getUser;// type GetUserType = () => {// name: string;// age: number;// }type ReturnUser = ReturnType<GetUserType>type ReturnUser = {// name: string;// age: number;// }

以上就是TypeScript條件類型的詳細內容，更多關于TypeScript條件類型的資料請關注好吧啦網其它相關文章！