web-dev-qa-db-fra.com

Résoudre l'erreur "La propriété n'existe pas sur le type 'Vue'"

J'utilise TypeScript avec Vuejs pour créer une application. J'ai plusieurs fichiers de composants autonomes (.vue) que j'importe dans un fichier TypeScript (.ts). Dans le fichier TypeScript, j'importe Vue à partir de la bibliothèque npm Vue puis je crée un nouveau Vue pour afficher mon L'erreur que je vois est:

La propriété x n'existe pas sur le type 'Vue'

Mon système de construction est Webpack avec tsc. Pourquoi ai-je cette erreur et comment puis-je la résoudre?

main.ts

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.config.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')
    }
}
typescriptwebpackvue.jsvuejs2vue-component
13
Tim Hutchison

vous devez créer un fichier de déclaration d'importation * .vue.

tel que:

vue-file-import.d.ts

declare module "*.vue" {
   import Vue from "vue";
   export default Vue;
}
3
may

J'essayais de suivre cette page https://vuejs.org/v2/guide/routing.html et obtenais les mêmes erreurs TypeScript, je l'ai corrigée en lançant le Vue instance pour taper tout comme ceci

    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) }
    })
3
reggaeguitar

J'ai eu les mêmes erreurs avec vue 2.8.2 et TypeScript 2.5.3. Je l'ai corrigé en maintenant mon Vue instance dans une variable puis en lui donnant un type Cela garantit que TS connaîtra toutes les propriétés Vue lorsque vous l'installez à l'aide d'un objet options.

var VueApp: any = Vue;

var App = new VueApp({
  el: "#app",
  data() {
     return {
        count: 0
     }
  },
  methods:{
    initialize() {
      this.count = count + 1; // Should work now
    }
  }
})
1
ArniqueMK

J'ai rencontré des problèmes similaires (en particulier dans les fichiers .vue). J'ai cependant constaté que cela semblait résoudre le problème. Partout où vous importez des fichiers .vue, modifiez le style ES6 "import" en "require" à la place.

Donc, dans votre exemple, changez:

import Competency from '../components/competency.vue';

à...

declare var require: any;
var Competency = require("../components/competency.vue").default;
0
PuncrOc