"Vue 유형에 속성이 없습니다" 오류 해결

"Vue 유형에 속성이 없습니다" 오류 해결

Vuejs에서 Typescript를 사용하여 애플리케이션을 빌드하고 있습니다.Typescript(.ts) 파일로 Import하는 몇 가지 독립 실행형 구성 요소(.vue) 파일이 있습니다.Typescript 파일에서 Vue를 npm Vue 라이브러리에서 Import한 후 컴포넌트를 표시하는 새로운 Vue를 만듭니다.표시되는 에러는 다음과 같습니다.

속성 x가 'Vue' 유형에 없습니다.

제 빌드 시스템은 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(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.syslog

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 파일 Import를 선언해야 합니다.

예를 들어 다음과 같습니다.

vue-file-import.d.ts

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

저도 같은 문제가 있었지만 부품을 수출하는 데 문제가 있었습니다.일부 vs 코드 스니펫은 다음과 같은 오타가 없어도 템플릿을 만듭니다.

export default {
  data() {
    return {
      x: "something",
    };
  },
  methods: {
    rename(name: string) {
      this.x = name;
    },
    
  },
};

문제는 내보내기 디폴트에 추가하지 않았다는 것입니다.그래야 한다

import { defineComponent } from "vue";

export default defineComponent({
  data() {
    return {
      x: "something",
    };
  },
  methods: {
    rename(name: string) {
      this.x = name;
    },
    
  },
});

define Component() 함수를 사용하여 컴포넌트를 내보냅니다.

수정해야 할 몇 가지 사항을 정리하기 위해 다른 답변을 추가합니다.

Import 하는 파일명에 확장자 「.vue」가 포함되어 있는 것을 확인합니다.

둘 다

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

그리고.

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

컴파일에 성공할 가능성이 있습니다.두 번째 컴파일은 VS 코드 등의 일부 IDE에 표시되는 오류를 회피하는 데 도움이 됩니다.

shim 타이핑 파일 추가

@May가 위에서 지적했듯이 "Vue" 유형을 Import 및 재export하는 파일이 필요합니다.@May의 답변에는 이름이 붙어 있습니다.vue-file-import.d.ts하지만 인터넷 상의 다른 곳에서는 흔히 그것을 이라고 부른다.vue-shim.d.ts. 이름에 관계없이 필요한 콘텐츠는 동일합니다.

// vue-file-import.d.ts

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

shim 파일의 다른 위치를 시험합니다.

원래 넣었는데/src이게 이상한 효과가 있다는 걸 알았어요VS Code 에러 메세지가 없어지거나, 표시되지 않는 경우도 있습니다.이 작업은 여러 파일을 편집하면서 프로젝트를 이동하면서 동적으로 수행되었습니다.

나는 나중에 동일한 내용의 심 파일에 대한 제안을 발견했지만, 그 안에 배치될 것입니다./typings이거 해봤는데 계속 되더라고요.다른 사람들은 이 일에 꽤 만족하는 것 같다./src위치.

이 페이지 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) }
    })

타이프스크립트를 사용할 때는 클래스 베이스의 컴포넌트를 사용하는 것을 추천합니다(이 「Writing Class-Based Components with Vue.js and TypeScript」를 참조해 주세요).이것은 안전 코드를 입력하고 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.
  }
}

(특히 .vue 파일에서) 비슷한 문제가 발생했습니다.하지만 이것으로 문제가 해결된 것 같았습니다..vue 파일을 Import할 경우 대신 ES6 스타일의 "import"를 "require"로 변경하십시오.

이 예에서는 다음과 같이 변경합니다.

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

~에 대해서

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

vue 2.8.2 및 Typescript 2.5.3에서도 동일한 오류가 발생하였습니다.Vue 인스턴스를 변수에 보관하고 유형을 지정하여 수정했습니다.이렇게 하면 옵션 개체를 사용하여 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
    }
  }
})

일절 사용하지 않다

Object.assign(vm, source); 대신에

맘에 들다

const source= {count: this.count }
Object.assign(this, source);

VS Code 에디터를 사용할 때 이 오류가 발생했습니다.

vs 코드에 Vetur 플러그인을 설치했습니다.Vetur는 vue 파일을 typescript 파일로 처리하기 때문에 설정을 편집하도록 수정했습니다.json 파일

프로젝트 루트 디렉토리의 VS 에디터에서 이 파일을 찾은 후 다음과 같이 변경하십시오.

"vetur.experimental.templateInterpolationService": false

난 괜찮아

같은 문제가 있다.해결책은 각 계산된 변수에 반환 유형을 추가하는 것입니다.

이 코드로부터의 문제이며, 반환 타입은 없습니다.

      computed: {
containerClass() {
    return this.isLastChild
  }

add return type String 을 입력합니다.

  computed: {
containerClass(): String {
    return this.isLastChild
  }

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

언급URL : https://stackoverflow.com/questions/45555089/resolve-property-does-not-exist-on-type-vue-error