Vue.js + Typescript：如何将@Prop 类型设置为字符串数组？

Question

type将@Prop装饰器的属性设置为的正确方法是Array<string>什么？甚至有可能吗？

我只能将它设置为Array没有string像这样：

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';

@Component
export default class MyComponent extends Vue {
  @Prop({ type: Array, default: [] }) private readonly myProperty!: string[];
}
</script>

当我尝试将其更改为Array<string>甚至string[]收到以下错误时：

Argument of type '{ type: boolean; default: never[]; }' is not assignable 
to parameter of type 'PropOptions<any> | Constructor | Constructor[] | undefined'.

Types of property 'type' are incompatible. Type 'boolean' is not assignable to type 
'(new (...args: string[]) => Function) | (() => any) | (new (...args: never[]) => any) | Prop<any>[] | undefined'.

这个错误信息让我更加困惑：为什么类型现在被识别为boolean？

Answer 1

道具应该按照文档中的描述进行注释。

你应该添加as PropType<string[]>：

<script lang="ts">
import { PropType } from "vue"
import { Component, Prop, Vue } from 'vue-property-decorator';

@Component
export default class MyComponent extends Vue {
  @Prop({
    type: Array as PropType<string[]>, // use PropType
    default: () => [] // use a factory function
  }) private readonly myProperty!: string[];
}
</script>

默认Arrays 和Objects 应始终从工厂函数（source）返回。这避免（意外地）在多个组件实例之间共享一个属性。