zoukankan      html  css  js  c++  java
  • 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中剔除nullundefined
    • 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 }
  • 相关阅读:
    element ui el-date-picker 判断所选时间是否交叉
    MDN中的箭头函数!!!
    es6 解构
    element ui 实现可编辑表格
    节流 防抖。。。。深入理解
    element ui 表格对齐方式,表头对齐方式
    纯html + css 导航栏
    PHP 1
    apache 建立虚拟主机
    Can't connect to local MySQL server through socket '/tmp/mysql.sock'
  • 原文地址:https://www.cnblogs.com/beyonds/p/13558127.html
Copyright © 2011-2022 走看看