Penghijrahan Vue 3: Jenis prop menjadi jenis yang tidak diketahui

Question

Saya telah memindahkan aplikasi dari Vue 2 ke Vue 3 seperti berikut: https://www.vuematery.com/blog/vue-3-migration-build/. Saya menghadapi masalah berkaitan prop dan jenisnya. Menurut "linter" nampaknya jenis semua prop tidak diketahui. Kerana ia tidak akan menunjukkan sebarang ralat pada templat itu sendiri.

Sebagai contoh. Saya mempunyai sifat "cancelText" yang ditakrifkan seperti berikut:

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

Kemudian saya menggunakan prop ini dalam harta yang dikira seperti ini:

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

Apabila saya menuding pada pembolehubah ia menunjukkan jenisnya, jadi nampaknya ia memahami jenisnya:

Tetapi semasa menyampaikan aplikasi, saya mendapat ralat ini di dalam terminal

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

Sama ada sesetengah pakej tidak serasi atau beberapa peraturan linting perlu dikemas kini khusus untuk Vue 3.

Berikut ialah kebergantungan yang saya gunakan:

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

Berikut adalah peraturan 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

Cubalah

this.$t("") as string

Jika anda berhijrah ke vue 3, sila gunakan karang/vue kerana banyak pemalam telah berhenti menyokong API lama secara rasmi, seperti vue-auth3, vue-i18n, dll. this.$t