如何使用打字稿將 vue 道具類型設置為用戶類數組？

Question

我想知道是否有辦法讓我的組件只接受 User 類的數組。

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

上面的代碼接受所有數組。

Answer 1

可以使用自定義驗證器檢查道具類型：

@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 組件。