Vue CLI 3 typescript - 类型“Vue”上不存在属性“x”

Posted 2023-02-22

【中文标题】Vue CLI 3 typescript - 类型“Vue”上不存在属性“x”

【英文标题】：Vue CLI 3 typescript - Property 'x' does not exist on type 'Vue'

【发布时间】：2019-03-07 15:39:39

【问题描述】：

我有一个没有意义的奇怪错误。是说isGenre在Vue类型上不存在，但ìsGenre实际上是一个计算属性

<script lang="ts">
import Vue from 'vue'

import  WIDTH_TWO_ICONS  from '@/const/tables-style'

export default Vue.extend(
    props: 
        list: Array,
        listType: String
    ,
    data: () => ( WIDTH_TWO_ICONS ),
    computed: 
        isGenre(): boolean 
            return this.listType === 'genre'
        ,
        isMood(): boolean 
            return this.listType === 'mood'
        
    ,
    methods: 
        routerLink(paramsId: number): object 
            return  name: 'GenreOrMoodEdit', params:  id: paramsId , query:  type: this.isGenre ? 'genre' : 'mood'  
        
    
)
</script>

错误

59:93 Property 'isGenre' does not exist on type 'Vue'.
    57 |     methods: 
    58 |         routerLink(paramsId: number): object 
  > 59 |             return  name: 'GenreOrMoodEdit', params:  id: paramsId , query:  type: this.isGenre ? 'genre' : 'mood'  
       |                                                                                             ^
    60 |         
    61 |     
    62 | )

Main.ts

declare module 'vue/types/vue' 
    // Global properties can be declared
    // on the `VueConstructor` interface
    interface VueConstructor 
        $axios: any
        router: any
    
    interface Vue 
        $axios: any
        router: any
    


import Vue from 'vue'
import App from './App.vue'
import router from '@/router'
import store from '@/store'
import './registerServiceWorker'
import '@/plugins'
import '@/directives'

import '@/sass/main.sass'

Vue.config.productionTip = false

new Vue(
    router,
    store,
    render: h => h(App)
).$mount('#app')

Tsconfig.js

    "compilerOptions": 
        "target": "esnext",
        "module": "esnext",
        "strict": true,
        "jsx": "preserve",
        "importHelpers": true,
        "moduleResolution": "node",
        "esModuleInterop": true,
        "allowSyntheticDefaultImports": true,
        "sourceMap": true,
        "strictNullChecks": false,
        "baseUrl": ".",
        "types": ["node", "mocha", "chai"],
        "paths": 
            "@/*": ["src/*"]
        ,
        "lib": ["esnext", "dom", "dom.iterable", "scripthost"]
    ,
    "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "tests/**/*.ts", "tests/**/*.tsx"],
    "exclude": ["node_modules"],
    "files": ["src/interfaces/*"]

Tslint.js

    "defaultSeverity": "warning",
    "extends": ["tslint:recommended"],
    "linterOptions": 
        "exclude": ["node_modules/**", "./src/assets/icons/*"]
    ,
    "rules": 
        "quotemark": [true, "single", "avoid-escape"],
        "arrow-parens": false,
        "semicolon": false,
        "object-literal-sort-keys": false,
        "max-line-length": [true, 160],
        "ordered-imports": false,
        "interface-name": false,
        "trailing-comma": false,
        "no-unused-expression": true,
        "object-literal-shorthand": false,
        "curly": false,
        "no-console": false
    

【问题讨论】：

您的方法返回类型/签名看起来与此示例中的不同 ***.com/a/44350932/3254405 并且第一个示例使用函数关键字可以尝试这种方式..

我可以去掉返回类型并且错误不会消失

你可以定义一个接口：github.com/vuejs/vue/issues/8406#issuecomment-419605178

我觉得没有必要，我应该能够访问计算属性，而不必为每个属性定义接口。事实上，我可以在代码的其他地方访问计算属性而不会出现问题

【参考方案1】：

问题是您将 list 属性定义为 Array。

Array 是 ArrayConstructor 类型的别名。

ArrayConstructor的构造函数返回Array<any>，与ArrayConstructor不同。

解决方法：

为list 属性创建一个接口。

即。

list 将是 Item 的数组。

interface Item  ... 

将Array 强制转换为返回接口的函数。

props: 
  list: Array as () => Item[],

【讨论】：

我用itemsList: type: Array as PropOptions<IGenre[] | IMood[]> 修复了它，它似乎已经解决了这个问题，虽然我仍然不明白，因为计算引用的是其他道具，而不是“列表”（或不是 itemsList )

遗憾的是，即使计算的属性没有使用 list 属性，它也会中断。只要确保投射任何类型为Array 的道具。如果我没记错的话，有一个 PR 公开了 Prop 而不是 PropOptions 来解决这个问题，但它还没有被合并。希望使用完全用 TypeScript 编写的 Vue 3，这类事情会得到更多关注。