如何让 TypeScript "know"将公共实例属性 ($locale) 添加到 Vue 中？

Question

我在我的 Vue 应用程序中使用 v-localize，并且正在迁移到 TypeScript。 V-localize 被添加到应用程序中，如下所示：

//...
const Localize = require('v-localize'); // was import before migration to TS
import { locales } from './localize';
//...
Vue.use(Localize);
new Vue({
el: '#app',
store,
localize: locales,
render: (h: Function) => h(App) //# h: Vue.CreateElement? , => Vue.VNode?
});

这带来了

错误：(13， 3( TS2769： 没有与此呼叫匹配的过载。[....]

我目前压制

} as any);

在最后一行;在脚本(而不是在模板中(中，它是这样使用的：

const myLocalizedString = this.$locale({i: 'scopeName.stringName'})

$locale突出显示的位置

未解析的函数或方法$locale()

同样，我可以这样抑制它：

(this as any).$locale({i: 'scopeName.stringName'})

但我想知道是否有一种更一致(且不那么冗长(的方法。如何让 TypeScript 知道 Vue 配置的新字段和$locale方法？

Answer 1

这是我的部分解决方案：

• 使用import Localize from 'v-localize'而不是const Localize = require('v-localize')我添加了一个文件v-localize.d.ts如下所示：

  declare module 'v-localize' {
  export default function Localize (): any;
  }
  

  当然，这不是专用类型，但足以完成此特定任务

• 为了访问组件中的.$locale并获得其参数的类型建议，我引入了另一个文件v-localize-vue.d.ts(模块扩充示例(：

  import Vue from 'vue'
  type localeArgument = {
  i: string
  }
  declare module 'vue/types/vue' {
  interface Vue {
  $locale: (a: localeArgument) => string
  }
  }
  

• 要从 Vue 选项中删除} as any);位，我已添加到v-localize-vue.d.ts(与同一文档一致(：

  declare module 'vue/types/options' {
  interface ComponentOptions<V extends Vue> {
  localize?: any
  }
  }
  

我称解决方案为"部分"，因为我在第一位和第三位中使用了any，并且我还没有挖掘我的localeArgument类型是否准确(也许对象可以包含其他字段并且不需要i(。