Разрешить ошибку" свойство не существует для типа 'Vue'"
Я использую Typescript с Vuejs для создания приложения. У меня есть несколько автономных компонентов (.vue) файлы, которые я импортирую в Typescript (.ts) файл. В файле Typescript я импортирую Vue из библиотеки npm Vue, а затем создаю новый Vue для отображения моих компонентов. Ошибка, которую я вижу, это:
Свойство x не существует для типа 'Vue'
Моя система сборки-Webpack с tsc. Почему я получаю эту ошибку и как я могу ее устранить?
главный.тс
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
}
}
})
tsconfig
{
"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"
]
}
webpack.конфиг.JS
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')
}
}
Ответы - Разрешить ошибку" свойство не существует для типа 'Vue'" / Resolve "Property does not exist on type 'Vue'" error
14.09.2017 02:05:56
Я столкнулся с подобными проблемами (особенно в г.Vue files). Однако я обнаружил, что это, казалось, решило проблему. Везде, куда вы импортируете .файлы vue, измените стиль ES6 "import" на "require" вместо этого.
Итак, в вашем примере измените:
import Competency from '../components/competency.vue';
к...
declare var require: any;
var Competency = require("../components/competency.vue").default;
19.09.2017 06:31:06
Я пытался следить за этой страницей 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) }
})
30.09.2017 04:49:57
Я получил те же ошибки с vue 2.8.2 и Typescript 2.5.3. Я исправил это, удерживая мой экземпляр Vue в переменной, а затем давая ему тип. Это гарантирует, что TS будет знать обо всех свойствах Vue, когда вы создадите его с помощью объекта options.
var VueApp: any = Vue;
var App = new VueApp({
el: "#app",
data() {
return {
count: 0
}
},
methods:{
initialize() {
this.count = count + 1; // Should work now
}
}
})12.10.2019 02:01:20
Я предлагаю использовать компоненты на основе классов при использовании typescript ( посмотрите на это "написание компонентов на основе классов с помощью Vue.js и машинопись" ). Это единственный способ иметь типобезопасный код и использовать функцию автозаполнения IDE
Вам необходимо установить vue-property-decorator
Вот пример компонента на основе класса:
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.
}
}
05.01.2020 04:17:47
Добавляя еще один ответ, чтобы свести воедино несколько вещей, которые вам, возможно, потребуется исправить.
Убедитесь, что вы включили".расширение vue" в импортируемом файле
В то время как
import Competency from '../components/competency';
и
import Competency from '../components/competency.vue';
если компиляция прошла успешно, то вторая поможет избежать появления ошибки в некоторых IDE, таких как VS-код.
Добавление файла типов прокладок
Как @May указывал выше, вам нужен файл, который импортирует и реэкспортирует тип "Vue". В ответе @May он называется Vue-file-import.d. ts, но в других местах в интернете его обычно называют vue-shim.д.ТС. Независимо от названия, содержимое должно быть одинаковым:
// vue-file-import.d.ts
declare module "*.vue" {
import Vue from "vue";
export default Vue;
}
Попробуйте найти файл оболочки в разных местах.
Первоначально я поставил его в "/ src". Я обнаружил, что это произвело странный эффект. Иногда это срабатывало, то есть сообщения об ошибках VS-кода исчезали; а в других случаях этого не происходило, они появлялись снова. Это происходило динамически, когда я перемещался по проекту, редактируя различные файлы.
Позже я нашел предложение для файла shim идентичного содержания, но помещенного в "/typings". Я попробовал это, и это сработало последовательно. Другие люди, похоже, вполне довольны расположением "/ src".