为何number[]无法赋值给[number,number]？Angular类型报错求助

问题根源 #

TypeScript 里 number[] 是任意长度的数字数组类型，而报错里的 [number, number] 是固定长度为2的元组类型，这两种类型并不兼容。你给 view 赋值了长度为2的数组，但因为声明的类型是 number[]，TypeScript 不会自动将其推断为元组；而模板中使用的组件（或指令）要求传入固定长度的元组，因此抛出类型不匹配错误。

直接在模板里写 [view]=[700, 400] 能生效，是因为这种字面量写法会被 TypeScript 直接推断为 [number, number] 元组类型，刚好符合要求。

解决方案 #

方案1：直接声明元组类型

把 view 的类型从 number[] 改成固定长度的元组，这是最直接的解决方式：

export class ... {
   single: any[] = [];
   multi: any[] = [];

   view: [number, number] = [700, 400];
   // ... 其他代码
}

方案2：使用类型断言

如果需要保留 number[] 的类型声明，可以通过类型断言告诉 TypeScript 当前数组符合元组要求：

// 声明时断言
view: number[] = [700, 400] as [number, number];

或者在模板中使用时断言：

[view]="view as [number, number]"

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