TypeScript - let & const

TypeScript宣告變數的規則與JavaScript相同。最初，只使用'var'關鍵字宣告變數，但在JavaScript的ES6版本中引入了'let'和'const'關鍵字來宣告變數。因此，你也可以在TypeScript中使用它們。

在本課中，你將學習如何使用'let'和'const'關鍵字宣告變數，以及這些變數與使用'var'關鍵字宣告的變數有何不同。

使用let關鍵字宣告變數

當我們在TypeScript中使用'let'關鍵字宣告變數時，作用域規則和提升規則與JavaScript中的相同。

語法

在TypeScript中使用'let'關鍵字宣告變數的語法如下：

let var_name: var_type = value;

在上例語法中，'let'是一個關鍵字。
'var_name'是變數名的有效識別符號。
'var_type'是變數的型別。
'value'是要儲存在變數中的值。

示例

在下面的程式碼中，我們定義了字串型別的'car_name'變數，它包含“Brezza”值。'car_price'變數包含數字值1000000。

// Define a variable in TypeScript
let car_name: string = "Brezza";
let car_price: number = 1000000;
console.log(car_name);
console.log(car_price);

編譯後，它將生成以下JavaScript程式碼。

// Define a variable in TypeScript
let car_name = "Brezza";
let car_price = 1000000;
console.log(car_name);
console.log(car_price);

輸出

上述示例程式碼的輸出如下：

Brezza
1000000

變數作用域

使用'let'關鍵字宣告的變數具有塊級作用域。這意味著你無法像使用'var'關鍵字宣告的變數那樣訪問塊外的變數。

讓我們透過下面的例子來學習。

在下面的程式碼中，'bool'變數包含true值，因此'if'語句的程式碼將始終執行。在'if'塊中，我們聲明瞭'result'變數，只能在'if'塊內訪問它。如果你嘗試在'if'塊外訪問它，TypeScript編譯器將丟擲錯誤。

let bool: boolean = true;
if (bool) {
    let result: number = 10;
    console.log(result); // It can have accessed only in this block
}
// console.log(result); Can't access variable outside of the block.

let變數不能重新宣告

你不能重新宣告使用'let'關鍵字宣告的變數。

讓我們看看下面的例子。

在下面的程式碼中，你可以看到，如果我們嘗試重新宣告相同的變數，TypeScript編譯器將丟擲錯誤。

let animal: string = "cat";
// let animal: string = "dog"; 
// Error: Cannot redeclare block-scoped variable 'animal'
console.log(animal); // Output: cat

編譯後，它將生成以下JavaScript程式碼。

let animal = "cat";
// let animal: string = "dog"; 
// Error: Cannot redeclare block-scoped variable 'animal'
console.log(animal); // Output: cat

上述示例程式碼的輸出如下：

cat

不同塊中具有相同名稱的變數

使用'let'關鍵字宣告的變數具有塊級作用域。因此，如果具有相同名稱的變數位於不同的塊中，則它們被視為不同的變數。

讓我們看看下面的例子。

在下面的程式碼中，我們在'if'和'else'兩個塊中聲明瞭'num'變數，並用不同的值初始化它們。

let bool: boolean = false;
// If the boolean is true, the variable num will be 1, otherwise it will be 2
if (bool) {
    let num: number = 1;
    console.log(num);
} else {
    let num: number = 2;
    console.log(num);
}

編譯後，它將生成以下JavaScript程式碼。

let bool = false;
// If the boolean is true, the variable num will be 1, otherwise it will be 2
if (bool) {
    let num = 1;
    console.log(num);
}
else {
    let num = 2;
    console.log(num);
}

上述示例程式碼的輸出如下：

使用'const'關鍵字宣告變數

'const'關鍵字與'var'和'let'具有相同的語法來宣告變數。它用於宣告常量變數。此外，你需要在定義'const'變數時初始化它們，並且以後不能更改它們。

語法

在TypeScript中使用'const'關鍵字宣告變數的語法如下：

const var_name: var_type = value;

在上例語法中，'const'是一個關鍵字。

示例

在下面的程式碼中，我們使用'const'關鍵字定義了'lang'和'PI'變數，它們分別包含'TypeScript'和'3.14'值。

// Define a constant variable in TypeScript
const lang: string = 'TypeScript';
const PI: number = 3.14;
console.log(`Language: ${lang}`);
console.log(`Value of PI: ${PI}`);

編譯後，它將生成以下JavaScript程式碼。

// Define a constant variable in TypeScript
const lang = 'TypeScript';
const PI = 3.14;
console.log(`Language: ${lang}`);
console.log(`Value of PI: ${PI}`);

上述示例程式碼的輸出如下：

Language: TypeScript
Value of PI: 3.14

使用'const'關鍵字宣告的變數在作用域和重新宣告方面與使用'let'關鍵字宣告的變數具有相同的規則。

在下面的程式碼中，你可以看到，如果你嘗試在相同的作用域中重新宣告'const'變數，或者嘗試在聲明後更改它的值，它都會丟擲錯誤。

if (true) {
    const PI: number = 3.14;
    console.log(PI);
    // const PI: number = 3.14; Error: Cannot redeclare block-scoped variable 'PI'.
    // PI = 3.15; Error: Cannot assign to 'PI' because it is a constant.
}

編譯後，它將生成以下JavaScript程式碼。

if (true) {
    const PI = 3.14;
    console.log(PI);
    // const PI: number = 3.14; Error: Cannot redeclare block-scoped variable 'PI'.
    // PI = 3.15; Error: Cannot assign to 'PI' because it is a constant.
}

上述示例程式碼的輸出如下：

3.14

你學習瞭如何使用'let'和'const'語句宣告變數。由於其塊級作用域特性，避免了在不同作用域中宣告的變數的值被覆蓋，因此始終建議使用'let'關鍵字宣告變數。

列印頁面