TS从入门到精通(十)TS进阶

72 阅读2分钟

开启掘金成长之旅!这是我参与「掘金日新计划 · 12 月更文挑战」的第7天,点击查看活动详情 Ts内置了一些常用工具类型,来简化一些常用操作

Partial

  • Partial //创建一个类型将Type所有类型设置为可选
    interface prop{
       name:string,
       age:number
    }
    type Dprop= Partial<prop>
    //创建一个新类型  根据prop创建结构相同  属性可选
    /**
     * type Dprop = {  
            name?: string | undefined;  
            age?: number | undefined;  
       }
    */

Readonly

  • Readonly创建一个类型将所有属性设置为只读
   interface prop{
      name:string,
      age:number
   }
   type Dprop= Readonly<prop>
   //创建一个新类型  根据prop创建结构相同  属性可选
   /**
    *  type Dprop = {  
           readonly name: string;  
           readonly age: number;  
       }
   */

Pick<T,keys>

  • 从T中选中属性构建一个新类型
  interface prop{
     name:string,
     age:number,
     sex:boolean
  }
  type Dprop= Pick<prop,"name"|"age">
  //创建一个新类型  根据prop创建结构相同  属性可选
  /**
   *  type Dprop = {  
         name:string,
         age:number
      }
  */

Record<keys,T>

  • 构造一个对象类型属性键为keys,类型为T
     interface prop{
        name:string,
        age:number,
        sex:boolean
     }
     type Dprop= Record<"name"|"age",string[]>
     //创建一个新类型  根据prop创建结构相同  属性可选
     /**
      *  type Dprop = {  
            name:[],
            age:[]
         }
     */
    

keyof 获取所有键的联合类型

in 可以是联合类型中的任意一项

类型声明文件

当我们使用第三方库的时候,如果项目使用了ts会对第三方库进行检查。要求第三方库必须要有类型声明文件例如 express 里面是不带声明文件的。这个时候就会报错。需要单独下载类型声明文件 DefinitelyTyped 是一个下载声明文件的仓库。但是有的库是没有声明文件这时候就需要自己来写。

使用第三方声明文件

  • 声明文件下载格式 npm install @types/包名 -D

declear

  • 为已经存在的变量声明类型而不是创建一个新的变量
    declare var 声明全局变量
    declare function 声明全局方法
    declare class 声明全局类
    declare enum 声明全局枚举类型
    declare namespace 声明(含有子属性的)全局对象
    interface 和 type 声明全局类型
    /// <reference /> 三斜线指令

总结:

一般来说在开发中我们在基本上是很少会自己去为第三方库去写类型声明文件的。已经有一万多个写好的第三方类型声名文件库。基本上是涵盖了我们开发所需的大部分库。当然如果你想发布一个自己的第三方库的话,这方面的技能也是也需要掌握的。TS的大部分知识点到这里基本上就告一段落了。接下来的知识还有装饰器模式等如果有兴趣的话也可以自己去官网看一下。或者等过段时间我也会再次补充一下。下一篇会带大家使用ts写一个Vue里的发布订阅模式来个小案例巩固一下。