如何让 TypeScript “知道”公共实例属性 ($locale) 已添加到 Vue？答案

【问题标题】：How to make TypeScript "know" that a public instance property ($locale) is added to Vue?如何让 TypeScript “知道”公共实例属性 ($locale) 已添加到 Vue？
【发布时间】：2019-10-03 11:11:01
【问题描述】：

我在我的 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 方法？

【问题讨论】：

这个包好像不支持Typescript。您可以尝试自己实现。这里有一些有用的资源：@987654322@vuejs.org/v2/guide/typescript.html
@Komninos 以防万一您有兴趣，您可以在下面查看我的答案

标签： typescript vue.js

【解决方案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 (module augmentation example)：

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 是不需要）。

【讨论】：