时间戳

首页 > 解决方案 > 如何使用打字稿将 vue 道具类型设置为用户类数组？

typescript - 如何使用打字稿将 vue 道具类型设置为用户类数组？

问题描述

我想知道是否有办法让我的组件只接受用户类的数组。

@Prop({ required: true, type: () => Array }) readonly user: Array<User>;

上面的代码接受所有数组。

标签： typescriptvue.js

解决方案

可以使用自定义验证器检查道具类型：

@Prop({
  required: true,
  validator: prop => Array.isArray(prop) && prop.every(item => item instanceof User)
}) readonly user: Array<User>;

TypeScript 是结构化类型的，Array<User>不需要数组作为User类的实例。

的目的Array<User>是在组件内部声明 prop 类型，最好应该是readonly user!: Array<User>.

由于 vue-class-component 和 vue-property-decorator 类组件的限制，TypeScript 无法保证 props 在编译时的类型安全。Vue 组合 API 可用于严格类型的 TypeScript 组件。

推荐阅读