[英]Augmenting vue.js in typescript
I'm trying to augment vue js with additional mapping.我正在尝试通过额外的映射来增强 vue js。 I'm following this: https://v2.vuejs.org/v2/guide/typescript.html#Augmenting-Types-for-Use-with-Plugins我正在关注这个: https ://v2.vuejs.org/v2/guide/typescript.html#Augmenting-Types-for-Use-with-Plugins
I have created a file vue.d.ts
under ./Definitions
(relative to my main.ts
) I have referenced it in my main.ts
:我在vue.d.ts
./Definitions
相对于我的main.ts
)我在main.ts
中引用了它:
require("./Definitions/vue.d.ts");
In vue.d.ts
I've put:在vue.d.ts
我放了:
// 1. Make sure to import 'vue' before declaring augmented types
import Vue from 'vue'
// 2. Specify a file with the types you want to augment
// Vue has the constructor type in types/vue.d.ts
declare module 'vue/types/vue' {
// 3. Declare augmentation for Vue
interface Vue {
$myProperty: string
}
}
But this:但是这个:
var vm = new Vue()
console.log(vm.$myProperty);
Doesn't resolve.不解决。
I've tried changing declare module 'vue/types/vue'
to just declare module 'vue'
.我尝试将declare module 'vue/types/vue'
更改为declare module 'vue'
。 This gives me an error: "Cannot augument module 'vue' because it resolves to a non-module entity"
这给了我一个错误: "Cannot augument module 'vue' because it resolves to a non-module entity"
The original vue typings are located under {projectDir}\node_modules\@types\vue\index.d.ts
.原始的 vue 类型位于{projectDir}\node_modules\@types\vue\index.d.ts
。 I'm using webpack.我正在使用 webpack。
How do I do it properly?我该如何正确地做到这一点?
Assuming your project has tsconfig.json
, you should set following compilerOptions
:假设您的项目有tsconfig.json
,您应该设置以下compilerOptions
:
{
"compilerOptions": {
"baseUrl": ".",
// other options go here
"typeRoots": [
"./node_modules/@types",
"./typings"
]
}
}
Once you do that, create typings/vue
folder relative to tsconfig.json
and the path you mentioned.完成此操作后,创建相对于tsconfig.json
和您提到的路径的 typings typings/vue
文件夹。 Inside typings/vue
folder, create index.d.ts
file.在typings/vue
文件夹中,创建index.d.ts
文件。 Typically, your declaration file would look like:通常,您的声明文件如下所示:
import Vue from 'vue';
import { AppStore } from '../../src/store/store';
declare module 'vue/types/vue' {
// Global properties can be declared
// on the `VueConstructor` interface
interface VueConstructor {
// some more augmentation
}
// Properties added to Vue interface are added to Vue instance
interface Vue {
store$: AppStore;
}
}
Prefer this approach over the one that you are trying to do as importing type files doesn't scale really well.比您尝试使用的方法更喜欢这种方法,因为导入类型文件并不能很好地扩展。
Also, with latest Vue.js, you don't need node_modules/@types/vue
declarations.此外,使用最新的 Vue.js,您不需要node_modules/@types/vue
声明。 They are shipped as part of official node_modules/vue
package.它们作为官方node_modules/vue
包的一部分提供。 If you are doing that then you should delete those.如果你这样做,那么你应该删除那些。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.