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'是要存储在变量中的值。

示例

在下面的代码中，我们定义了一个包含"Brezza"值的字符串类型变量'car_name'。'car_price'变量包含1000000的数值。

// 在TypeScript中定义变量
let car_name: string = "Brezza";
let car_price: number = 1000000;
console.log(car_name);
console.log(car_price);

编译后，它将生成以下JavaScript代码。

// 在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); // 只能在此块中访问
}
// console.log(result); 无法在块外访问变量。

let变量不能被重新声明

您不能重新声明使用'let'关键字声明的变量。

让我们看看下面的示例。

在下面的代码中，您可以观察到如果我们尝试重新声明同一个变量，TypeScript编译器会抛出错误。

let animal: string = "cat";
// let animal: string = "dog"; 
// 错误: 无法重新声明块级作用域变量'animal'
console.log(animal); // 输出: cat

编译后，它将生成以下JavaScript代码。

let animal = "cat";
// let animal: string = "dog"; 
// 错误: 无法重新声明块级作用域变量'animal'
console.log(animal); // 输出: cat

上述示例代码的输出如下：

cat

不同块中的同名变量

使用'let'关键字声明的变量具有块级作用域。因此，如果它们位于不同的块中，即使名称相同，也被视为不同的变量。

让我们看看下面的示例。

在下面的代码中，我们在if和else两个块中都声明了'num'变量，并用不同的值初始化它们。

let bool: boolean = false;
// 如果布尔值为true，变量num将为1，否则为2
if (bool) {
    let num: number = 1;
    console.log(num);
} else {
    let num: number = 2;
    console.log(num);
}

编译后，它将生成以下JavaScript代码。

let bool = false;
// 如果布尔值为true，变量num将为1，否则为2
if (bool) {
    let num = 1;
    console.log(num);
}
else {
    let num = 2;
    console.log(num);
}

上述示例代码的输出如下：

2

使用'const'关键字声明变量

'const'关键字与'var'和'let'具有相同的语法来声明变量。它用于声明常量变量。此外，您需要在定义'const'变量时初始化它们，并且之后不能更改它们。

语法

在TypeScript中使用'const'关键字声明变量的语法如下：

const var_name: var_type = value;

在上面的语法中，'const'是一个关键字。

示例

在下面的代码中，我们使用'const'关键字定义了'lang'和'PI'变量，它们分别包含'TypeScript'和'3.14'的值。

// 在TypeScript中定义常量变量
const lang: string = 'TypeScript';
const PI: number = 3.14;
console.log(`Language: ${lang}`);
console.log(`Value of PI: ${PI}`);

编译后，它将生成以下JavaScript代码。

// 在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; 错误: 无法重新声明块级作用域变量'PI'。
    // PI = 3.15; 错误: 无法分配给'PI'，因为它是一个常量。
}

编译后，它将生成以下JavaScript代码。

if (true) {
    const PI = 3.14;
    console.log(PI);
    // const PI: number = 3.14; 错误: 无法重新声明块级作用域变量'PI'。
    // PI = 3.15; 错误: 无法分配给'PI'，因为它是一个常量。
}

上述示例代码的输出如下：

3.14 

您已经学习了如何使用'let'和'const'语句声明变量。由于'let'关键字具有块级作用域特性，总是使用'let'关键字声明变量是个好主意，这样可以避免覆盖在不同作用域中声明的变量的值。