TypeScript條件類型示例全面講解

目錄 Typescript 高階類型 索引類型 extends Readonly 只讀 Omit 排除某些字段 Typescript 高階類型 索引類型 keyof 會提取interface中的key class KeyCls {name: stringage: number}type KeyClsExample1 = keyof KeyCls // n

目錄

• Typescript 高階類型
• 索引類型
• extends
• Readonly 只讀
• Omit 排除某些字段

Typescript 高階類型

索引類型

keyof 會提取interface中的key

class KeyCls {
name: string
age: number
}
type KeyClsExample1 = keyof KeyCls // name | age
function 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;
// }

extends

type TExtends<T, U> = T extends U ? number : never;
type TExtendExample = TExtends<number, number | string> // number
// 聯(lián)合類型, 表示如果T中的類型是U的子集, 那么返回never, 否則返回T, 這個過程可以理解為對T中的類型進行一次遍歷, 每個類型都執(zhí)行一次extends
type NonNullable1<T, U> = T extends U ? never : T
type NonExample = NonNullable1<null | string, null | undefined> // string

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

interface Todo {
title: string
desc: string
Done: boolean
}
type TodoPreview = Pick<Todo, 'Done'>
// type TodoPreview = {
//     Done: boolean;
// }
// 實現(xiàn)
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, 內(nèi)部取值是如果傳遞了K, 則屬性就在K中任意一個

Readonly 只讀

interface Todo {
title: string
desc: string
Done: boolean
}
const todo: Pick<Readonly<Todo>, 'title'> = {
title: '你好'
}
todo.title = '啊啊啊'; // 無法為“title”賦值，因為它是只讀屬性
// 實現(xiàn)
type myReadonly<T> = {
readonly [K in keyof T]: T[K]
}
// 分析: 通過keyof拿到所有的key屬性值組成聯(lián)合類型, 然后通過in遍歷類型,在屬性值前面加上readonly, 值value則是 T[K]
// 通過上面案例還可以實現(xiàn)可選類型
type myOptional<T> = {
[K in keyof T]?: T[K]
}

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

// 回顧extends
// // 聯(lián)合類型, 表示如果T中的類型是U的子集, 那么返回never, 否則返回T, 這個過程可以理解為對T中的類型進行一次遍歷, 每個類型都執(zhí)行一次extends
// type NonNullable1<T, U> = T extends U ? never : T
// type NonExample = NonNullable1<null | string, null | undefined> // string
// 自己實現(xiàn)Exclude
type 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 將傳入的屬性變?yōu)榭蛇x項

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

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

interface Todo {
title: string
desc: string
Done: 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中所有的屬性轉(zhuǎn)化為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 排除某些字段

// 已經(jīng)學習了Pick和Exclude, 則可以利用這兩個實現(xiàn)Omit
class KeyCls {
name: string;
age: number;
}
// 假設(shè) T 為 KeyCls, K為name, 結(jié)果是 
// type myOmit<KeyCls, 'name'>
// {  
//    age: number;  
// }
// 只需要實現(xiàn)成這樣就行了, 也就是獲取到age
type 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 為字面量/具體類型的聯(lián)合類型

// 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> // string
type TObj<T> = T extends { name: infer V, age: infer U } ? V : T
type TObjExample2 = TObj<{
name: number;
age: string;
}>; // number;

ReturnType<T> 獲取函數(shù)返回值的類型

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條件類型的詳細內(nèi)容，更多關(guān)于TypeScript條件類型的資料請關(guān)注技圈網(wǎng)其它相關(guān)文章！

【文章出處:濱海網(wǎng)頁開發(fā)公司 http://www.1234xp.com/binhai.html 歡迎留下您的寶貴建議】