TypeScript 变量声明介绍

发布时间：2023-03-30 08:45:20 所属栏目：教程来源：

导读：本节介绍 var let const 这三种变量的声明方式，重点讨论作用域与变量提升的相关知识点，这部分往往也是面试常考部分，需要多加注意。

说明：在使用 TypeScript 进行变量声明时，一般建议添加对应的变量类型，由

本节介绍 var let const 这三种变量的声明方式，重点讨论作用域与变量提升的相关知识点，这部分往往也是面试常考部分，需要多加注意。

说明：在使用 TypeScript 进行变量声明时，一般建议添加对应的变量类型，由于本节是整个系列教程的第一节，还未介绍 TypeScript 的类型系统，所以本节的例子仍采用 JavaScript 的变量声明方式。虽然在变量声明时没有添加变量类型，但是 TypeScript 会自动进行类型推导，得到正确的变量类型，这个在后续章节也会专门介绍。

TypeScript 是 JavaScript 的超集，同 JavaScript 一样，声明变量可以采用下面三个关键字：

var
let
const

通过 var 关键字来定义 JavaScript 变量，这个大家都能理解：

var num =

下面我们来讨论一个为什么尽量避免使用 var。

快速的猜一下下面的代码会返回什么：

for (var i = ; i < ; i++) {
setTimeout(function () {
console.log(i)
}, * i)
}

解释：这里的 i 是在全局作用域中的，只存在一个值。 setTimeout 这个异步函数在若干毫秒后执行，并且它是在 for 循环结束后的。在 for 循环结束后， i 的值为 10，所以当函数被调用的时候，它会打印出 10。

下面介绍几种可以实现我们预期输出结果的方法：

通过调用函数，创建函数作用域：
for (var i = ; i < ; i++) {
f(i)
}
function f (i) {
setTimeout(function () {
console.log(i)
}, )
}
立即执行函数，创建函数作用域：
for (var i = ; i < ; i++) {
(function (i) {
setTimeout(function () {
console.log(i)
}, * i)
})(i)
}
通过 let 关键字创建块级作用域：
for (let i = ; i < ; i++) {
setTimeout(function () {
console.log(i)
}, * i)
}

看下面的例子：

console.log(a) // undefined
var a =
它等价于：

var a
console.log(a) // undefined
a =
从上面的例子中可以看出，关键词 var 会进行变量提升。

如果把上面的 var 换成 let 呢？

console.log(a) // ReferenceError: a is not defined
let a =
会报错 a is not defined 未定义，这里也可以看出 var 与 let 在变量提升的不同：

var 会将变量的创建和初始化都进行提升
let 只会将创建提升，而初始化未被提升，称之为暂时性死区

现在你已经知道了 var 存在全局作用域和变量提升的问题，这恰好说明了为什么用 let 语句来声明变量。

let num =
下面介绍 let 的一些特点：

在 ES6 之前，ECMAScript 的作用域只有两种：

全局作用域
函数作用域
现在通过命令 let 和 const 新增了“块级作用域”，定义在代码块中的变量在代码块被执行结束后会被释放掉：

function block() {
if (true) {
let a =
console.log(a) // 10
}
console.log(a) // Cannot find name 'a'.ts(2304)
}
代码解释：

第 3 - 4 行，a 变量在 if{} 代码块中是有效的，正常输出 10。

第７行，在 if{} 代码块外就被释放掉了，所以会报错误。

包括在一对花括号中的一组语句称之为”代码块“，它可以替换掉上面介绍 var 时使用的立即执行函数：

// 立即执行函数
(function(){
var a =
}())
// 代码块
{
let a =
}

在使用 var 声明时，不论声明几次，最终只会得到一个：

var x
var x
var x
这是一个完全有效的代码，所有 x 的声明其实都指向了同一个引用，但这也是很多 bug 产生的原因。 let 的声明就严格了许多：

let x
let x // Cannot redeclare block-scoped variable 'x'
代码解释：第 2 行，重新声明了块作用域的变量 x 。

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!