Vue 3 TypeScript项目中v-for遍历Object类型Props的类型问题解决方案

我来帮你搞定这个Vue + TypeScript下遍历Object类型props的类型问题，核心就是把props的类型定义精确化，让TypeScript能准确推断遍历项的类型，下面一步步来：

1. 先在props.ts中精确声明options的类型 #

别再用Object这种模糊的类型了，Object太宽泛，TypeScript没法识别具体的键值结构。我们可以用Record<string, string>来定义“键为字符串、值为字符串”的对象，或者根据需求自定义更精确的类型：

示例1：基础字符串键值对类型 #

// props.ts
import { defineProps } from 'vue';

// 定义类型别名，让代码更清晰
type OptionsType = Record<string, string>;

export default defineProps<{
  options: OptionsType;
  // 如果需要支持可选，加?：options?: OptionsType;
}>();

示例2：带固定键的精确类型 #

如果你的options键是固定枚举值，还可以进一步缩小类型范围：

// props.ts
import { defineProps } from 'vue';

enum OptionKeys {
  Apple = 'apple',
  Banana = 'banana',
  Cherry = 'cherry'
}

type OptionsType = Record<OptionKeys, string>;

export default defineProps<{
  options: OptionsType;
}>();

2. 在组件模板中正确遍历对象 #

Vue中遍历对象的标准写法是v-for="(label, value) in options"（注意顺序：第一个参数是对象的值，第二个是键，你可以根据自己的业务调整变量名，比如把键作为选项的value，值作为显示的文本）。现在因为props类型精确了，TypeScript会自动推断label和value的类型，不会再出现类型报错：

生成复选框示例 #

<template>
  <div class="checkbox-group">
    <label v-for="(label, value) in options" :key="value">
      <input type="checkbox" :value="value" />
      {{ label }}
    </label>
  </div>
</template>

<script setup lang="ts">
import props from './props.ts';
// 如需解构props：const { options } = defineProps<typeof props>();
</script>

生成单选按钮示例 #

<template>
  <div class="radio-group">
    <label v-for="(label, value) in options" :key="value">
      <input type="radio" name="option-group" :value="value" />
      {{ label }}
    </label>
  </div>
</template>

<script setup lang="ts">
import props from './props.ts';
</script>

3. 可选：给options设置默认值 #

如果options是可选属性，你可以用withDefaults给它设置默认值，同时保持类型正确：

// props.ts
import { defineProps, withDefaults } from 'vue';

type OptionsType = Record<string, string>;

export default withDefaults(defineProps<{
  options?: OptionsType;
}>(), {
  options: () => ({
    default1: '默认选项1',
    default2: '默认选项2'
  })
});

这样处理后，不管是脚本逻辑还是模板遍历，TypeScript都能准确识别options的结构，类型报错自然就解决了。

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