typescript筆記--實用的內建型別

阿新 • • 發佈：2020-08-26

typescript 提供了很多實用內建的型別，大家安裝typescript 的時候，可以在node-module/typescript/lib/檔案下面有對js 所有的宣告檔案，包含es5,es6...到最新的esnext 版本，本篇主要是總結一下對typescript 實用內建型別的筆記，比如官方文件給出的這些：

Exclude<T, U>-- 從T中剔除可以賦值給U的型別。
Extract<T, U>-- 提取T中可以賦值給U的型別。
NonNullable<T>-- 從T中剔除null和undefined。
ReturnType<T>-- 獲取函式返回值型別。

InstanceType<T>-- 獲取建構函式型別的例項型別。

一、Required<T> ：將所有屬性型別轉為必選屬性型別

原始碼實現：把問號減去

1 type Required<T> = {
2     [k in keyof T]-? : T[k]
3 }

用法示例：本來IUser 的屬性型別都是可選的，現在變成必選了

 1 type IUser = {
 2     name?:string
 3     password?:string
 4     id?:number
 5 }
 6 
 7 let userRe:Required<IUser> = {
 
 8     name:"mk",
 9     password:"123456",
10     id:1
11 }

二、Partial<T>：將所有型別轉為可選型別

原始碼實現：把問號加上

1 type TPartial<T> = {
2     [k in keyof T]?:T[k]
3 }

用法示例

type IUser = {
    name:string
    password:string
    id:number
}
let user:Partial<IUser> = {} ;//屬性型別為可選，所以不寫也不會報錯

三、Readony：將所有屬性型別轉為只讀屬性選項型別

原始碼實現: 在屬性key 前面加readonly 關鍵詞

1 type Readonly<T> = {
2     readonly [P in keyof T]: T[P];
3 };

用法示例：

type IUser = {
    name:string
}

let userRd:Readonly<IUser> = { name:"12345" }
userRd.name = "mike" ;//報錯，無法賦值，只讀屬性，只能初始化賦值

四、Pick：從T中篩選出 K (大型別中挑選小型別)

原始碼實現：

1 type Pick<T, K extends keyof T> = {
2     [P in K] :T[P]
3 };

用法示例：

1 type Itype  = {"LEFT":string,'TOP':string,"RIGHT":string,"BOTTOM":string}
2 type resType = Pick<Itype,"LEFT"|"TOP">
3 //resType 結果是  ： { "LEFT":string:"TOP":string}
4 let res: resType = {
5    LEFT:"left",
6    TOP:"top"
7 }

五、Record：標記K中的屬性為T型別;key=>value

原始碼實現:

type Record<K extends keyof any, T> = {
    [P in K]: T;
};

用法示例:

1 type IType= Record<"get"|"post",{'url':string,'type':string}>
2 //結果：
3 {
4    "get":{'url':string,'type':string},
5    "post":{'url':string,'type':string}  
6 }

六、Exclude<T,U>：從`T`中剔除可以賦值給`U`的型別 (返回T 中除了U 的型別)

原始碼實現：用條件型別實現

type Exclude<T,U> = T  extends U?never:T

用法示例：

1 //示例一：
2 type resType1 = TExclude<"a"|"c"|"d","c"> ;// "a"|"d"
3 
4 //示例二：
5 type Itype =  {name:string}|{name:string,age:number}|"a"|"c"|"d"
6 type resType1 = TExclude<Itype ,{name:string}|"c"> ;
7 //結果: "a"|"d"

七、Extract<T,U>：提取`T`中可以賦值給`U`的型別（提取T與U的交集）

原始碼實現: 條件型別實現

type Extract<T,U> = T extends U ? T:never

用法示例：

type resTR = TExtract<"a"|"b"|"c","b"|"c">;//"b"|"c"

八、Omit<T,K>：從型別T中除去指定屬性型別K

原始碼實現: 利用pick + Exclude 結合實現

type Omit<T, K extends keyof any> = Pick<T, Exclude<keyof T, K>>

用法示例:

type resType= Omit<{id:number,name:string,age:number},"age"|"name">;// "{id:number}"

九、NonNullable<T>：從T中剔除null，underfined型別

原始碼實現：

type NonNullable<T> = T extends null |undefined?never: T

用法示例：

type resType = NonNullable<string|number|null|undefined> // string|number

十、inter關鍵詞

1、typescript2.8 新出的語法

2.在條件語句中作為待推斷的型別變數，推斷返回值型別

3. 可以將元組變成聯合型別

4.理解好這個用法，Parameters,ReturnType 等內建型別的實現都用到這個

用法示例：

 1 示例1：
 2 type Foo<T> = T extends { a: infer U; b: infer U } ? U : never;
 3 type T1 = Foo<{ a: string; b: string }>; // T1型別為 string
 4 type T2= Foo<{ a: string; b: number }>; // T1型別為 string | number
 5 
 6 
 7 示例2：元組變聯合型別
 8 type I3 = [string,number]
 9 type Tg<T> = T extends (infer R)[] ? R : never
10 type T4 = Tg<I3>;// T4型別為： string|number

十一、Parameters<T>：獲取函式引數型別

原始碼實現:

type Parameters<T extends (...args:any)=>any> = T extends (...args: infer P) => any ? P:never

用法示例:

1  interface Ifn {
2     (name:string,age:number):void
3  }
4 type getParamsType = TParameters<typeof fn> //返回的是元組：[string,number]

十二、ReturnType：獲取函式返回值型別

原始碼實現

type ReturnType<T extends (...args:any)=>any> = T extends (...args:any)=>infer P?P:never

用法示例：

1 function fn(name:string):string|number{
2     return name
3 }
4 type resType= ReturnType<typeof fn>;//string|number

十三、ConstructorParamters：獲取建構函式的引數型別

原始碼實現：

type ConstructorParamters<T extends new (...args:any)=>any> = T extends new (...args:infer P)=>any ?P:never

用法示例：

1 // 示例
2 class Y{
3     constructor(name:string,age:number){}
4 }
5 type resType = ConstructorParamters<typeof Y> //[string,number]

十四、InstanceType：獲取建構函式型別的例項型別(獲取一個類的返回型別)

原始碼實現：

 type InstanceType<T extends new (...args: any) => any> = T extends new (...args: any) => infer R ? R : any;

用法示例：

 1 class Y{
 2     ID:number|undefined
 3     GET(){}
 4     constructor(name:string,age:number){}
 5 }
 6 type resType= InstanceType<typeof Y>
 7 let obj:resType= {
 8     ID:1,
 9     GET(){}
10 }