Разрешить ошибку" свойство не существует для типа 'Vue'"

Разрешить ошибку" свойство не существует для типа 'Vue'"

07.08.2017 11:20:50 Просмотров 47 Источник

Я использую 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

Является ответом!
may

25.08.2017 11:19:38

вы должны сделать объявление для импорта *.файл vue.

такие как:

vue-file-импорт.д.ТС

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

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;
reggaeguitar

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) }
    })
https://stackoverflow.com/questions/45555089/resolve-property-does-not-exist-on-type-vue-error/46304393#comment95767446_46304393
Как вы можете считать это улучшением? Какой смысл использовать TS вместо JS?
https://stackoverflow.com/questions/45555089/resolve-property-does-not-exist-on-type-vue-error/46304393#comment95783734_46304393
TypeScript дает вам ошибки времени компиляции вместо ошибок времени выполнения из-за безопасности типа. Он также добавляет вещи, которые js не имеет, такие как интерфейсы и типы объединения. ИМО это намного, намного лучше, чем js.
https://stackoverflow.com/questions/45555089/resolve-property-does-not-exist-on-type-vue-error/46304393#comment95840424_46304393
Это был не мой вопрос.. Если вы сверкаете свой код TS с приведениями "как любой", то безопасность типа является недействительной, а смысл использования TS-нулевым.
https://stackoverflow.com/questions/45555089/resolve-property-does-not-exist-on-type-vue-error/46304393#comment95886724_46304393
Это верно в этом маленьком случае, я не думаю, что только потому, что в главном новом заявлении Vue есть два "anys", не стоит использовать TS. Это вина Vue за то, что у него нет файлов объявлений для этого (я не смотрел на Vue некоторое время, хотя они могут быть у них сейчас).
ArniqueMK

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

Buksy

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.
  }
}
Eureka

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".

Закрыть X