1. 程式人生 > 其它 >一文看懂所有TypeScript型別

一文看懂所有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更小
    }