TypeScript变量声明
2022年9月29日大约 3 分钟
TypeScript变量声明
let和const是JavaScript里相对较新的变量声明方式。 let在很多方面与var是相似的,但是可以帮助大家避免在JavaScript里常见一些问题。 const是对let的一个增强,它能阻止对一个变量再次赋值。
let声明
当用let声明一个变量,它使用的是词法作用域或块作用域。 不同于使用 var声明的变量那样可以在包含它们的函数外访问,块作用域变量在包含它们的块或for循环之外是不能访问的。
const 声明
它们与let声明相似,它们被赋值后不能再改变.const
变量的内部状态是可修改的。
const numLivesForCat = 9;
const kitty = {
name: "Aurora",
numLives: numLivesForCat,
}
// Error
kitty = {
name: "Danielle",
numLives: numLivesForCat
};
// all "okay"
kitty.name = "Rory";
kitty.name = "Kitty";
kitty.name = "Cat";
kitty.numLives--;
解构
解构数组
let input = [1, 2];
let [first, second] = input;
console.log(first); // 1
console.log(second); // 2
可以使用...name语法创建一个剩余变量列表:
let [first, ...rest] = [1, 2, 3, 4];
console.log(first); // 1
console.log(rest); // [ 2, 3, 4 ]
let [first] = [1, 2, 3, 4];
console.log(first); // 1
let [, second, , fourth] = [1, 2, 3, 4];
console.log(second); // 2
console.log(fourth); // 4
对象解构
let o = {
a: "foo",
b: 12,
c: "bar"
}
let {a, b} = o;
console.log(a); // foo
console.log(b);// 12
// 注意,我们需要用括号将它括起来,因为Javascript通常会将以 { 起始的语句解析为一个块。
({a, b} = {a: "baz", b: 101});
属性重命名
你也可以给属性以不同的名字:
let o = {
a: "foo",
b: 12,
c: "bar"
}
let {a: newName1, b: newName2} = o;
console.log(newName1); // foo
console.log(newName2);// 12
// 这里的语法开始变得混乱。 你可以将 a: newName1 读做 "a 作为 newName1"。 方向是从左到右,好像你写成了以下样子:
let newName1 = o.a;
let newName2 = o.b;
// 令人困惑的是,这里的冒号不是指示类型的。 如果你想指定它的类型, 仍然需要在其后写上完整的模式。
let {a, b}: {a: string, b: number} = o;
默认值
默认值可以让你在属性为 undefined 时使用缺省值:
function keepWholeObject(wholeObject: {a: string, b?: number}) {
let {a, b = 1001} = wholeObject;
}
现在,即使 b 为 undefined , keepWholeObject 函数的变量 wholeObject 的属性 a 和 b 都会有值。
函数声明
解构也能用于函数声明。 看以下简单的情况:
type C = {a: string, b?: number}
function f({a, b}: C): void {
// ...
}
但是,通常情况下更多的是指定默认值,解构默认值有些棘手。 首先,你需要知道在设置默认值之前设置其类型。
function f({a, b} = {a: "", b: 0}): void {
// ...
}
f(); // ok, default to {a: "", b: 0}
其次,你需要知道在解构属性上给予一个默认或可选的属性用来替换主初始化列表。 要知道 C 的定义有一个 b 可选属性:
function f({a, b = 0} = {a: ""}): void {
// ...
}
f({a: "yes"}) // ok, default b = 0
f() // ok, default to {a: ""}, which then defaults b = 0
f({}) // error, 'a' is required if you supply an argument
要小心使用解构。 从前面的例子可以看出,就算是最简单的解构也会有很多问题。 尤其当存在深层嵌套解构的时候,就算这时没有堆叠在一起的重命名,默认值和类型注解,也是令人难以理解的。 解构表达式要尽量保持小而简单。 你自己也可以直接使用解构将会生成的赋值表达式。