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

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

유사한 질문에 대한 여러 답변을 읽었지만 대부분의 해결 방법이 부적절한 해결책입니다.의 모든 인스턴스에서 이 오류가 발생하는 이유에 대한 설명/해결 방법을 알고 싶습니다.

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

발생한 컴포넌트(계산 속성을 삭제해도 오류가 발생하지 않습니다):

<template>
  <v-row justify="center">
    <v-dialog id="edit-cattle" v-model="showModal" persistent scrollable max-width="600px">
      <v-card>
        <v-card-title>
          <span class="headline">Edit Cattle</span>
        </v-card-title>
        <v-card-text>
          <v-form v-model="valid">
            <v-container>
              <v-select id="status" :items="statusOptions" label="Status" v-model="client.status"></v-select>
            </v-container>
          </v-form>
        </v-card-text>
      </v-card>
    </v-dialog>
  </v-row>
</template>

<script lang="ts">
import Vue from "vue";
import firebase, { firestore } from "firebase/app";
import constants from "../constants/constants";
import {
  Client,
  ClientLegalType,
  ClientStatus,
  Month,
  ClientBank,
  ClientBankAccountType
} from "../models/client.model";
import helpers from "../helpers/helpers";
import algoliasearch from "algoliasearch";

export default Vue.extend({
  name: "EditClient",
  props: {
    client: Object as () => Client,
    showModalValue: Boolean
  },
  data() {
    return {
      postalSameAsPhysical: false,
      valid: false,
      loading: false,
      registrationDate: (this.client
        ?.registrationDate as firebase.firestore.Timestamp)
        ?.toDate()
        .toISOString()
        .substr(0, 10),
      legalTypeOptions: Object.keys(ClientLegalType).map(value => {
        return { text: helpers.camelToWords(value), value: value };
      }),
      statusOptions: Object.keys(ClientStatus).map(value => {
        return { text: helpers.camelToWords(value), value: value };
      }),
      monthOptions: Object.keys(Month).map(value => {
        return { text: helpers.camelToWords(value), value: value };
      }),
      bankOptions: Object.keys(ClientBank).map(value => {
        return { text: helpers.camelToWords(value), value: value };
      }),
      bankAccountTypeOptions: Object.keys(ClientBankAccountType).map(value => {
        return { text: helpers.camelToWords(value), value: value };
      })
    };
  },
  methods: {
    passData() {
      const updatedClient: Client = {
        ...this.client //Property 'client' does not exist on type 'Vue'
      };
      //Property 'registrationDate' does not exist on type 'Vue'
      if (this.registrationDate) {
        updatedClient.registrationDate = firebase.firestore.Timestamp.fromDate(
          new Date(this.registrationDate)
        );
      }
      console.log("updatedClient: ", updatedClient);
      this.showModal = false; //Property 'showModal' does not exist on type 'Vue'.
      this.$emit("saveData", helpers.undefinedToNull(updatedClient));
    }
  },
  computed: {
    algoliaClient(): any {
      const client = algoliasearch(
        constants.ALGOLIA.APP_ID,
        constants.ALGOLIA.SEARCH_KEY
      );
      return client.initIndex(constants.ALGOLIA.INDEXES.CLIENTS);
    },
    showModal: {
      get(): Boolean {
        return this.showModalValue //Property 'showModalValue' does not exist on type '(() => any) | ComputedOptions<any>'.;
      },
      set(value) {
        this.$emit("updateShowModalValue", value); //Property '$emit' does not exist on type '(() => any) | ComputedOptions<any>'.
      }
    }
  },
});
</script>

구성 파일:

tsconfig.json

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "noImplicitThis": false,
    "sourceMap": true,
    "baseUrl": ".",
    "types": ["webpack-env", "vuetify"],
    "paths": {
      "@/*": ["src/*"]
    },
    "lib": ["esnext", "dom", "dom.iterable", "scripthost"]
  },
  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "tests/**/*.ts", "tests/**/*.tsx"],
  "exclude": ["node_modules"]
}

패키지.json

{
  "name": "xxx",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "algoliasearch": "^4.4.0",
    "core-js": "^3.6.5",
    "eslint-config-prettier": "^6.11.0",
    "firebase": "^7.19.1",
    "moment": "^2.27.0",
    "register-service-worker": "^1.7.1",
    "vue": "^2.6.11",
    "vue-router": "^3.2.0",
    "vuetify": "^2.2.11",
    "vuex": "^3.4.0"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^2.33.0",
    "@typescript-eslint/parser": "^2.33.0",
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-pwa": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-typescript": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/eslint-config-prettier": "^6.0.0",
    "@vue/eslint-config-typescript": "^5.0.2",
    "eslint": "^6.7.2",
    "eslint-plugin-prettier": "^3.1.3",
    "eslint-plugin-vue": "^6.2.2",
    "prettier": "^1.19.1",
    "sass": "^1.19.0",
    "sass-loader": "^8.0.0",
    "typescript": "~3.9.3",
    "vue-cli-plugin-vuetify": "~2.0.7",
    "vue-template-compiler": "^2.6.11",
    "vuetify-loader": "^1.3.0"
  }
}

eslintrc.syslog

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    'plugin:vue/essential',
    'eslint:recommended',
    '@vue/typescript/recommended',
    '@vue/prettier',
    '@vue/prettier/@typescript-eslint',
  ],
  parserOptions: {
    ecmaVersion: 2020,
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
  },
};

shims-tsx.d.ts

import Vue, { VNode } from "vue";

declare global {
  namespace JSX {
    // tslint:disable no-empty-interface
    interface Element extends VNode {}
    // tslint:disable no-empty-interface
    interface ElementClass extends Vue {}
    interface IntrinsicElements {
      [elem: string]: any;
    }
  }
}

shims-vue.d.ts

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

컴포넌트(특히 TypeScript)에서 컴포넌트에 가져올 소품 값을 입력하고 기본값을 설정하는 것이 좋습니다.

여기서의 문제는 계산된 속성의 유형 정의 때문에 false를 반환할 것으로 예상되지만showModalValueprop에는 기본값이 없습니다.그래서 처음에는undefined플레인 javascript가 정의되지 않은 경우 falsey이지만 TypeScript에서는 그렇지 않습니다.

기본적으로 프로펠러 설정false에러는 없어져야 합니다.

같은 문제가 있었습니다만, 같은 방법으로 쓰여져 있어도, 몇개의 컴포넌트 중 하나에 한정되어 있습니다.이상하다.

나는 마침내 그것을 수정했다.options전달된 오브젝트Vue.extend와 함께ThisTypedComponentOptionsWithRecordProps<Vue, DefaultData<any>, DefaultMethods<any>, DefaultComputed, DefaultProps>.

import Vue from "vue";
import {
  DefaultComputed,
  DefaultData,
  DefaultMethods,
  DefaultProps,
  ThisTypedComponentOptionsWithRecordProps
} from "vue/types/options";

Vue.extend({
  ...
} as ThisTypedComponentOptionsWithRecordProps<Vue, DefaultData<any>, DefaultMethods<any>, DefaultComputed, DefaultProps>)

언급URL : https://stackoverflow.com/questions/63646553/property-x-does-not-exist-on-type-vue