时间戳

首页 > 解决方案 > 如何使用打字稿键入 Vue.component？

typescript - 如何使用打字稿键入 Vue.component？

问题描述

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

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

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

我需要得到这种类型：

在此处输入图像描述

标签： typescriptvue.jsvue-component

解决方案

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

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

import Vue from "vue";

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

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

剩下的问题是要知道对象$options.data持有什么。Oncedata是一个未知类型，但我们将其用作函数，换句话说：()=>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));
}

代码变得有点冗长，但现在对自己的输入非常严格

推荐阅读