「TypeScript」入門進階(一)✈️

這是我參與8月更文挑戰的第11天，活動詳情查看：8月更文挑戰

前言🎉

• 雖然以前有學過TypeScript可是平時業務上面都仍是用JavaScript來開發致使逐漸對TypeScript生疏了。
• 藉此更文活動的機會再來一塊兒學習一下TypeScript的知識吧。
• 在以前的文章中咱們TypeScript的基礎知識過了一遍，是否是發現其實也不會很難呢。
• 本文也是TypeScript進階篇的第一篇，關於基礎篇能夠看我以前分享的文章喔~。

類型別名🚤

• 基本語法是 [type 名稱 = 類型]
• 類型別名顧名思義就是給一個類型起了另外一個名稱，其餘地方若是須要用到該類型的時候均可以使用它的別名來代替。

type otherType=number;
let other:otherType;
other=5;
複製代碼

• 編譯成JavaScript後：

var other;
other = 5;
複製代碼

• 值得一提的是咱們給類型起了別名但並非新建了一種類型，因此咱們要遵循它的原始類型。

• 若是咱們將不符合類型的值傳給變量則會像上圖這樣報錯。
• 類型定義對象的時候會和接口很像,甚至能夠當成接口來使用。

type otherObj={
    name:string
};
interface sthObj{
    name:string
};
let obj1:otherObj={
    name:'掘金'
};
let obj2:sthObj={
    name:'小盧'
};
複製代碼

• 這樣寫是徹底沒有問題的，那何時咱們改用別名何時接口呢？由於咱們的type只是起了別名，因此當咱們要給類型拓展的時候就要使用接口了，由於type不能夠被繼承。類型別名經常使用於聯合類型。

字符串字面量類型⛴️

• 基本語法是 [type 名稱 = 字符串]
• 字符串字面量類型就是約束變量爲某幾個字符串其中的一個，若是出現了其餘的字符串則會報錯。

type sthingFruit= "apple" | "banana" | "mango";
let fruit:sthingFruit;
fruit="apple";
fruit="grapes"; //報錯
複製代碼

• 在上面的例子中咱們將sthingFruit約束爲只能接受 apple banana mango的一個類型，那麼其餘變量在使用這個類型的時候就只能選擇裏面容許的值，像上面給他一個grapes是不可取的。

元組🛳️

• 在以前基礎的學習中咱們知道，能夠用數組來合併相同類型的數據。

let fruit:string[]=['apple','banana',"mango"];
let fruit1:string[]=['apple','banana',25]; //報錯 
複製代碼

• 能夠看到若是給定義了string類型的數組添加number類型的數值，他就會報錯不能將類型「number」分配給類型「string」。
• 在JavaScript中的數組沒有這些限制，那有沒有一種狀況咱們TypeScript一個數組中也能夠既能夠有string類型又有number類型呢？這時候就須要咱們的元組出場了。
• 元組（Tuple）合併了不一樣類型的對象，咱們能夠這樣書寫。

let fruit:[string,number,string];
fruit=['apple',25,'banana'];
fruit=['apple',25]; //報錯
複製代碼

• 咱們能夠看到雖然元組能夠接受不一樣類型的數值，可是賦值的時候他的格式和數量要跟:定義的類型格式數量一致。

• 在元組中咱們能夠跟數組同樣單一的改變對應的值。

let fruit:[string,number,string];
fruit=['apple',18,'banana'];
fruit[0]='watermelon';
fruit[1]=20;
fruit[3]=21; //報錯 類型不對
複製代碼

• 咱們也能夠單獨拿出值來作操做可是也要嚴格按照類型的規範。
• 雖然在賦值的時候須要嚴格按照格式和數量，可是若是在後續push的時候是能夠添加約束的類型的值的。

let fruit:[string,number];
fruit=['apple',18];
fruit.push('banana');
fruit.push('grapes');
fruit.push('oranges');
複製代碼

• 值得注意的是咱們後續若是給元組push的數值必須是以前定義的類型，至關於把類型限制於以前定義的類型的聯合類型，正如上面的string number。

寫在最後👋

• 本文也算是記錄一下TypeScript的學習，接下來我會持續輸出TypeScript相關的知識，你們能夠一塊兒來學習。
• 若是您以爲這篇文章有幫助到您的的話不妨🍉關注+點贊+收藏+評論+轉發🍉支持一下喲~~😛

往期精彩🌅

「TypeScript」入門基礎(一)🎯

「TypeScript」入門基礎(二)🎯

「TypeScript」入門基礎(三)🎯

「TypeScript」入門基礎(四)🎯