Vue3 + typescript 开发，联合类型如何在模板中使用断言

Question

在vue3+ts开发过程中遇到一个问题
比如我有一个数据

interface IAnswer = string | Array<string>

// setup
const answer = ref<IAnswer>([1,2,3,4])
return {
  answer
}

在模板中使用时

<template>
  <div v-for="(_answer, i) in answer" :key="i">{{ _answer }}</div>
</template>

这时候 vscode 编辑器中就会有错误提示（但是ts编译不会报错，我用的 volar 插件）

"for...in" 语句右侧必须是 "any" 类型、对象类型或类型参数，但此处的类型为“string | string[]”。

如果在 ts 代码中，只需要断言 answer as Array<string> 即可，但是在模板中不知这个错误提示如何消除？

Answer 1

这块涉及到 ts 的类型收窄，这里可以用 if 判断类型，如：
此时类型被确定为数组，就不会有报错

<template v-if="Array.isArray(answer)">
  <div v-for="item in answer">{{ item }}</div>
</template>

也可以通过类型断言的方式告诉编译器，“相信我，我知道自己在干什么”。如：

<div v-for="item in (answer as unknown as string[])">{{ item }}</div>

Answer 2

for...in 右边应该不能是字符串类型

Answer 3

提示报错是由于 volar 扩展 v-for 类型判断不全，而不是联合类型导致。已合并 PR ，后期更新扩展即可。