Vue 在编译时使用 Typescript 类型检查道具

Posted 2023-02-22

【中文标题】Vue 在编译时使用 Typescript 类型检查道具

【英文标题】：Vue with Typescript type check of props on compile time

【发布时间】：2019-01-29 14:46:34

【问题描述】：

我正在使用带有 Typescript 的 Vue.js。 代码很简单。 （带有 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>

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

但是编译没有错误。有没有办法在“编译”时检查类型？

【问题讨论】：

你有最新版的vue-property-decorator吗？

@Aaaron 是的，它是最新版本（7.0.0）。我不认为这不是版本问题。

听说 Angular 和 React + Typescript 可以在编译时检查类型。我猜他们可以这样做，因为 Angular 编译纯 ts 文件，而 React 也编译从 jsx 转换的 ts 文件。

是的，这可能与 Vue 使用类似 html 的模板这一事实有关，您无法获得类型安全。不过，它们确实在幕后转换为 javascript。我发现有人在 Vue 论坛中寻求类似问题的帮助，但没有答案。 Vue + TypeScript 组合有时会出现问题，因为可用的支持很少。

您可以尝试在 GitHub 的 vue-property-decorator 存储库上报告问题，看看开发人员是否知道一些答案。

【参考方案1】：

将评论转化为答案...

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

【讨论】：

是的，我发现没有办法在编译时验证 props。