Ich habe die Anwendung wie folgt von Vue 2 auf Vue 3 migriert: https://www.vuemastery.com/blog/vue-3-migration-build/. Ich habe ein Problem im Zusammenhang mit Requisiten und ihren Typen. Laut „Linter“ scheint die Art aller Requisiten unbekannt zu sein. Weil in der Vorlage selbst keine Fehler angezeigt werden.
Zum Beispiel. Ich habe eine Eigenschaft „cancelText“, die wie folgt definiert ist:
cancelText: {
type: String as PropType<string>,
default: "",
},
Dann verwende ich diese Requisite in einer berechneten Eigenschaft wie dieser:
cancelButtonText(): string {
return this.cancelText || this.$t("PRODUCT.ACTION_BAR.BACK");
},
Wenn ich mit der Maus über die Variable fahre, wird der Typ angezeigt, sodass ich zu verstehen scheint, um welchen Typ es sich handelt:
Aber während ich die Anwendung bereitstelle, erhalte ich diese Fehlermeldung im Terminal
TS2322: Type 'unknown' is not assignable to type 'string'.
Entweder sind einige Pakete inkompatibel oder einige Linting-Regeln müssen speziell für Vue 3 aktualisiert werden.
Hier sind die Abhängigkeiten, die ich verwende:
"dependencies": {
"@fortawesome/fontawesome-pro": "^5.15.3",
"@fortawesome/fontawesome-svg-core": "^1.2.35",
"@fortawesome/free-brands-svg-icons": "5.14.0",
"@fortawesome/pro-regular-svg-icons": "^5.15.3",
"@fortawesome/vue-fontawesome": "^2.0.2",
"@sentry/browser": "^6.6.0",
"@sentry/integrations": "^6.6.0",
"@sentry/tracing": "^6.6.0",
"@vue/compat": "3.2.36",
"ant-design-vue": "^2.2.8",
"axios": "^0.21.1",
"jest": "^26.6.3",
"normalize.css": "^8.0.1",
"register-service-worker": "^1.7.1",
"uuid": "^8.3.2",
"vue": "^3.2.36",
"vue-cookies": "^1.8.1",
"vue-flag-icon": "^1.0.6",
"vue-i18n": "^9.1.10",
"vue-router": "^4.0.15",
"vue3-touch-events": "^4.1.0",
"vuex": "^4.0.2"
},
"devDependencies": {
"@playwright/test": "^1.15.2",
"@vue/cli-plugin-pwa": "^4.5.13",
"@vue/cli-plugin-typescript": "^5.0.4",
"@vue/cli-service": "^4.5.13",
"@vue/compiler-sfc": "^3.2.36",
"eslint": "^8.16.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-playwright": "^0.9.0",
"eslint-plugin-vue": "^9.1.0",
"html-loader": "^1.3.2",
"jest": "^26.6.3",
"less": "^3.13.0",
"less-loader": "^7.3.0",
"node-sass": "^5.0.0",
"sass-loader": "^10.2.0",
"typescript": "~4.7.2"
},
Hier sind die Eslint-Regeln:
module.exports = {
env: {
browser: true,
es2020: true,
node: true,
},
extends: [
"plugin:playwright/playwright-test",
"plugin:vue/base",
"plugin:vue/essential",
"plugin:vue/strongly-recommended",
"eslint:recommended",
"plugin:@typescript-eslint/recommended",
"prettier",
],
parser: "vue-eslint-parser",
parserOptions: {
sourceType: "module",
parser: {
// Script parser for `<script>`
js: false,
// Script parser for `<script lang="ts">`
ts: "@typescript-eslint/parser",
// Script parser for vue directives (e.g. `v-if=` or `:attribute=`) and vue interpolations (e.g. `{{variable}}`).
// If not specified, the parser determined by `<script lang ="...">` is used.
"<template>": false,
},
},
plugins: ["vue", "@typescript-eslint"],
rules: {
// Custom rules added by us
"no-else-return": "error",
"no-var": "error",
"prefer-const": "error",
"prefer-arrow-callback": "error",
"no-console": "error",
"no-unused-vars": "off",
"@typescript-eslint/no-unnecessary-type-assertion": "warn",
"@typescript-eslint/explicit-module-boundary-types": "off",
"@typescript-eslint/no-unused-vars": [
"warn",
{
vars: "all",
args: "after-used",
ignoreRestSiblings: false,
argsIgnorePattern: "^_",
varsIgnorePattern: "^_",
caughtErrorsIgnorePattern: "^_",
},
],
"vue/no-unused-properties": [
"warn",
{
groups: ["props", "data", "computed", "methods", "setup"],
deepData: true,
ignorePublicMembers: true,
},
],
"vue/html-self-closing": [
"warn",
{
html: {
void: "always",
},
svg: "always",
math: "always",
},
],
"vue/multiline-html-element-content-newline": "off",
"vue/html-closing-bracket-newline": "off",
"vue/singleline-html-element-content-newline": "off",
//end of custom rules added by us
"vue/html-indent": "off",
"vue/max-attributes-per-line": "off",
"vue/this-in-template": ["error", "never"],
"vue/attributes-order": [
"error",
{
order: [
"DEFINITION",
"LIST_RENDERING",
"CONDITIONALS",
"RENDER_MODIFIERS",
"GLOBAL",
"UNIQUE",
"TWO_WAY_BINDING",
"OTHER_DIRECTIVES",
"OTHER_ATTR",
"EVENTS",
"CONTENT",
],
alphabetical: false,
},
],
"vue/order-in-components": [
"error",
{
order: [
"el",
"name",
"parent",
"functional",
["delimiters", "comments"],
["components", "directives", "filters"],
"extends",
"mixins",
"inheritAttrs",
"model",
["props", "propsData"],
"data",
"computed",
"watch",
"LIFECYCLE_HOOKS",
"methods",
["template", "render"],
"renderError",
],
},
],
},
overrides: [
{
files: ["**/*.ts"],
parser: "@typescript-eslint/parser",
plugins: ["@typescript-eslint"],
parserOptions: {
tsconfigRootDir: __dirname,
project: "tsconfig.json",
},
extends: [
"plugin:@typescript-eslint/recommended",
// This enables stricter type checking for ts
// "plugin:@typescript-eslint/recommended-requiring-type-checking",
],
rules: {
"@typescript-eslint/no-explicit-any": ["warn", { ignoreRestArgs: false }],
},
},
{
files: ["**/tests/*.{j,t}s?(x)", "**/tests/unit/**/*.spec.{j,t}s?(x)"],
env: {
jest: true,
},
},
],}; 
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
尝试
this.$t("") as string 如果您要迁移到 vue 3，请使用compose/vue，因为许多插件已正式停止支持旧版 API，例如 vue-auth3、vue-i18n 等
this.$t