Vue3 + TS PropType类型验证

使用TS的时候有没有遇到过，一个组件props 需要自己定义的接口和类型的属性验证，那么该怎么办呢？

基础props验证看Vue3官网props介绍即可：点击传送 ，官网没有对特定类型属性进行补充。

PropType 定义

---

代码语言：javascript复制

export declare type Prop<T, D = T> = PropOptions<T, D> | PropType<T>;

declare type PropConstructor<T = any> = {
    new (...args: any[]): T & object;
} | {
    (): T;
} | PropMethod<T>;

declare type PropMethod<T, TConstructor = any> = T extends (...args: any) => any ? {
    new (): TConstructor;
    (): T;
    readonly prototype: TConstructor;
} : never;

declare interface PropOptions<T = any, D = T> {
    type?: PropType<T> | true | null;
    required?: boolean;
    default?: D | DefaultFactory<D> | null | undefined | object;
    validator?(value: unknown): boolean;
}

export declare type PropType<T> = PropConstructor<T> | PropConstructor<T>[];

PropType 使用

---

假如我有一个todoItem 组件，需要item 信息属性，需要准守 TodoItem interface。

1、 引入

代码语言：javascript复制

import { PropType } from 'vue'

2、 定义接口

代码语言：javascript复制

export interface TodoItem {
  text: string
  done: boolean
}

3、 属性验证

代码语言：javascript复制

 props: {
    todo: {
      type: Object as PropType<TodoItem>,
      default: {
        text: '',
        done: false
      }
    }
  },

ending…

interface vue3 基础 接口

0 人点赞