Vue3 在 setup 中对 props 进行参数校验【validator】

[jtwang7]

Vue3 在 setup 中对 props 进行参数校验【validator】

参考文章：

• Vue 3 script setup prop validation typescript

✅ 使用 defineProps API

<script lang="ts" setup>
  type Type = 'button' | 'submit' | 'reset';

  interface Props {
    type: Type;
  }

  const props = defineProps<Props>({ 
    type: {
      type: String,
      default: 'button',
      validator: (prop: Type) => ['button', 'submit', 'reset'].includes(prop)
    }
  });
</script>

WARNING
由于 TypeScript 中的设计限制，当它涉及到为了对函数表达式进行类型推理，你必须注意对象和数组的 validator 和 default 值：

import { defineComponent, PropType } from 'vue'

interface Book {
  title: string
  year?: number
}

const Component = defineComponent({
  props: {
    bookA: {
      type: Object as PropType<Book>,
      // 请务必使用箭头函数
      default: () => ({
        title: 'Arrow Function Expression'
      }),
      validator: (book: Book) => !!book.title
    },
    bookB: {
      type: Object as PropType<Book>,
      // 或者提供一个明确的 this 参数
      default(this: void) {
        return {
          title: 'Function Expression'
        }
      },
      validator(this: void, book: Book) {
        return !!book.title
      }
    }
  }
})