Typescript Vue CLI 3类型脚本-属性'；x'；不存在于类型'；Vue'；

我有一个奇怪的错误，毫无意义。这意味着类型

Vue

上不存在

isGenre

，但

ì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>

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')

{
    "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/*"]
}

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

Tsconfig.js

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')

{
    "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/*"]
}

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

Tslint.js

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')

{
    "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/*"]
}

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

---

问题是您正在将

列表

道具定义为

数组

Array

是

ArrayConstructor

类型的别名

ArrayConstructor

的构造函数返回

Array

，这与

ArrayConstructor

不同

解决方法：

为

列表

属性创建一个接口

即

列表

将是

项的数组

interface Item { ... }

将

数组

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

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

---

您的方法返回类型/签名看起来与本例不同，而且第一个示例使用function关键字可能是这样尝试..我可以删除返回类型并且错误不会消失您可以定义一个接口：我发现它非常不必要，我应该能够访问计算属性，而不必为每个属性定义接口。。事实上，我可以访问代码中其他地方的计算属性，而不会出现任何问题。我用

itemsList:{type:Array}as PropOptions

修复了它，它似乎已经修复了这个问题，尽管我仍然不理解它，因为计算机引用的是其他道具，而不是“list”（或者不是itemsList），即使计算属性未使用

列表

属性，它也会中断。只需确保投射任何类型为

阵列的道具即可。如果我没有弄错的话，有一个PR公开了
Prop
而不是
PropOptions
来解决这个问题，但是它没有被合并。希望有了VUE3，它将完全用TypeScript编写，这类事情将得到更多的关注。