系統學習 TypeScript（四）——變數宣告的初步學習

前言

認識了 TypeScript 中的基礎型別，接下來當然是變數宣告的相關學習了。

宣告多維陣列

假如有這麼一個宣告：

let arr3: number[][][];

想要知道 arr3 的具體型別，其分析步驟如下：

可以看到，型別拆解是從右向左的，對應到具體變數值上就是從外向內一層層拆解的。

這裡只是舉個例子，稍微有點經驗的人一眼就能判斷出 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;

實際執行報錯：

我自己的理解是：靜態編譯時只負責檢測資料型別是否正確，而動態執行時才會檢測語法邏輯錯誤，恰好暫時性死區是在執行時才產生的。

總結

以上就是我在學習 TypeScript 變數宣告時所記錄的注意事項和總結。

~

~ 本文完，感謝閱讀！

~

學習有趣的知識，結識有趣的朋友，塑造有趣的靈魂！

大家好，我是〖程式設計三昧〗的作者 隱逸王，我的公眾號是『程式設計三昧』，歡迎關注，希望大家多多指教！

本作品採用《CC 協議》，轉載必須註明作者和本文連結