typescript - Vue CLI 3 typescript - 类型“Vue”上不存在属性“x”
问题描述
我有这个没有意义的奇怪错误。意思是isGenre
type 上不存在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
}
}
解决方案
推荐阅读
- python - “?”是什么意思?在张量流中?
- javascript - 在 netlify 上部署反应应用程序后 HTTP GET 响应 304 状态错误
- python - 合并数组和绘图
- maven - 无法使用 Maven jar 插件添加资源
- ios - 使用静态变量引用 viewContext 以实现 iOS 9 和 iOS 10 Swift 4 的核心数据
- json - 如何从 json 文件中获取标签并将它们附加到图像
- php - 在 WooCommerce 管理页面中仅显示本地订单
- c# - SemaphoreSlim.WaitAsync 如何允许顺序执行异步函数?
- reactjs - 创建一个抽象逻辑的组件(从现有代码)
- android - 如何减少在 Android RecyclerVIew 中单击项目时的操作延迟?