javascript - Vue 在编译时使用 Typescript 类型检查 Prop

Question

我将 Vue.js 与 Typescript 结合使用。 代码很简单。 (使用 vue-class-component 和 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>

当然，如果我将字符串作为 props 传递给子组件，它会在没有警告或错误的情况下工作。然后传递数字，它会在运行时显示警告，如下所示。

但是编译没有错误。有什么方法可以检查“编译”时间的类型吗？

Answer 1

将评论转化为答案...

当我遇到类似的问题时，它与 vue 如何处理从模板向组件传递 Prop 有关。如果您使用 value="1"则传递一个字符串，如果您使用 :value="1"则传递一个数字。这确实令人困惑，您只能在运行时看到它，因为模板未编译。