如何为Vue 2组件的tabs props添加TypeScript自定义类型？

我有一个接收tabs props的Vue组件，该props需遵循如下格式：

[{
  id: string
  title: string
  color: `#${string}`
},{
  id: string
  title: string
  color: `#${string}`
}]

当前项目基于Laravel + Vite + Vue 2，借助Vite支持TypeScript的特性，我希望为tabs props添加上述自定义类型。我知道可以使用JS类型，但需要的是自定义类型，此前搜索发现大多方案基于Vue 3，而当前项目无法升级Vue 3，请问是否可行及实现方法？

Vue 2结合Vite的TypeScript支持完全可以实现自定义props类型约束，以下是两种常用实现方式：

1. 先定义自定义TypeScript类型 #

在组件同目录或项目的类型定义文件夹（如src/types）中创建类型文件（比如tab.ts）：

// 单个标签项的类型
interface TabItem {
  id: string;
  title: string;
  color: `#${string}`; // 用TS模板字面量类型强制颜色为#开头的格式
}

// Tabs props的数组类型
export type TabsProps = TabItem[];

2. 在Vue 2组件中应用类型约束 #

方式一：Class风格组件（依赖vue-property-decorator） #

如果你的组件使用Class语法，先安装依赖：

npm install vue-property-decorator --save-dev

然后在组件中使用@Prop装饰器指定自定义类型：

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import type { TabsProps } from '@/types/tab';

@Component
export default class TabContainer extends Vue {
  // 用!做非空断言，配合TS确保props已被传入
  @Prop({ required: true, type: Array })
  tabs!: TabsProps;
}
</script>

方式二：Options API风格组件 #

如果用Options API，可通过类型注释+自定义验证函数实现，同时让TS识别类型：

<script lang="ts">
import Vue from 'vue';
import type { TabsProps } from '@/types/tab';

export default Vue.extend({
  props: {
    tabs: {
      required: true,
      type: Array,
      // 自定义验证函数，同时用类型谓词让TS识别正确类型
      validator: (value: unknown): value is TabsProps => {
        if (!Array.isArray(value)) return false;
        return value.every(item => 
          typeof item.id === 'string' &&
          typeof item.title === 'string' &&
          typeof item.color === 'string' &&
          /^#[0-9A-Fa-f]{3,6}$/.test(item.color)
        );
      }
    }
  },
  computed: {
    formattedTabs(): TabsProps {
      // 这里可以安全使用tabs，验证和类型断言已确保类型正确
      return this.tabs as TabsProps;
    }
  }
});
</script>

3. 确保Vite配置正确 #

Laravel Vite默认支持TypeScript，只需保证组件的script标签添加lang="ts"，或组件文件后缀为.ts即可。

内容的提问来源于stack exchange，提问作者Bernardo Benini Fantin