Encountering a strange error that is puzzling. The error message indicates that isGenre is not recognized as a property of type Vue, even though isGenre is clearly defined as a computed property.
<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>
Error Report
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
}
}