Vue 3迁移：Prop类型变为未知类型-PHP中文网问答

我已经将应用程序从 Vue 2 迁移到 Vue 3，如下：https://www.vuemastery.com/blog/vue-3-migration-build/。我遇到了与道具及其类型相关的问题。根据“linter”，似乎所有道具的类型都是未知的。因为它不会在模板本身上显示任何错误。

例如。我有一个属性“cancelText”，其定义如下：

cancelText: {
            type: String as PropType,
            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 `
            
            
            
            
            
            
            
            
            
            
            
            

            
                
                    
                    
                        P粉546138344
                        
                    
                
                
                    
                    
                        
                            
                        
                    
                
            
            
                
                    全部回复(1)
                    
                
                

                                
                    
                    
                        
                            
                                P粉9464374742024-03-28 12:52:14
                                1楼
                            
                            尝试
this.$t("") as string
如果您要迁移到 vue 3，请使用compose/vue，因为许多插件已正式停止支持旧版 API，例如 vue-auth3、vue-i18n 等 this.$t
                            
                                 
                                赞 +0
                                
                                    添加回复
                                
                            
                                                            
                                    
                                        
                                            
                                                
                                                P粉546138344