Vue TypeScript下v-for模板出现类型警告，求更优解决方案

我在Vue3的<script setup lang="ts">环境中编写了以下代码：

模板代码 #

<button v-for="group in groupList">
  <p>{{ group.name }}</p>
</button>

脚本代码 #

<script setup lang="ts">
export interface IGroupTabData {
  id: string;
  name: string;
  [key: string]: any;
}

const props = defineProps<{ groupList: IGroupTabData[]; }>();
</script>

在模板中访问group.name时，TypeScript抛出警告：Property 'name' does not exist on type 'unknown'。我目前通过类型断言解决了该问题：

<button v-for="group in groupList">
  <p>{{ (group as IGroupTabData).name }}</p>
</button>

请问是否有更优的解决方式？

方法1：运行时props声明+类型断言结合 #

在defineProps中补充运行时的props定义，再通过类型断言约束结构，模板就能自动推导group的类型，无需在模板中重复断言：

<script setup lang="ts">
export interface IGroupTabData {
  id: string;
  name: string;
  [key: string]: any;
}

const props = defineProps({
  groupList: {
    type: Array,
    required: true,
    // 可选：添加验证逻辑确保数据结构合规
    validator: (value: unknown) => {
      return Array.isArray(value) && value.every(item => 
        typeof item === 'object' && item !== null && 'id' in item && 'name' in item
      );
    }
  }
}) as { groupList: IGroupTabData[] };
</script>

方法2：模板中显式指定数组类型（Vue 3.3+） #

Vue 3.3及以上版本支持在模板中直接对数组进行类型断言，一次性解决整个列表的类型推导问题：

<button v-for="group in groupList as IGroupTabData[]">
  <p>{{ group.name }}</p>
</button>

也可以直接给循环变量指定类型：

<button v-for="(group as IGroupTabData) in groupList">
  <p>{{ group.name }}</p>
</button>

方法3：用computed包装props #

通过computed属性对groupList进行包装，利用computed的类型推导能力让模板识别变量类型：

<script setup lang="ts">
import { computed } from 'vue';

export interface IGroupTabData {
  id: string;
  name: string;
  [key: string]: any;
}

const props = defineProps<{ groupList: IGroupTabData[]; }>();

// 包装后模板可正确推导类型
const typedGroupList = computed(() => props.groupList);
</script>

模板中改用包装后的变量：

<button v-for="group in typedGroupList">
  <p>{{ group.name }}</p>
</button>

以上方法均无需在模板中逐个元素添加类型断言，既保持了类型安全，也让代码更简洁。

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