Vue3 v-for绑定:key属性时触发TypeScript ts(2322)类型错误

该类型错误由TypeScript类型误用导致：
定义Workspace接口时使用了大写开头的JavaScript包装对象类型Number、String，而非TypeScript规定的小写原始类型number、string。
大写的Number对应数字的包装对象类型，自带toString、toFixed、toExponential等原型方法，和报错信息中提示的不兼容类型结构完全吻合；而Vue的:key属性仅接受string | number | symbol类型的原始值，不支持传入包装对象，因此触发TS2322类型校验错误。

按以下步骤调整即可：

• 修改Workspace接口的类型定义，将大写开头的包装对象类型替换为TypeScript小写原始类型：

interface Workspace {
  id: number // 替换原大写Number为小写原始类型number
  name: string // 替换原大写String为小写原始类型string
}

• 保存文件，TypeScript服务会自动重新校验，:key的类型报错会直接消除，无需修改模板、响应式变量的其他逻辑。

日常编写TypeScript代码时，除主动实例化包装对象的特殊场景外，所有基础值的类型标注都应该使用小写开头的原始类型number/string/boolean/symbol，不要和大写开头的JavaScript构造函数/包装对象类型混淆，避免触发同类类型不匹配问题。

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