如何编译时检查 vue 模板中的强类型 props？

Question

将 Vue 与 Typescript 一起使用可以指定 props 的类型：使用组合 API 和 Typescript 类型系统强类型化 vue 组件的 props

然而，据我所知，这些道具仅在运行时检查。这是一个简单的示例组件。它有两个道具a和b。一个是数字，另一个是字符串。另外b还有一个验证器，只有等于时才有效hi

<template>
  <p>{{a}}</p>
</template>

<script>
import {defineComponent} from 'vue';
export default defineComponent(
    {
        name: "TestComp",
        props:{
            a:number,
            b:{
                type: String,
                validator:(val)=>val=="hi"
            }
        }
    }
)
</script>

以下是您如何（错误地）使用该组件。propa的类型错误并且 propb验证失败：

<TestComp a="hi" b="ho"/>

这个bug能在编译时发现吗？开箱即用，Vue 仅在运行时抱怨，并显示一条消息，例如Invalid prop: custom validator check failed for prop "b".

在网上搜索后，我发现 prop 类型验证可以作为实验性Vetur 功能打开。但这并没有调用自定义验证器，因此在上面的示例中，Vetur 无法找到b.
另外，我并不总是使用 Vetur，并且更喜欢让错误的类型触发实际的编译时错误。

Answer 1

对于 (a)：类型定义

Typescript / Vue 模板编译器不会检查这一点。

为什么？因为模板编译器无法获得类型信息。

可以在“正常”模板编译器之外对此进行分析。WebStorm 对此进行了检查。

对于 (b)：验证者

验证是在运行时完成的，无法在编译时检查。

您可以通过将确切的类型添加到 prop 来编写许多这样的断言，然后 WebStorm 可以检查它们。使用类型检查时，最好使用 typescript （尽管您也可以使用 /** @type */ 注释）

<script lang="ts">
import {defineComponent} from 'vue';
export default defineComponent(
    {
        name: "TestComp",
        props:{
            b:{
                type: String as PropType<"hi">,
                validator:(val)=>val==="hi"
            }
        }
    }
)
</script>