天天看點

#yyds幹貨盤點# 系統學習 TypeScript(四)——變量聲明的初步學習

#yyds幹貨盤點# 系統學習 TypeScript(四)——變量聲明的初步學習

前言

認識了 TypeScript 中的基礎類型,接下來當然是變量聲明的相關學習了。

聲明多元數組

假如有這麼一個聲明:

let arr3: number[][][];
           

想要知道 arr3 的具體類型,其分析步驟如下:

#yyds幹貨盤點# 系統學習 TypeScript(四)——變量聲明的初步學習

可以看到,類型拆解是從右向左的,對應到具體變量值上就是從外向内一層層拆解的。

這裡隻是舉個例子,稍微有點經驗的人一眼就能判斷出 arr3 是一個三維數組。但是,授人以魚不如授人以漁,這個分析方法卻适用于絕大多數複雜資料類型分析。

屬性重命名

在有了 ES6 的解構指派之後,我們可以這麼聲明變量:

let personInfo1 = {
    name: "程式設計三昧",
    age:22
}
let {name: nameP, age: ageP} = personalInfo1;
           

以上代碼聲明了 nameP 和 ageP 兩個變量。需要注意的是:變量聲明中,冒号後面跟的不是資料類型,而是新聲明來替代原對象屬性值的變量。

如果在 TypeScript 中,要指定 nameP 和 ageP 的資料類型,需要這麼寫:

let { name: nameP, age: ageP }: { name: string; age: number } = personInfo1;
           

其實這個類型指定可以放在對象聲明中,指定對象每一項屬性值的類型:

let personInfo1: { name: string; age: number } = {
    name: "程式設計三昧",
    age: 22
};

personInfo1.name = 12; // Error 不能将類型“number”配置設定給類型“string”

// let {name: nameP, age: ageP} = personInfo1;
let { name: nameP, age: ageP } = personInfo1;

nameP = 12; // Error 不能将類型“number”配置設定給類型“string”
           

let 和 const 的暫時性死區

以下代碼在 TypeScript 中不會報錯,但是在實際運作中會報錯。

function foo(): number {
    return a1;
}
foo();

let a1: number = 12;
           

實際運作報錯:

#yyds幹貨盤點# 系統學習 TypeScript(四)——變量聲明的初步學習

我自己的了解是:靜态編譯時隻負責檢測資料類型是否正确,而動态運作時才會檢測文法邏輯錯誤,恰好暫時性死區是在運作時才産生的。

總結

以上就是我在學習 TypeScript 變量聲明時所記錄的注意事項和總結。

~

~ 本文完,感謝閱讀!

繼續閱讀