Ich erstelle eine Vue-Komponente

Aber ich erhalte die folgende Fehlermeldung

Typanmerkungen können nur in TypeScript-Dateien verwendet werden.

Wenn ich die Typklausel entferne, erhalte ich

Fehlender Rückgabetyp für Funktion.

Die Komponente sieht so aus:

Ich schätze, ich habe einen Konflikt in den Prettier- und Eslints-Konfigurationen, also sieht der eine Vue als TS-kompatibel an und der andere nicht

Ich habe verschiedene Optimierungen und Änderungen ausprobiert, aber bisher keinen Unterschied. Kann mir also jemand die richtige Konfiguration nennen, um das Problem zu beheben?

tsconfig.json

{ „compilerOptions“: { „target“: „esnext“, „module“: „esnext“, „streng“: wahr, „jsx“: „bewahren“, „importHelpers“: wahr, „moduleResolution“: „node“, „experimentalDecorators“: wahr, „skipLibCheck“: wahr, „esModuleInterop“: true, „allowSyntheticDefaultImports“: true, „sourceMap“: wahr, „baseUrl“: „.“, "Typen": [ „webpack-env“ ], "Pfade": { "@/*": [ „src/*“ ] }, "lib": [ „esnext“, „dom“, „dom.iterable“, "Script host" ] }, "enthalten": [ "src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "tests/**/*.ts", "tests/**/*.tsx" ], „ausschließen“: [ „node_modules“ ] }

babel.config.js

module.exports = { Voreinstellungen: ["@vue/cli-plugin-babel/preset"], };

设置，json

{ „editor.insertSpaces“: false, „editor.minimap.enabled“: false, „files.eol“: „n“, „workbench.sideBar.location“: „rechts“, „php-cs-fixer.executablePath“: „${extensionPath}php-cs-fixer.phar“, "Start": { "Konfigurationen": [], „Verbindungen“: [] }, „debug.javascript.usePreview“: false, "window.zoomLevel": 3, „eslint.format.enable“: wahr }

package.json

{ "Abhängigkeiten": { „core-js“: „^3.6.5“, "vue": "^3.0.0", „vue-class-component“: „^8.0.0-0“ }, „devDependencies“: { „@typescript-eslint/eslint-plugin“: „^4.18.0“, „@typescript-eslint/parser“: „^4.18.0“, „@vue/cli-plugin-babel“: „~4.5.0“, „@vue/cli-plugin-eslint“: „~4.5.0“, „@vue/cli-plugin-typescript“: „~4.5.0“, „@vue/cli-service“: „~4.5.0“, „@vue/compiler-sfc“: „^3.0.0“, „@vue/eslint-config-prettier“: „^6.0.0“, „@vue/eslint-config-typescript“: „^7.0.0“, "eslint": "^6.7.2", "eslint-plugin-prettier": "^3.3.1", „eslint-plugin-vue“: „^7.0.0“, "prettier": "^2.2.1", „typescript“: „~4.1.5“ }, "eslintConfig": { „root“: wahr, „env“: { „Knoten“: wahr }, "erweitert": [ „plugin:vue/vue3-essential“, „eslint:empfohlen“, „@vue/typescript/recommended“, „@vue/prettier“, „@vue/prettier/@typescript-eslint“ ], "parserOptions": { „ecmaVersion“: 2020 }, "Regeln": {} }, "Browserliste": [ „> 1 %“, „letzte 2 Versionen“, "nicht tot" ] }