TypeScript使用变量 – TypeScript开发教程

上一章TypeScript教程请查看：Null和Undefined之间的区别

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

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

在ES6中，我们可以使用let和const关键字定义变量。这些变量具有类似的变量声明和初始化语法，但在范围和用法上有所不同。在TypeScript中，总是建议使用let关键字定义一个变量，因为它提供了类型安全性。

let关键字在某些方面与var关键字相似，而const是一个阻止重赋给变量的let。

变量声明

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

1. 在一条语句中声明类型和值

var [identifier] : [type-annotation] = value;  

2. 声明没有值的类型，然后将变量设置为undefined。

var [identifier] : [type-annotation];  

3. 在没有类型的情况下声明它的值，然后变量将被设置为any。

var [identifier] = value;  

4. 声明没有值和类型，然后该变量将被设置为any并使用undefined进行初始化。

var [identifier];  

让我们一个一个地理解这三个变量关键字。

var关键字

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

var x = 50;  

我们也可以在函数中声明一个变量

function a() {  
     var msg = " Welcome to srcmini !! ";  
     return msg;  
}  
a();  

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

function a() {  
    var x = 50;  
    return function b() {  
         var y = x+5;  
         return y;  
    }  
}  
var  b = a();  
b();       //returns '55'  

范围规则

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

例子

function f()  
{  
    var X = 5; //在f()中全局可用 
    if(true)  
    {  
        var Y = 10; //在f()中全局可用
        console.log(X); // 5  
        console.log(Y); // 10  
    }      
    console.log(X); // 5  
    console.log(Y); // 10  
}  
f();  
console.log(X); // 返回未定义的值，因为值不能从外部函数访问 
console.log(Y); // 返回未定义的值，因为值不能从外部函数访问  

注意：由于var声明在其包含的模块、函数、全局作用域或名称空间内的任何地方都可以访问，所以有些人称之为var作用域或函数作用域，参数也称为作用域函数。

let声明

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

let关键字可以增强代码的可读性，并减少编程出错的机会。

let语句的语法与var语句相同:

var declaration: var b = 50;  
let declaration: let b = 50;  

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

块作用域

当使用let关键字声明变量时，它使用块作用域或词法作用域。与使用var关键字声明的变量不同，它的作用域暴露到其包含的函数中，块作用域的变量不能在其包含的块之外可见。

function f(input: boolean) {  
    let x = 100;  
    if (input) {  
        // "x"这里存在        
        let y = x + 1;  
        return y;  
    }  
    // Error: "y"这里不存在  
    return y;  
}  

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

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

try {  
    throw "Hi!!";  
}catch (e) {  
    console.log("Hello");  
}  
// 这里不存在e，所以会发生错误
console.log(e);  

重定义和隐藏

对于var声明，我们声明了多少次变量并不重要，在下面的例子中，所有关于x的声明都指向相同的x，这是完全有效的。但是有一些bug，可以通过let声明找到。

没有let关键字的例子:

function f(a) {  
    var a;  
    var a;  
    if (true) {  
        var a;  
    }  
}  

let关键字示例：

let a = 10;  
let a = 20; // error: can't re-declare 'a' in the same scope  

隐藏是在更嵌套的范围中引入新名称的行为，它声明一个已经在外部范围中声明的标识符，这不是不正确的，但是可能会有混淆。它将使外部标识符在循环变量隐藏的循环内不可用，它可以在偶然的跟踪事件中引入自己的bug，还可以帮助防止应用程序出现某些bug。

例子

var currencySymbol = "$";  
function showMoney(amount) {  
  var currencySymbol = "€";  
  document.write(currencySymbol + amount);  
}  
showMoney("100");  

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

在编写更清晰的代码时，通常会避免隐藏，而在某些情况下，如果有适当的利用它的机会，我们应该以最佳的判断来使用它。

提升机制

var的提升

提升是JavaScript的一种机制，在提升中，变量和函数声明在代码执行之前移到其封闭范围的顶部，我们可以通过下面的例子来理解它。

注意：如果我们初始化变量，就不会发生提升。

例子

function get(x){     
  console.log(a);  // 打印变量x, 值是undefined       
  // 运行时将提升到顶部  
  var a = x;        
  // 再次打印x变量, 值为3
  console.log(a);    
}    
get(4);  

输出

undefined
4

let提升

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

例子

{  
  // 程序不知道变量b所以它会给出一个错误。  
  console.log(b); // ReferenceError: b is not defined  
  let b = 3;  
}  

const常量声明

const声明用于声明永久值，以后无法更改，它有一个固定的值，const声明遵循与let声明相同的作用域规则，但是我们不能为它重新赋值。

注意：根据命名标准，const变量必须用大写字母声明，应该遵循命名标准来长期维护代码。

例子

function constTest(){  
  const VAR = 10;  
  console.log("Value is: " +VAR);  
}  
constTest();  

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

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

例子

function constTest(){  
  const VAR = 10;  
  console.log("Output: " +VAR);  // : 10  
  const VAR = 10;  
  console.log("Output: " +VAR);  //Uncaught TypeError: Assignment to constant variable  
}  
constTest();  

输出

SyntaxError: Identifier 'VAR' has already been declared.