美文网首页让前端飞Web前端之路程序员
typeScript的数据类型(附代码解析)

typeScript的数据类型(附代码解析)

作者: 废柴码农 | 来源:发表于2019-10-09 16:38 被阅读0次

    注:本篇适合初学TS的宝宝们,众所周知,TS的写法对于数据类型要求比较严格,同时可维护性比较好,所以很多大厂提倡用TS书写代码,那么,初学代码的时候几乎都是从数据类型方面入手,长话短说,下面是一张ES6中常用的数据类型和typeScript数据类型的比对,通过对比可以发现后者要比前者多几种类型,那么本篇将主要以代码的方式去演绎类型

    image.png

    下面将会列举一下TS常用数据类型的不同写法

    TS基本类型
    //原始类型
    let bool: boolean = true
    let num: number = 123
    let str: string = 'abc'
    
    //数组
    let arr1: number[] = [1,2,3]
    let arr2: Array<number | string> = [1,2,3,'4']
    
    //元组   特殊的数组
    let tuple: [number,string] = [0,'1']
    
    //函数
    let add = (x:number,y:number)  => x+y
    let compute: (x:number,y:number) =>number
    compute = (a,b) => a+b
    
    //对象
    // let obj: object = {x:1,y:2} 如果写成这种代码obj.x找不到这个值
    let obj: {x:number,y:number} = {x:1,y:2} 
    obj.x = 3
    
    //symbol  具有唯一的值
    let s1: symbol = Symbol()
    let s2 = Symbol()
    console.log(s1 === s2) //false
    
    //undefined ,null 
    let un: undefined = undefined  //如果声明了undefined不能赋值为其他数据类型 ,但是可以赋值给undefined类型
    let nu: null = null
    
    //void 操作符 任何表达式返回undefined   viod 0
    let noReturn = ()=> {}
    
    //any  相当于js的写法
    let x
    x=123
    x=[]
    x=()=>{}
    
    //never  永远不会有返回值的类型
    //1.抛出异常
    let error = ()=> {
     throw new Error("error")
    }
    //2.创建死循环函数
    let endless = ()=>{
      while(true) {}
    }
    
    TS的高级类型
    枚举类型:enum (一组有名字的常量集合)
    //数字枚举  只读,但是不可以修改
    enum Role {
      Reporter = 1,
      Developer,
      Maintainer,
      Owner,
      Guest
    }
    //如果没有默认值,那么索引值从0开始,否则从默认值往下递增
    // console.log(Role)
    
    //字符串枚举
    enum Message {
      Success = '恭喜你,成功了',
      Fail = '抱歉,失败了'
    }
    
    //异构枚举  数字和字符串混用
    enum Answer {
      N,
      Y = 'yes'
    }
    
    
    接口: interface
    interface Lib {
      (): void;
      version: string;
      doSomething(): void;
    }
    
    function getLib(){
      let lib: Lib =(() =>{}) as Lib  ;//类型断言
      lib.version ='1.0';
      lib.doSomething =()=> {}
    }
    
    let lib1 = getLib;
    lib1();
    
    interface StringArray {
      [index: number]: string
    }
    
    let chars: StringArray = ['A','B']
    
    函数:function
    //下面几种写法表达上是一致的
    function add1(x: number, y: number){
      return x+y
    }
    
    let add2: (x: number, y: number) => number
    type add3 =  (x: number, y: number) => number
    
    interface add4 {
      (x: number, y: number): number
    }
    //可选参数: 加上问号  必须放在必选参数之后
    function add5(x: number, y?: number){
      return y? x=y: x
    }
    add5(1)
    //有初始值的函数
    function add6(x: number, y=0,z:number,q=1){
      return x+y+z+q
    }
    add6(1,undefined,3)
    
    function add7(x:number,...rest:number[]){
      return x+rest.reduce((pre,cur)=>pre+cur)
    }
    console.log(add7(1,2,3,4,5))
    
    //函数重载 常用来实现功能类似而所处理的数据类型不同的问题
    function add8(...rest: number[]): number;
    function add8(...rest: string[]): string;
    function add8(...rest: any[]): any{
      let first = rest[0]
      if(typeof first === 'string'){
        return rest.join('')
      }
      if(typeof first === 'number'){
        return rest.reduce((pre,cur)=>pre+cur)
      }
    }
    console.log(add8(1,2,3))
    console.log(add8('a','b','c','d'))
    

    相关文章

      网友评论

        本文标题:typeScript的数据类型(附代码解析)

        本文链接:https://www.haomeiwen.com/subject/ayzvpctx.html