TypeScript 变量

2024 年 8 月 29 日 | 阅读 6 分钟

变量是存储位置,用于存储程序引用和使用的值/信息。它充当代码中值的容器,必须在使用前声明。我们可以使用 var 关键字声明变量。在 TypeScript 中,变量遵循与 JavaScript 变量声明相同的命名规则。这些规则是:

  • 变量名必须是字母数字
  • 变量名不能以数字开头。
  • 变量名不能包含空格特殊字符,除了下划线(_)美元($)符号。

ES6 中,我们可以使用 letconst 关键字定义变量。这些变量具有类似的变量声明和初始化语法,但在作用域和用法上有所不同。在 TypeScript 中,始终建议使用 let 关键字定义变量,因为它提供了类型安全

在某些方面,let 关键字类似于 var 关键字,而 const 是一个 let,它阻止对变量重新赋值。

变量声明

我们可以通过四种方式之一声明变量

1. 在单个语句中声明类型和值

2. 声明类型而不声明值。然后变量将被设置为 undefined。

3. 声明它的值而不声明类型。然后变量将被设置为 any。

4. 声明既不声明值也不声明类型。然后变量将被设置为 any 并使用 undefined 初始化。

让我们逐一了解所有三个变量关键字。

var 关键字

通常,var 关键字用于在 JavaScript 中声明变量。

我们也可以在函数内部声明变量

我们还可以使用另一个函数访问一个函数的变量

作用域规则

对于其他语言的程序员来说,他们在 JavaScript 中对 var 声明获得了一些奇怪的作用域规则。使用 var 关键字在 TypeScript 中声明的变量具有函数作用域。此变量在声明它的函数中具有全局作用域。它也可以被共享相同作用域的任何函数访问。

示例

注意:由于 var 声明可以在包含它们的模块、函数、全局作用域或命名空间中的任何位置访问,因此有些人称之为 var 作用域或函数作用域。参数也称为函数作用域。


let 声明

let 关键字类似于 var 关键字。 var 声明在解决程序方面存在一些问题,因此 ES6 引入了 let 关键字来在 TypeSript 和 JavaScript 中声明变量。与 var 关键字相比,let 关键字在作用域方面有一些限制。

let 关键字可以增强我们的代码可读性并降低编程错误的几率。

let 语句的编写语法与 var 语句相同

var 和 let 之间的主要区别不在于语法,而在于语义。使用 let 关键字声明的变量的作用域限定为最近的封闭块,该块可以小于函数块。

块作用域

当使用 let 关键字声明变量时,它使用块作用域或词法作用域。与使用 var 关键字声明的变量(其作用域泄漏到其包含函数)不同,块作用域变量在其包含块之外不可见。

在这里,我们有两个局部变量 x 和 y。 x 的作用域仅限于函数 f() 的主体,而 y 的作用域仅限于包含 if 语句的块。

注意 - 在 try-catch 子句中声明的变量也具有类似的作用域规则。例如

重新声明和隐藏

对于 var 声明,我们声明变量的次数无关紧要。我们只有一个。在下面的示例中,所有 x 的声明都引用同一个 x,这是完全有效的。但是有一些错误可以通过 let 声明找到。

不使用 let 关键字的例子

使用 let 关键字的例子

隐藏是在更嵌套的作用域中引入新名称的行为。它声明一个已经在外部作用域中声明过的标识符。这不是不正确的,但可能会引起混淆。它将使外部标识符在循环变量隐藏它的循环内不可用。它可能会因意外隐藏而导致自身的错误,并且还有助于防止应用程序出现某些错误。

示例

上面的例子有一个全局变量名,它与内部方法同名。内部变量仅在该函数中使用,所有其他函数将使用全局变量声明。

在编写更清晰的代码时,通常会避免隐藏。虽然在某些情况下,如果可以利用它,我们应该以最佳的判断来使用它。

变量提升

var 的提升

提升是 JavaScript 的一种机制。在提升中,变量和函数声明在代码执行之前被移动到它们封闭作用域的顶部。我们可以通过以下示例来理解它。

注意:如果我们初始化变量,则不会发生提升。

示例

输出

undefined
4

let 的提升

使用 let 关键字声明的变量不会被提升。如果我们尝试在声明之前使用 let 变量,那么它将导致 ReferenceError

示例

const 声明

const 声明用于声明永久值,以后不能更改。它有一个固定值。 const 声明遵循与 let 声明相同的范围规则,但我们不能将任何新值重新分配给它。

注意:根据命名标准,const 变量必须以大写字母声明。应遵循命名标准以长期维护代码。

示例

输出

Value is: 10

当我们尝试重新分配 const 变量时会发生什么?

如果我们尝试在代码中重新分配现有的 const 变量,代码将抛出一个错误。因此,我们不能将任何新值重新分配给现有的 const 变量。

示例

输出

SyntaxError: Identifier 'VAR' has already been declared.