TypeScript 进阶 变量声明

Question

解构

解构数组

let input = [1, 2];
let [first, second] = input;
console.log(first); // outputs 1
console.log(second); // outputs 2

作用于函数参数 ：

function f([first, second]: [number, number]) {
    console.log(first);
    console.log(second);
}
f(input);

在数组里使用 ... 语法创建剩余变量 ：

let [first, ...rest] = [1, 2, 3, 4];
console.log(first); // outputs 1
console.log(rest); // outputs [ 2, 3, 4 ]

# 忽略你不关心的尾随元素
let [first] = [1, 2, 3, 4];
console.log(first); // outputs 1

# 或其它元素
let [, second, , fourth] = [1, 2, 3, 4];

对象解构

let o = {
    a: "foo",
    b: 12,
    c: "bar"
};
let { a, b } = o;

没有声明的赋值：

({ a, b } = { a: "baz", b: 101 }); // 需要用括号将它括起来，因为 Javascript 通常会将以 { 起始的语句解析为一个块

在对象里使用 ... 语法创建剩余变量：

let { a, ...passthrough } = o;
let total = passthrough.b + passthrough.c.length;

属性重命名

给属性以不同的名字：

let { a: newName1, b: newName2 } = o;
# 如同
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=0 } = {}): void {
    // ...
}
f();

其次，你需要知道在解构属性上给予一个默认或可选的属性用来替换主初始化列表。 要知道 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

展开

将一个数组展开为另一个数组，或将一个对象展开为另一个对象。

TypeScript 编译器不允许展开泛型函数上的类型参数。

展开操作创建的是一份浅拷贝

let first = [1, 2];
let second = [3, 4];
let bothPlus = [0, ...first, ...second, 5];

let defaults = { food: "spicy", price: "$$", ambiance: "noisy" };
let search = { ...defaults, food: "rich" }; // { food: "rich", price: "$$", ambiance: "noisy" }
# 注意，出现在展开对象后面的属性会覆盖前面的属性。
let defaults = { food: "spicy", price: "$$", ambiance: "noisy" };
let search = { food: "rich", ...defaults };

对象展开仅包含对象 自身的可枚举属性 。 当展开一个对象实例时，你会丢失其方法 ：

class C {
  p = 12;
  m() {
  }
}
let c = new C();
let clone = { ...c };
clone.p; // ok
clone.m(); // error!

小结

对象内的属性使用了默认值时，需要指定对象内属性的类型时，要在该对象后写上完整的模式

let {a, b}: {a: string, b: number} = o;