2024年11月17日 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 关键字用于在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关键字与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”。但在某些情况下，如果有适当的利用可能，我们应该用最好的判断力使用它。
变量提升是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变量，将会导致 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声明遵循与let声明相同的作用域规则，但我们不能对其重新赋予任何新值。
注意：根据命名规范，const变量必须以大写字母声明。为了长期维护代码，应遵循命名规范。
示例
function constTest(){
const VAR = 10;
console.log("Value is: " +VAR);
}
constTest();
输出：
Value is: 10
如果我们试图在代码中重新分配已存在的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.
本文链接：http://so.lmcjl.com/news/18009/