Vue3+TypeScript组合式API中如何在Props声明类型化数组？

问题场景 #

在使用Vue3组合式API结合TypeScript开发组件时，声明数组类型的Props时遇到编译错误，相关代码及报错信息如下：

组件代码：

<template>
    ...removed for minimal sake
</template>
<script lang="ts">
    import { defineComponent } from 'vue';
    import { StyledSelectItem } from './StyledSelectItem';

    export default defineComponent({
        name: 'StyledSelect',
        props: {
            cssClass: String,
            items: Array<StyledSelectItem>, // 此处编译报错
            placeholder: String,
            selectedValue: String,
        },
        setup() {

        },
    });
</script>

StyledSelectItem接口定义：

export interface StyledSelectItem {
    text: string;
    value: string;
}

编译错误提示：

14 |     props: {
 15 |         cssClass: String,
> 16 |         items: Array < StyledSelectItem > ,
     |                                           ^
 17 |         placeholder: String,
 18 |         selectedValue: String,
 19 |     },

尝试以下写法也未解决问题：

items: StyledSelectItem[],        // 报错：refers to a type but used as a value
items: [] as StyledSelectItem[],  // 报错：no overload matches this call.

解决方案 #

方法1：使用Vue提供的PropType工具类型

Vue3中声明复杂类型的Props需要借助PropType来明确类型，帮助TypeScript完成正确的类型推断。修改后的代码如下：

<script lang="ts">
    import { defineComponent, PropType } from 'vue'; // 引入PropType
    import { StyledSelectItem } from './StyledSelectItem';

    export default defineComponent({
        name: 'StyledSelect',
        props: {
            cssClass: String,
            items: {
                type: Array as PropType<StyledSelectItem[]>, // 指定数组元素类型
                required: false, // 根据业务需求设置是否必填
                default: () => [] // 数组类型默认值需用工厂函数返回，避免实例共享引用
            },
            placeholder: String,
            selectedValue: String,
        },
        setup(props) {
            // 此时props.items会被正确推断为StyledSelectItem[]类型
        },
    });
</script>

方法2：类型声明式Props定义（推荐）

如果使用组合式API，更推荐通过类型直接声明Props，写法简洁且类型推断更直观：

<script lang="ts">
    import { defineComponent } from 'vue';
    import { StyledSelectItem } from './StyledSelectItem';

    // 单独定义Props类型
    interface StyledSelectProps {
        cssClass?: string;
        items?: StyledSelectItem[];
        placeholder?: string;
        selectedValue?: string;
    }

    export default defineComponent({
        name: 'StyledSelect',
        props: {
            cssClass: String,
            items: Array, // 仅指定基础类型，具体类型由泛型推断
            placeholder: String,
            selectedValue: String,
        },
        setup(props: StyledSelectProps) {
            // Props类型完全匹配
        },
    });
</script>

注意事项 #

• 接口中的类型请使用小写的string而非大写的String，前者是TypeScript的基础类型，后者是JavaScript构造函数，类型声明中应使用前者。
• 数组类型的Props默认值必须通过工厂函数返回，避免多个组件实例共享同一个数组引用。

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