Migration Vue 3 : le type d'accessoire devient un type inconnu

Question

J'ai migré l'application de Vue 2 vers Vue 3 comme suit : https://www.vuemastery.com/blog/vue-3-migration-build/. J'ai un problème lié aux accessoires et à leurs types. D'après "linter", il semble que le type de tous les accessoires soit inconnu. Parce qu'il n'affichera aucune erreur sur le modèle lui-même.

Par exemple. J'ai une propriété "cancelText" qui est définie comme suit :

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

Ensuite, j'utilise cet accessoire dans une propriété calculée comme celle-ci :

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

Lorsque je survole la variable, elle affiche le type, elle semble donc comprendre de quel type il s'agit :

Mais pendant le service de l'application, j'obtiens cette erreur dans le terminal

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

Soit certains packages sont incompatibles, soit certaines règles de peluchage doivent être mises à jour spécifiquement pour Vue 3.

Voici les dépendances que j'utilise :

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

Voici les règles d'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

Essayez-le

this.$t("") as string

Si vous migrez vers vue 3, veuillez utiliser compose/vue car de nombreux plugins ont officiellement cessé de prendre en charge les API existantes, telles que vue-auth3, vue-i18n, etc. this.$t