TypeScript 变量

变量是存储位置，用于存储值/信息以供程序引用和使用。它在代码中充当值的容器，在使用之前必须声明。我们可以使用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. 声明变量时不指定类型。然后该变量将被设置为任意类型。

var [identifier] = value;

4. 声明时没有值和类型。然后变量将被设置为任意值，并初始化为undefined。

var [identifier];

让我们逐个了解这三个变量关键字。

var关键字

一般来说， var 关键字用于在JavaScript中声明一个变量。

var x = 50;

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

function a() {
     var msg = " Welcome to JavaTpoint !! ";
     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关键字声明变量时会遇到一些奇怪的作用域规则。在TypeScript中，使用var关键字声明的变量具有函数作用域。这些变量在声明它们的函数中具有全局作用域。它们也可以被与相同作用域共享的任何函数访问。

示例

function f()
{
    var X = 5; //Available globally inside f()
    if(true)
    {
        var Y = 10; //Available globally inside f() 
        console.log(X); //Output 5
        console.log(Y); //Output 10
    }    
    console.log(X); //Output 5
    console.log(Y); //Output 10
}
f();
console.log(X); //Returns undefined because value cannot accesses from outside function
console.log(Y); //Returns undefined because value cannot accesses from outside function

注意：由于变量声明在其所在的模块、函数、全局作用域或命名空间中是可访问的，所以有些人称之为var作用域或函数作用域。 参数也被称为函数作用域。

let声明

let关键字与var关键字类似。var声明在解决程序问题方面存在一些问题，因此ES6引入了let关键字来声明TypeScript和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" exists here      
        let y = x + 1;
        return y;
    }
    // Error: "y" doesn't exist here
    return y;
}

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

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

例如：

try {
    throw "Hi!!";
}catch (e) {
    console.log("Hello");
}
// 'e' doesn't exist here, so error will found
console.log(e);

重新声明和变量遮蔽

使用var声明的时候，变量被声明多少次都没有关系，只会获得一个。在下面的示例中，所有对x的声明都指向同一个x，这非常合法。但是存在一个错误，在使用let声明时可以找到。

没有使用let关键字的示例：

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

使用let关键字的示例：

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

Shadowing 是在更嵌套的范围引入新名称的行为。它声明了一个已经在外部范围中声明过的标识符。这并不是错误的，但可能会引起混淆。它将使得外部标识符在循环中不可用，而循环变量则将其屏蔽。在意外阴影的情况下，它可以引入 Bug，同时也有助于防止应用程序的某些 Bug。

示例

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

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

通常在编写更清晰的代码时会避免使用”Shadowing”。但在某些情况下，如果有适当的利用可能，我们应该用最好的判断力使用它。

变量提升

var 的变量提升

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

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

示例

function get(x){   
  console.log(a);  //printing x variable. Value is undefined     
  //declared variable after console hoisted to the top at run time  
  var a = x;      
  //again printing x variable. Value is 3.
  console.log(a);  
}  
get(4);

输出:

undefined
4

let变量提升

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

示例

{
  //program doesn't know about variable b so it will give me an error.
  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();

输出：

Value is: 10

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

如果我们试图在代码中重新分配已存在的const变量，代码将会报错。因此，我们无法将任何新值重新分配给已存在的const变量。

示例

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

输出：

SyntaxError: Identifier 'VAR' has already been declared.