使用VS Code开发TypeScript--定义变量推荐使用let

使用VS Code开发TypeScript--定义变量推荐使用let

目录

• 做用域规则

• JavaScript的严格模式

• let与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;

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

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

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

    return x;
}

f(true);  // returns '10'
f(false); // returns 'undefined'

有些读者可能要多看几遍这个例子。 变量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都引用相同的函数做用域内的变量。 有经验的开发者们很清楚，这些问题可能在代码审查时漏掉，引起无穷的麻烦。

JavaScript的严格模式

除了正常运行模式，ECMAscript 5添加了第二种运行模式："严格模式"（strict mode）。顾名思义，这种模式使得Javascript在更严格的条件下运行。
"严格模式"体现了Javascript更合理、更安全、更严谨的发展方向，包括IE 10在内的主流浏览器，都已经支持它，许多大项目已经开始全面拥抱它。
另外一方面，一样的代码，在"严格模式"中，可能会有不同的运行结果；一些在"正常模式"下能够运行的语句，在"严格模式"下将不能运行。掌握这些内容，有助于更细致深刻地理解Javascript，让你变成一个更好的程序员。
进入"严格模式"的标志，是下面这行语句：
　　"use strict";
老版本的浏览器会把它看成一行普通字符串，加以忽略。

在TypeScript中，let、const语句须要严格模式，所以，在TypeScript(ts)文件的第一行应该是：

"use strict";

或者把文件tsconfig.json的"target"改成：

"target": "es5"

这样才能保证使用let语句正确。否者，出现："Block-scoped declarations (let, const, function, class) not yet supported outside strict mode" 错误。

let与var的区别

在TypeScript中，定义变量要用关键字var或者let。let是一种新的var，let和var的区别就是let使js实现了它的块级做用域，即词法做用域或块做用域（注：let能够当作var，它定义的变量被限制在特定范围中才能使用，离开这个范围就自动销毁）。

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

上面代码执行结果：

10
10
10
10
10
10
10
10
10
10

改成let以后：

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

执行结果：

0
1
2
3
4
5
6
7
8
9

这才是咱们但愿的结果，所以咱们推荐在TypeScript中定义变量尽可能使用let。

参考资料

• Javascript 严格模式use strict详解
• Javascript 严格模式详解
• 变量声明