Nuxt3迁移中循环对象键渲染Input的TypeScript错误排查

错误含义 #

TS错误ts(1117)表示对象字面量中存在重复的属性名。在这个场景下，TypeScript对Vue模板中遍历动态对象键的代码进行类型检查时，错误地将循环中重复生成的:value绑定识别为同一个对象内的重复属性，从而抛出该错误——尽管实际运行时代码能正常生成表单元素。

问题场景 #

• 从Nuxt2迁移到Nuxt3，同时引入TypeScript技术栈
• 组件模板遍历类型为Option的对象生成单选/复选框列表：

  type Option = {
      [key: string]: string;
  }
  

• 示例数据：

  {
      "portrait":"Hochformat",
      "landscape":"Querformat",
      "square":"Quadratisch"
  }
  

• 代码可正常渲染表单，但<input>的:value属性触发TS错误。

修复方案 #

方案1：将对象转换为键值对数组遍历（推荐） #

通过Object.entries()将对象转换为[key, value]格式的数组，让TypeScript能正确推断循环中每个条目的类型，避免错误识别重复属性：

<template>
  <div class="input-list">
    <label v-for="([key, label], index) in Object.entries(options)" :key="index">
      <input
        :type="inputType"
        :value="key"
        :name="name"
        v-model="modelValue"
      />
      {{ label }}
    </label>
  </div>
</template>

<script setup lang="ts">
import type { PropType } from 'vue'

type Option = {
  [key: string]: string
}

const props = defineProps({
  inputType: {
    type: String as PropType<'radio' | 'checkbox'>,
    required: true
  },
  name: {
    type: String,
    required: true
  },
  options: {
    type: Object as PropType<Option>,
    required: true
  },
  modelValue: {
    type: [String, Array],
    required: true
  }
})
</script>

方案2：添加类型断言 #

在:value绑定处添加类型断言，明确告诉TypeScript当前值的类型，绕过错误检查：

<input
  :type="inputType"
  :value="key as string"
  :name="name"
  v-model="modelValue"
/>

方案3：调整类型定义（可选） #

如果业务允许，可将Option类型改为数组格式，从根源避免对象遍历的类型推断问题：

type Option = {
  key: string
  label: string
}[]

对应的示例数据改为：

[
  {"key":"portrait", "label":"Hochformat"},
  {"key":"landscape", "label":"Querformat"},
  {"key":"square", "label":"Quadratisch"}
]

然后模板遍历数组即可：

<label v-for="option in options" :key="option.key">
  <input
    :type="inputType"
    :value="option.key"
    :name="name"
    v-model="modelValue"
  />
  {{ option.label }}
</label>

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