如何编译时检查 vue 模板中的强类型道具? [英] how to compile time check strongly typed props in vue templates?

问题描述

在 Typescript 中使用 Vue 可以为 props 指定类型:使用组合 api 和 typescript 打字系统强打字 vue 组件的 props

Using Vue with Typescript makes it possible to specify types for props: Strongly typing props of vue components using composition api and typescript typing system

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

However, as far as I can see these props are only checked at runtime. Here's a simple example component. It has two props a, and b. One is a number and the other a string. Additionally b has a validator, it is only valid if it's equal to 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 未通过验证:

Here's how you could (incorrectly) use the component. The prop a has a wrong type and the prop b fails its validation:

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

是否有可能在编译时发现此错误?开箱即用，Vue 只在运行时抱怨，并带有诸如 Invalid prop: custom validator check failed for prop b"之类的消息.

Is it possible to find this bug at compile time? Out of the box, Vue only complains at runtime, with a message such as Invalid prop: custom validator check failed for prop "b".

上网查了一下，发现可以开启prop类型验证作为实验性Vetur 功能.但这并没有调用自定义验证器，因此在上面的示例中，Vetur 找不到b 的问题.
此外，我并不总是使用 Vetur，并且希望错误的类型触发实际的编译时错误.

After searching online, I found that prop type validation can be switched on as an experimental Vetur feature. But this doesn't call the custom validator, so in the example above, Vetur can't find the problem for b.
Also, I'm not always using Vetur and would prefer to have the wrong types trigger an actual compile time error.

推荐答案

For (a): 类型定义

For (a): Type definitions

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

The Typescript / Vue Template compiler does not check for this.

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

Why? Because the type information is not available to the template compiler.

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

It is possible to analyze this outside the "normal" template compiler. WebStorm has a check for this.

对于 (b):验证器

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

The validation is done at runtime and cannot be checked at compile time.

您可以通过将确切类型添加到prop，然后 WebStorm 可以检查它们.使用类型检查时，最好使用 typescript(虽然你也可以使用/** @type */注释)

You can write many of those assertions by adding the exact type to the prop, then WebStorm can check them. When using type checks, it is best use typescript (although you can use /** @type */ comments, too)

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

这篇关于如何编译时检查 vue 模板中的强类型道具?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！