被迫开始学习Typescript —— vue3的 props 与 interface

/**
 * vue 的 props 的验证的类型约束
 */
export interface IPropsValidation {
  /**
   * 属性的类型，比较灵活，可以是 String、Number 等，也可以是数组、class等
   */
  type: Array<any> | any,
  /**
   * 是否必须传递属性
   */
  required?: boolean,
  /**
   * 自定义类型校验函数（箭头函数），value：属性值
   */
  validator?: (value: any) => boolean,
  /**
   * 默认值，可以是值，也可以是函数（箭头函数）
   */
  default?: any
}

interface Props {
  foo: string
  bar?: number
}

// 对 defineProps() 的响应性解构
// 默认值会被编译为等价的运行时选项
const { foo, bar = 100 } = defineProps<Props>()

// 引入 接口定义
import { Props } from './other-file'

// 不支持！
defineProps<Props>()

import { defineComponent } from 'vue'
import type { PropType } from 'vue'

interface Book {
  title: string
  year?: number
}

export default defineComponent({
  props: {
    bookA: {
      type: Object as PropType<Book>,
      // 确保使用箭头函数
      default: () => ({
        title: 'Arrow Function Expression'
      }),
      validator: (book: Book) => !!book.title
    }
  },
  setup(props) {
    props.message // <-- 类型：string
  }
})

/**
 * 表单子控件的共用属性。约束必须有的属性
 */
export interface ItemProps {
  /**
   * 字段ID、控件ID，sting | number
   */
  columnId: IPropsValidation,
  /**
   * 表单的 model，含义多个属性，any
   */
  model: IPropsValidation,
  /**
   * 字段名称，string
   */
  colName: IPropsValidation,
  /**
   * 控件类型，number
   */
  controlType: IPropsValidation,
  /**
   * 控件备选项，一级或者多级，Array<IOptionItem | IOptionItemTree>
   */
  optionList: IPropsValidation,
  /**
   * 访问后端API的配置，IWebAPI
   */
  webapi: IPropsValidation,
  /**
   * 防抖延迟时间，0：不延迟，number
   */
  delay: IPropsValidation,
  /**
   * 防抖相关的事件() => void
   */
  events: IPropsValidation,
  /**
   * 控件的大小，string
   */
  size: IPropsValidation,
  /**
   * 是否显示清空的按钮，boolean
   */
  clearable: IPropsValidation,
  /**
   * 控件的扩展属性，any
   */
  extend: IPropsValidation,
}

import type { PropType } from 'vue'

import type { 
  ItemProps,
  IOptionItem,
  IOptionItemTree,
  IWebAPI
} from '../types/type'

/**
 * 基础控件的共用属性，即表单子控件的基础属性
 */
const itemProps: ItemProps = {
  /**
   * 字段ID、控件ID
   */
  columnId: {
    type: [Number, String],
    default: () => Math.floor((Math.random() * 1000000) + 1) // new Date().valueOf()
  },
  /**
   * // 表单的 model，可以整体传入，便于子控件维护字段值。
   */
  model: {
    type: Object
  },
  /**
   * 字段名称，控件使用 model 的哪个属性，多个字段名称用 “_” 分割
   */
  colName: {
    type: String,
    default: ''
  },
  /**
   * 控件类型，表单控件据此加载对应的子控件
   */
  controlType: {
    type: Number,
    default: 101
  },
  /**
   * 控件的备选项，单选、多选、等控件需要
   */
  optionList: {
    type: Object as PropType<Array<IOptionItem | IOptionItemTree>>,
    default: () =>  {return []}
  },
  /**
   * 访问后端API的参数，IWebAPI
   */
  webAPI: {
    type: Object as PropType<IWebAPI>,
    default: () => {
      return {
        serviceId: '',
        actionId: '',
        dataId: '',
        body: null,
        cascader: {
          lazy: false, // 是否需要动态加载
          actions: ['',''] // 按照level的顺序设置后端 API 的 action
        }
      }
    }
  },
  /**
   * 防抖的时间间隔，0：不用防抖。
   */
  delay: {
    type: Number,
    default: 0
  },
  /**
   * 事件集合，主要用于防抖
   */
  events: {
    type: Object,
    default: () => {
      return {
        input: () => {}, // input 事件
        enter: () => {}, // 按了回车
        keydown: () => {} // 正在输入
      }
    }
  },
  /**
   * 子控件的规格，默认设置。
   * * 【element-plus】large / default / small 三选一
   */
  size: { // 
    type: String,
    default: 'small',
    validator: (value) => {
      // 这个值必须匹配下列字符串中的一个
      return ['large', 'default ', 'small'].indexOf(value) !== -1
    }
  },
  /**
   * 是否显示可清空的按钮，默认显示
   */
  clearable: {
    type: Boolean,
    default: true
  },
  /**
   * 扩展属性，对象形式，存放组件的扩展属性
   */
  extend: {
    type: Object,
    default: () => {return {}}
  }
}

export { itemProps }

  import { itemProps } from '../../../lib/base/props-item'

  export default defineComponent({
    name: 'ui-core-form-item',
    props: {
      aa: String,
      ...itemProps
    },
    setup(props) {
      console.log('表单子控件的 props：', props)

      return {
        props
      }
    }
  })