TypeScript中声明数组类型的最佳方式及两种常见写法的区别

核心本质差异 #

你给出的两种写法属于完全不同的类型定义，并非仅书写风格的差异：

• 第一种写法 [number | SpacingInterface] 是固定长度元组类型：
  要求数组只能有且仅有1个元素，元素类型满足number | SpacingInterface即可。
  合法赋值示例：[1]、[spacing实例]
  非法赋值示例：[]、[1, 2]、[1, spacing实例]
• 第二种写法 (number | SpacingInterface)[] 是可变长度普通数组类型：
  对数组长度无任何限制，仅要求数组内每个元素的类型符合number | SpacingInterface即可，空数组、任意长度的符合要求的数组都可以正常赋值。

编译后的区别 #

TypeScript 所有类型仅在编译阶段生效，运行时会全部擦除。只要实际运行的JavaScript数组结构符合业务逻辑，两种类型定义最终编译生成的运行时代码没有任何区别，差异仅存在于编译阶段的类型校验规则。

选型建议 #

• 如果你的业务场景需要明确限制数组的长度、甚至每个位置对应的元素类型，就选择元组写法，比如常用的坐标类型定义type Point = [x: number, y: number]，要求必须传递两个数值元素，多传少传都会触发类型错误，更符合业务约束。
• 如果只是需要一个元素类型符合要求、长度任意的普通数组，第二种写法是社区最常用的数组声明方式，适用绝大多数业务场景。

另外补充：普通数组还有一种完全等价的泛型写法Array<number | SpacingInterface>，和第二种(number | SpacingInterface)[]功能没有任何差异，属于团队可统一的书写风格偏好，按需选择即可。

内容的提问来源于stack exchange，提问作者JW Geertsma