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

站长

2024年06月30日 08:45 · 阅读数 6

这是我的代码，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 推断的类型不一致 typescript中定义的索引签名为 string 类型，为什么使用时会变成 string | number 类型？

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

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

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

1个回答

test

2024-06-30

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; // number

type 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

适合作为回答的

经过验证的有效解决办法
自己的经验指引，对解决问题有帮助
遵循 Markdown 语法排版，代码语义正确

不该作为回答的

询问内容细节或回复楼层
与题目无关的内容
“赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容