TypeScript Vue 组件中的泛型

Posted 2023-03-13

【中文标题】TypeScript Vue 组件中的泛型

【英文标题】：Generics in TypeScript Vue Component

【发布时间】：2019-12-08 10:41:30

【问题描述】：

我正在尝试向 vue 组件提供泛型类型，但不知道如何从调用者那里提供。

例如对于下面的组件

export default class Toggle<T> extends Vue 
    @Prop( default:  )    private payload!: T;
    @Prop(Function)           private handleCallback!: (payload: T) => Promise<any>;

当T如下调用时，我将如何提供类型？

<toggle :payload="propOfT: 'value of T'" :handleCallback='someCallbackFn'/>

【问题讨论】：

我过去的做法有所不同。我不会使用 Toggle，而是将其称为 Toggle。你的道具需要一个接口而不是 T。这应该会给你一个类似的没有泛型的解决方案。我不认为 Vue 在组件泛型方面做得很好......

【参考方案1】：

也许你可以使用

extend<Data, Methods, Computed, Props>(options?: ThisTypedComponentOptionsWithRecordProps<V, Data, Methods, Computed, Props>): ExtendedVue<V, Data, Methods, Computed, Props>;



interface Data 
  dataProp: boolean


interface Methods 
  methodOne: (name: Type) => Promise<void>


interface Props 
  items: Item[]


export default Vue.extend<Data, Methods, , Props>( ...