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

Posted 2023-02-22

【中文标题】如何编译时检查 vue 模板中的强类型道具？

【英文标题】：how to compile time check strongly typed props in vue templates?

【发布时间】：2021-02-13 20:04:20

【问题描述】：

使用 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，而是希望错误的类型触发实际的编译时错误。

【问题讨论】：

validator 可以是任何东西 所以我很确定这不是你可以在编译时检查的东西......

您必须执行它，但我不明白为什么不应该这样做。无论如何，我很乐意只检查类型，而不在其上运行验证器。

^^ 只是为了明确一点：使用 Vue 和在 编译时 检查类型，而不是使用 Vetur 扩展。

【参考方案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>

【讨论】：

然后 WebStorm 可以检查它们 - 这真的知道吗？它提供了有关模板中道具类型的提示，但没有任何类型的迹象表明提供了错误的类型。

是的，它确实有一段时间了，但可能有太多问题。