Vue with Typescript type check of props on compile time

Question

I'm using Vue.js with Typescript. the code is simple. (with vue-class-component and vue-property-decorator)

<script lang="ts">
    import { Component, Prop, Vue } from 'vue-property-decorator';

    @Component
    export default class Child extends Vue {
        @Prop(String) private value!: string;
    }
</script>

Of course, if I pass string as props to Child component, it works without warning or error. And then passing number, it shows warning on runtime as below.

But No errors on compiling. Is there any way to check the types on "COMPILE" time?

Answer 1

Transforming a comment into an answer...

When I had a similar problem it was related to how vue handle passing props to the component from template. if you use value="1" a string is passed, if you use :value="1" then a number is passed. This is indeed confusing and you only see it in runtime because the template is not compiled.