Vue 3 + typescript：单个文件组件中的类型检查道具

Question

我在 Vuetify 和其他地方看到可以在模板标签中为 prop 添加类型检查。

假设我们有一个按钮组件

<template>
    <div>
        <button>{{ label }}</button>
    </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
    props: {
        label: { type: String as () => string, default: '' },
    },
});
</script>

现在在父组件中：

<button-component :label="true" />

我会从 Vue 本身得到一个编译器警告，它是错误的参数，但是可以在输入代码时检查吗？如果不是，在道具中指定 ts 类型有什么意义？

Answer 1

基于 Typescript support docs，type:String 就足够了，如果需要，您可以添加验证器：

export default defineComponent({
    props: {
        label: { 
          type: String ,
          default: ''
          },
    },
});

你也可以这样做：

export default defineComponent({
    props: {
        label: {
          type: String as PropType<string>,
          default: ''
          },
    },
});

我认为您使用的语法是针对函数检查类型的。

Answer 2

如果您想提交 String 而不是布尔值，您可以执行以下操作：

<button-component :label="`true`" />

因为你在绑定，所以 vue 编译器正在将你的真实值转换为布尔值。所以在这里显式定义一个字符串输入。

Vue 3 + typescript：单个文件组件中的类型检查道具

Vue 3 + typescript : type check props in single file component

javascript

typescript

vue.js

vuejs3