一文看懂所有TypeScript类型

#例行BB

目前TypeScript已经开始应用起来了,已经不再是“纸上谈兵”或者“金屋藏娇”阶段了,不背人了。

所以对于TypeScript的学习也已经迫在眉睫,我仅本着学习总结的心态尝试分享个人理解,另外这也是我的第一篇博客园博客,不足之处希望各位看官及前辈多多提点

 

  • string (字符串类型)
    let typeString: string
  • number (数字类型)
    let typeNumber: number

    //不仅可以给形参设置类型,还可以给返回值设定类型
    let sum (numA: number, numB: number) :number{ 
      return numA + numB
    }
  • boolean (布尔值类型)
    let typeBoolean: boolean
    //虽然有该类型,但是TS也非常智能,在赋值时如未指定类型,则会自动识别类型。鉴于boolean只有两个值,个人建议省略

    let typeFlag1 = true
    let typeFlag2 = false //均自动识别变量为boolean类型
  • 字面量类型
    // 字面量类型,emmmm很好理解,直接看代码
    
    let typeLiteral: 10
    
    typeLiteral = 11  //报错
    
    //字面量类型有点像常量,只能赋值一次,单独使用场景有限,一般配合联合类型使用
  • 联合类型
    //联合类型的符号是  |
    let typeUnion: string | number
    
    //此时不论typeUnion赋值为字符串还是数字都没问题
    
    //结合字面量类型,直接给出例子
    
    let gender: 'male' | 'female'
    
    gender = 'male'
    
    //对于性别来说,正常情况下只有两种值,或者最多也不会超过5种值,那么就可以使用联合类型配合字面量类型来进行枚举声明
  • any (任意类型)
    let typeAny: any
    
    //any类型,相当于对该变量关闭了TS的类型检测,不建议使用
    
    typeAny = 1
    typeAny = 'string'
    typeAny = true
    
    //当变量类型为any时,无论赋值什么类型的值都可以

     let any;

     //当不指定类型时,变量会自动赋值为any,需要注意

     
  • unkonw类型
    //说白了就是安全版的any
    //由于any可以在赋值过程中随意更改变量的类型,所以any是危险的
    
    let typeUnknow: unknow;
    
    typeUnknow = 1
    typeUnknow = 'string'
    
    //unkonw相当于暂时不知道此变量应该是什么类型
    
    //unknow 和 any的区别:
    //any类型的数据在作为值赋值给其他变量的时候也会对其他变量有所影响,但unknow作为参数赋值给其他变量时必须是同类型。
    
    //简单说,any会影响和它有关系的所有变量,但unkonw只影响自己本身。
    
    let anyOne: any
    let unknowOne: unknow
    let temp: string
    
    anyOne = 1
    unkonwOne = true
    temp = 'Hi'
    
    temp = anyOne //不报错,且temp变成number类型
    temp = unknowOne // 报错
  • void类型
    //当函数无返回值时,返回值类型为void
    
    function fn(info): void {} //此时void不写也默认是void
    
    function fn(info): void { return null }
    function fn(info): void { return undefined } //这两种情况也没问题,但是只有大聪明才这么写
  • never类型
    //此时你就明白了为什么上面的void要写null和undefined了。
    
    // 下面进入哲学环节:
    
    //never类型表示的是一个函数无返回值时的类型,那么一个函数即使没有写return,其实也是默认有的,只不过返回的是空,或者像上面的情况,返回的是null和undefined,那么返回的是空其实也是一种返回值的情况。
    
    //而never!是压根就连空的返回值都没有的情况
    
    //那这个nuver有什么狗屁用呢?↓
    
    function typeNever(): never {  
        throw new Error("报错了!")
    }
    
    //只要调用就提示报错...只有这种情况了
  • object (对象类型)
    let typeObject: object
    
    //emmm,没啥好说的
    
    typeObject = {}

     

    •   对象中的属性
      let objOne: { name: string, age: number }
      
      //指定对象中包含的属性及属性类型。
      
      //在TS中,函数实例化时,内部的参数不能多也不能少
      
      objOne: { name:'基米希' } //报错,缺少age
      objOne: { name:'基米希',age:25, playerNum:8 } //报错,多了playerNum
      
      //那么如果说有一个参数可有可无怎么办呢?这么写
      
      let objTwo: { name: string, age?: number }
      
      //形参后加一个?此时age参数可以有也可以没有
      
      //那么如果有一个参数是必须有的话应该怎么写呢?这么写
      
      let objThree: { name: string, [propName: string]: any } 
      
      //此时,name是必须的,至于其他的参数,想写什么想写做少随意随意
      
      objThree = { name: '基米希', age: 25, gender: 'mael' } //没毛病

       

  • 数组篇
    let typeArray: string[];
    
    //表示数组typeArray中存放的都是string类型的值
    
    let typeArray: Array<string>  //另一种声明方式

        

    • 元组

      //元组,即固定长度的数组,效率更高。元组内的元素不能多也不能少
      let typeTuple: [ string, number ] typeTuple = [ 'one', 2 ]  

 

  • 枚举 (enum)
    //当一个参数的值只有少数的几种可能时,可以使用枚举。比如性别
    
    enum Gender {
        Male = 0,
        Female = 1  
    }
    
    let people: { name: string, gender: Gender };
    
    people = {
       name: '基米希',
       gender: Gender.Male   //实际上Gender.male就等于 0 ,语义化更好且存储比string更小
    }

     

上一篇:前端使用axios中post访问.net core3.0后台数据的时候不可以传对象,不可以带请求头?出现400、405、415(已解决)


下一篇:angular 自定义组件和form的formControlName 连用