TypeScript 基础语法02

变量声明

解构

解构数组

最简单的解构莫过于数组的解构赋值了：

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

这创建了 2 个命名变量 first 和 second。 相当于使用了索引，但更为方便：

let first = input[0]
let second = input[1]

作用于函数参数：

let input: [number, number] = [1, 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

这通过 o.a 和 o.b 创建了 a 和 b 。 注意，如果你不需要 c 你可以忽略它。

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

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

属性重命名

你也可以给属性以不同的名字：

let { a: newName1, b: newName2 } = o

这里的语法开始变得混乱。 你可以将 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 = 0 } = {}): void {
  // ...
}
f()

上面的代码是一个类型推断的例子，将在后续章节介绍。

其次，你需要知道在解构属性上给予一个默认或可选的属性用来替换主初始化列表。 要知道 C 的定义有一个 b 可选属性：

function f({ a, b = 0 } = { a: '' }): void {
  // ...
}
f({ a: 'yes' }) // OK, 默认 b = 0
f() // OK, 默认 a: '', b = 0
f({}) // Error, 一旦传入参数则 a 是必须的

要小心使用解构。 从前面的例子可以看出，就算是最简单的解构表达式也是难以理解的。 尤其当存在深层嵌套解构的时候，就算这时没有堆叠在一起的重命名，默认值和类型注解，也是令人难以理解的。 解构表达式要尽量保持小而简单。

展开

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

这会令 bothPlus 的值为 [0, 1, 2, 3, 4, 5]。 展开操作创建了 first 和 second的 一份浅拷贝。 它们不会被展开操作所改变。

你还可以展开对象：

let defaults = { food: 'spicy', price: '$10', ambiance: 'noisy' }
let search = { ...defaults, food: 'rich' }

search的值为 { food: 'rich', price: '$10', ambiance: 'noisy' }。 对象的展开比数组的展开要复杂的多。像数组展开一样，它是从左至右进行处理，但结果仍为对象。这就意味着出现在展开对象后面的属性会覆盖前面的属性。因此，如果我们修改上面的例子，在结尾处进行展开的话：

let defaults = { food: 'spicy', price: '$10', ambiance: 'noisy' }
let search = { food: 'rich', ...defaults }

那么，defaults 里的 food: 'spicy' 属性会重写 food: 'rich'，在这里这并不是我们想要的结果。