Vue 3 migration: Prop type becomes unknown type

Question

I have migrated the application from Vue 2 to Vue 3 as follows: https://www.vuemastery.com/blog/vue-3-migration-build/. I'm having an issue related to props and their types. According to "linter" it seems that the type of all props is unknown. Because it won't show any errors on the template itself.

For example. I have a property "cancelText" which is defined as follows:

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

Then I use this prop in a computed property like this:

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

When I hover over the variable it shows the type, so it seems to understand what type it is:

But while serving the application, I get this error inside the terminal

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

Either some packages are incompatible, or some linting rules need to be updated specifically for Vue 3.

Here are the dependencies I'm using:

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

Here are the eslint rules:

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

try

this.$t("") as string

If you want to migrate to vue 3, please use compose/vue, because many plugins have officially stopped supporting legacy APIs, such as vue-auth3, vue-i18n, etc. this.$t