如何使用打字稿键入 Vue.component？答案

【问题标题】：How to type a Vue.component using typescript?如何使用打字稿键入 Vue.component？
【发布时间】：2020-02-22 04:21:10
【问题描述】：

我有一个 util 函数可以重置某些 Vue 组件的所有数据内容。

export function resetData(vm: any) {
  Object.assign(vm.$data, vm.$options.data.call(vm));
}

我正在尝试删除我的 Vue.component 的“任何”类型，这可能吗？有没有针对 Vue 的 $data 的接口？

我需要得到这个类型：

【问题讨论】：

【解决方案1】：

注意resetData 函数需要一个 Vue Instance 参数

在这种情况下，从 "vue" 包中导入 Vue 并将其用作类型

import Vue from "vue";

export function resetData(vm: Vue) { ... }

Vue 对象具有预期的$data 和$options 参数。

剩下的问题是知道对象$options.data 持有什么。一旦data 是未知类型，但我们将其用作函数，换句话说：()=>void。否则会引发语法错误。

Object.assign(vm.$data, (vm.$options.data as ()=>void).call(vm));

没有编译错误的最终代码会像

import Vue from "vue";
export function resetData(vm: Vue) {
    Object.assign(vm.$data, (vm.$options.data as ()=>void).call(vm));
}

代码变得有点冗长，但现在自己打字很紧凑

【讨论】：