Vue 3遷移：Prop類型變成未知類型

Question

我已經將應用程式從 Vue 2 遷移到 Vue 3，如下：https://www.vuemastery.com/blog/vue-3-migration-build/。我遇到了與道具及其類型相關的問題。根據“linter”，似乎所有道具的類型都是未知的。因為它不會在模板本身上顯示任何錯誤。

例如。 我有一個屬性“cancelText”，定義如下：

cancelText: {
            type: String as PropType<string>,
            default: "",
        },

然後我在計算屬性中使用這個 prop，如下所示：

cancelButtonText(): string {
            return this.cancelText || this.$t("PRODUCT.ACTION_BAR.BACK");
        },

當我將滑鼠懸停在變數上時，它會顯示類型，因此它似乎了解它是什麼類型：

但是在為應用程式提供服務時，我在終端內收到此錯誤

TS2322: Type 'unknown' is not assignable to type 'string'.

要嘛某些套件不相容，要嘛需要專門針對 Vue 3 更新某些 linting 規則。

這是我正在使用的依賴項：

"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"
},

這裡是 eslint 規則：

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

Answer 1

嘗試

this.$t("") as string

如果您要移轉到 vue 3，請使用compose/vue，因為許多外掛程式已正式停止支援舊版 API，例如 vue-auth3、vue-i18n 等 this.$t

#