I am working on a Vuejs project in Typescript. The project compiles and runs perfectly without any errors. However, I am facing an issue with the TS linter.
In my individual component files, I am using the component decorator as shown below:
//videocard.component.vue
<script lang="ts">
import Vue from 'vue';
import { Component, Prop } from 'vue-property-decorator';
import { Video } from '../interfaces/video.interface';
@Component
export default class VideoCardComponent extends Vue {
@Prop() readonly video: Video;
@Prop() readonly loading: boolean;
created(){
console.log(this.static_url); // !COMPLAINS HERE!
}
get _video(){
return this.video
}
get _loading(){
return this.loading || false;
}
}
</script>
One thing to note is that when trying to log out a property called static_url, it works fine because I have set this property in my app.ts file like this:
//app.ts
Vue.prototype.static_url = (window as any).static_url;
I have added types so that static_url is recognized as a property on Vue, in a file like this:
// static_url.d.ts
import Vue from 'vue';
declare module 'vue/types/vue' {
interface Vue {
static_url: string;
}
interface VueConstructor {
static_url: string
}
}
The issue I'm facing is that Typescript does not recognize this property in the component files, even though it doesn't raise any complaints in the app.ts file. Why doesn't Typescript acknowledge this property in the component files?
Just for reference, here is the content of my tsconfig.json file:
{
"compilerOptions": {
"target": "es5",
"lib": ["esnext", "dom"],
"strict": true,
"module": "es2015",
"noImplicitAny": false,
"moduleResolution": "node",
"experimentalDecorators": true,
"strictPropertyInitialization": false
},
"include": [
"assets/js/video-app/src/**/*.ts",
"assets/js/video-app/src/**/*.d.ts",
]
}