Vue 3遷移：Prop類型變成未知類型
我已經將應用程式從 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,
},
},
],};