TypeScript：变量声明

一、简介

let和const是JavaScript里相对较新的变量声明方式。 像我们之前提到过的， let在很多方面与var是相似的，但是可以帮助大家避免在JavaScript里常见一些问题。 const是对let的一个增强，它能阻止对一个变量再次赋值。

因为TypeScript是JavaScript的超集，所以它本身就支持let和const。 下面我们会详细说明这些新的声明方式以及为什么推荐使用它们来代替 var。

如果你之前使用JavaScript时没有特别在意，那么这节内容会唤起你的回忆。 如果你已经对 var声明的怪异之处了如指掌，那么你可以轻松地略过这节。

二、var 声明

一直以来我们都是通过var关键字定义JavaScript变量。

var a = 10;

大家都能理解，这里定义了一个名为a值为10的变量。

我们也可以在函数内部定义变量：

function f() {
   
   
    var message = "Hello, world!";

    return message;
}

并且我们也可以在其它函数内部访问相同的变量。

function f() {
   
   
    var a = 10;
    return function g() {
   
   
        var b = a + 1;
        return b;
    }
}

var g = f();
g(); // returns 11;
console.log("g = "+g());// g = 11

上面的例子里，g可以获取到f函数里定义的a变量。 每当 g被调用时，它都可以访问到f里的a变量。 即使当 g在f已经执行完后才被调用，它仍然可以访问及修改a。

function f2() {
   
   
    var a = 1;

    a = 2;
    var b = g2();
    a = 3;

    return b;

    function g2() {
   
   
        return a;
    }
}

f2(); // returns 2
console.log("f2 = "+f2());// f2 = 2

三、作用域规则

对于熟悉其它语言的人来说，var声明有些奇怪的作用域规则。 看下面的例子：

function f3(shouldInitialize: boolean) {
   
   
    if (shouldInitialize) {
   
   
        var x = 10;
    }

    // return x;
    return 1;
}

f3(true);  // returns '10'
f3(false); // returns 'undefined'
console.log("f3(true) = "+f3(true));// f3 = 2
console.log("f3(false) = "+f3(false));// f3 = 2
// 如果是JavaScript下面不会报下面的错误
// TSError: ⨯ Unable to compile TypeScript:
// src/02base.ts(39,12): error TS2454: Variable 'x' is used before being assigned.

有些读者可能要多看几遍这个例子。 变量 x是定义在if语句里面，但是我们却可以在语句的外面访问它。 这是因为 var声明可以在包含它的函数，模块，命名空间或全局作用域内部任何位置被访问（我们后面会详细介绍），包含它的代码块对此没有什么影响。 有些人称此为* var作用域或函数作用域*。 函数参数也使用函数作用域。

这些作用域规则可能会引发一些错误。 其中之一就是，多次声明同一个变量并不会报错：

function sumMatrix(matrix: number[][]) {
   
   
    var sum = 0;
    for (var i = 0; i < matrix.length; i++) {
   
   
        var currentRow = matrix[i];
        for (var i = 0; i < currentRow.length; i++) {
   
   
            sum += currentRow[i];
        }
    }

    return sum;
}

这里很容易看出一些问题，里层的for循环会覆盖变量i，因为所有i都引用相同的函数作用域内的变量。 有经验的开发者们很清楚，这些问题可能在代码审查时漏掉，引发无穷的麻烦。

四、捕获变量怪异之处

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

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

介绍一下，setTimeout会在若干毫秒的延时后执行一个函数（等待其它代码执行完毕）。

看一下结果：

i =  10
i =  10
i =  10
i =  10
i =  10
i =  10
i =  10
i =  10
i =  10
i =  10

很多JavaScript程序员对这种行为已经很熟悉了，但如果你很不解，你并不是一个人。 大多数人期望输出结果是这样：

0
1
2
3
4
5
6
7
8
9

传给setTimeout的每一个函数表达式实际上都引用了相同作用域里的同一个i。

让我们花点时间思考一下这是为什么。 setTimeout在若干毫秒后执行一个函数，并且是在for循环结束后。 for循环结束后，i的值为10。 所以当函数被调用的时候，它会打印出 10！

一个通常的解决方法是使用立即执行的函数表达式（IIFE）来捕获每次迭代时i的值：

for (var i = 0; i < 10; i++) {
   
   
    // capture the current state of 'i'
    // by invoking a function with its current value
    (function(i) {
   
   
        setTimeout(function() {
   
    console.log("i = ", i); }, 100 * i);
    })(i);
}

i =  0
i =  1
i =  2
i =  3
i =  4
i =  5
i =  6
i =  7
i =  8
i =  9

这种奇怪的形式我们已经司空见惯了。 参数 i会覆盖for循环里的i，但是因为我们起了同样的名字，所以我们不用怎么改for循环体里的代码。

五、let 声明

现在你已经知道了var存在一些问题，这恰好说明了为什么用let语句来声明变量。 除了名字不同外， let与var的写法一致。

let hello2 = "Hello2!";

主要的区别不在语法上，而是语义，我们接下来会深入研究。

六、块作用域

当用let声明一个变量，它使用的是词法作用域或块作用域。 不同于使用 var声明的变量那样可以在包含它们的函数外访问，块作用域变量在包含它们的块或for循环之外是不能访问的。

function f4(input: boolean) {
   
   
    let a = 100;

    if (input) {
   
   
        // Still okay to reference 'a'
        let b = a + 1;
        return b;
    }

    // Error: 'b' doesn't exist here
    // return b;
}
console.log("f4(true) = ", f4(true));// f4(true) =  101

这里我们定义了2个变量a和b。 a的作用域是f4函数体内，而b的作用域是if语句块里。

在catch语句里声明的变量也具有同样的作用域规则。

try {
   
   
    throw "oh no!";
}
catch (e) {
   
   
    console.log("Oh well.");
}

// Error: 'e' doesn't exist here
console.log(e);

拥有块级作用域的变量的另一个特点是，它们不能在被声明之前读或写。 虽然这些变量始终“存在”于它们的作用域里，但在直到声明它的代码之前的区域都属于 暂时性死区。 它只是用来说明我们不能在 let语句之前访问它们，幸运的是TypeScript可以告诉我们这些信息。

a++; // illegal to use 'a' before it's declared;
let a;

注意一点，我们仍然可以在一个拥有块作用域变量被声明前获取它。 只是我们不能在变量声明前去调用那个函数。 如果生成代码目标为ES2015，现代的运行时会抛出一个错误；然而，现今TypeScript是不会报错的。

function foo() {
   
   
    // okay to capture 'a'
    return a;
}

// 不能在'a'被声明前调用'foo'
// 运行时应该抛出错误
foo();

let a;

关于暂时性死区的更多信息，查看这里