javascript - typescript中定义的索引签名为 string 类型，为什么使用时会变成 string | number 类型？

Question

这是我的代码，vue3+typescipt

<script setup lang="ts">interface NumberDictionary {  [index: string]: string;}const formInfo: NumberDictionary = {  name: "john",  want: "eat",};Object.entries(formInfo).forEach(([key, value]) => {  console.log(key, value);});</script><template>  <form>    <input v-for="(value, key) in formInfo" :name="key" :value="value" :key="key" type="text" />  </form></template>

但是 typescript 推断的类型不一致

在 v-for 中遍历对象时，key被推断为string | number 类型，这就导致 input.name 无法接受 number 类型而类型报错。

有没有大佬能解释下。为什么key会被推断为 string | number 类型

Answer 1

Vue3中，对象的 v-for 类型声明如下：

/** * v-for object */export function renderList<T>(  source: T,  renderItem: <K extends keyof T>(    value: T[K],    key: K,    index: number  ) => VNodeChild): VNodeChild[]

Typescript文档对于 keyof 的说明：

If the type has a string or number index signature, keyof will return those types instead:

type Arrayish = { [n: number]: unknown };type A = keyof Arrayish; // numbertype Mapish = { [k: string]: boolean };type M = keyof Mapish; // string | number

Note that in this example, M is string | number — this is because JavaScript object keys are always coerced to a string, so obj[0] is always the same as obj["0"].

keyof types become especially useful when combined with mapped types, which we’ll learn more about later.

所以可以知道 key 的类型是 string | number