好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

typescript笔记--实用的内置类型

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  }

 

查看更多关于typescript笔记--实用的内置类型的详细内容...

  阅读:52次