我正在使用带有Vuejs的Typescript来构建应用程序。我有几个独立的组件（.vue）文件，我将其导入到Typescript（.ts）文件中。在Typescript文件中，我从npm Vue库导入Vue，然后创建一个新的Vue来显示我的组件。我看到的错误是：
属性x在类型＆＃39; Vue＆＃39;
上不存在
我的构建系统是带有tsc的Webpack。为什么我会收到此错误，如何解决？
import Vue from 'vue';
import Competency from '../components/competency.vue';
new Vue({
el: "#app",
components: {
'competency': Competency
},
data:{
count: 0
},
methods:{
initialize: function(){
this.count = count + 1; // Errors here with Property count does not exist on type vue
}
}
})
{
"compilerOptions": {
// "allowJs": true,
"allowSyntheticDefaultImports": true,
"experimentalDecorators": true,
"lib": [
"es2015",
"dom",
"es2015.promise"
],
"module": "es2015",
"moduleResolution": "node",
"noEmitOnError": true,
"noImplicitAny": false,
//"outDir": "./build/",
"removeComments": false,
"sourceMap": true,
"target": "es5"
},
"exclude": [
"./node_modules",
"wwwroot",
"./Model"
],
"include": [
"./CCSEQ",
"./WebResources"
]
}
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
entry: {
Evaluations: './WebResources/js/main.ts'
},
devServer: {
contentBase: './dist'
},
module: {
rules: [{
test: /\.ts$/,
exclude: /node_modules|vue\/src/,
loader: 'ts-loader',
exclude: /node_modules/,
options: {
appendTsSuffixTo: [/\.vue$/]
}
},
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
esModule: true
}
},
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /\.(png|svg|jpg|gif)$/,
use: [
'file-loader'
]
},
]
},
resolve: {
extensions: [".tsx", ".ts", ".js"],
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
},
plugins: [
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
filename: 'Evaluations.html',
template: './WebResources/html/Evaluations.html'
}), new HtmlWebpackPlugin({
filename: 'ExpenseUpload.html',
template: './WebResources/html/ExpenseUpload.html'
}), new webpack.optimize.CommonsChunkPlugin({
name: 'WebAPI'
})
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
}
答案 0 :(得分：3)
VUE文件-import.d.ts
declare module "*.vue" {
import Vue from "vue";
export default Vue;
}
答案 1 :(得分：2)
我试图关注此页https://vuejs.org/v2/guide/routing.html并获得相同的TypeScript错误，我通过将Vue实例强制转换为类似任何类型来修复它
new Vue({
el: '#app',
data: {
currentRoute: window.location.pathname
},
computed: {
ViewComponent() {
return routes[(this as any).currentRoute] || routes['/']
}
},
render (h) { return h((this as any).ViewComponent) }
})
答案 2 :(得分：1)
我在vue 2.8.2和Typescript 2.5.3中遇到了同样的错误。我通过将Vue实例保存在变量中然后给它一个类型来修复它。这可以确保TS在使用选项对象进行实例化时了解所有Vue属性。
var VueApp: any = Vue;
var App = new VueApp({
el: "#app",
data() {
return {
count: 0
}
},
methods:{
initialize() {
this.count = count + 1; // Should work now
}
}
})
答案 3 :(得分：1)
添加另一个答案，以汇总您可能需要修复的几件事。
两者都
import Competency from '../components/competency';
和
import Competency from '../components/competency.vue';
可以编译成功，第二个将有助于避免在某些IDE（例如VS Code）中出现错误。
正如@May指出的那样，您需要一个文件，该文件可以导入和重新导出“ Vue”类型。在@May的答案中，它名为vue-file-import.d.ts，但在Internet上的其他地方通常称为vue-shim.d.ts。无论名称如何，所需内容都是相同的：
// vue-file-import.d.ts
declare module "*.vue" {
import Vue from "vue";
export default Vue;
}
最初，我将其放在“ / src”中。我发现这产生了奇怪的影响。有时它起作用，即VS Code错误消息消失了；而其他时候没有，他们又出现了。当我在编辑不同文件的项目中移动时，这是动态发生的。
我后来发现建议使用内容相同的填充文件，但将其放置在“ / typings”中。我尝试了一下，它一直有效。其他人似乎对“ / src”位置非常满意。
答案 4 :(得分：1)
我有同样的问题，但导出组件。 一些 vs 代码片段创建模板没有必要的错字，如下所示
export default {
data() {
return {
x: "something",
};
},
methods: {
rename(name: string) {
this.x = name;
},
},
};
问题是我没有添加 defineComponent 来导出默认值。所以应该
import { defineComponent } from "vue";
export default defineComponent({
data() {
return {
x: "something",
};
},
methods: {
rename(name: string) {
this.x = name;
},
},
});
确保使用defineComponent()函数导出组件
答案 5 :(得分：1)
不要使用任何
改用Object.assign(vm, source);
喜欢
const source= {count: this.count }
Object.assign(this, source);
答案 6 :(得分：0)
我遇到了类似的问题（特别是在.vue文件中）。我确实发现这似乎解决了问题。在任何地方导入.vue文件，更改ES6样式＆＃34;导入＆＃34;要求＆＃34;要求＆＃34;代替。
所以在你的例子中，改变：
import Competency from '../components/competency.vue';
为...
declare var require: any;
var Competency = require("../components/competency.vue").default;
答案 7 :(得分：0)
我建议在使用打字稿（have a look at this "Writing Class-Based Components with Vue.js and TypeScript"）时使用基于类的组件。这是拥有类型安全代码并使用IDE的自动完成功能的唯一方法
以下是基于类的组件的示例：
import { Component, Vue, Watch } from 'vue-property-decorator'
@Component({
props: {
prop1: { type: Number }
}
})
export default class MyComponent extends Vue {
// This is how you define computed
get myComputedRoute() {
return this.$route.params;
}
@Watch('myComputedRoute')
onPropertyChanged(value: string, oldValue: string) {
// Do stuff with the watcher here.
}
}
答案 8 :(得分：0)
尝试使用Typescript的泛型。参见https://www.typescriptlang.org/docs/handbook/generics.html
new Vue<{ count: number }, { initialize: () => void }, {}, {}>({
//...
data:{
count: 0
},
methods:{
initialize: function() {
this.count = count + 1;
},
}
});