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

Question

使用 Vue 和 Typescript 可以为 props 指定类型：Strongly typing props of vue components using composition api and typescript typing system

但是，据我所知，这些道具仅在运行时检查。这是一个简单的示例组件。它有两个道具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>

以下是您可以（错误地）使用该组件的方法。道具a 的类型错误，道具b 验证失败：

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

是否有可能在编译时发现这个错误？ 开箱即用，Vue 只在运行时报错，消息如Invalid prop: custom validator check failed for prop "b".

网上搜索后发现可以开启道具类型验证作为实验性Vetur feature。但这不会调用自定义验证器，因此在上面的示例中，Vetur 找不到b 的问题。
此外，我并不总是使用 Vetur，而是希望错误的类型触发实际的编译时错误。

Answer 1

对于 (a)：类型定义

Typescript / Vue 模板编译器不会对此进行检查。

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

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

对于（b）：验证器

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

您可以通过adding the exact type to the prop 编写许多这样的断言，然后WebStorm 可以检查它们。使用类型检查时，最好使用 typescript（虽然你也可以使用 /** @type */ cmets）

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