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

vue3 的 props

Vue3 的 props ,分为 composition API 的方式以及 option API 的方式,可以实现运行时判断类型,验证属性值是否符合要求,以及提供默认值等功能。

props 可以不依赖TS,自己有一套运行时的验证方式,如果加上TS的话,还可以实现在编写代码的时候提供约束、判断和提示等功能。

Prop 的校验

官网:https://staging-cn.vuejs.org/guide/components/props.html#prop-validation

Vue 提供了一种对 props 的属性进行验证的方法,有点像 Schema。不知道Vue内部有没有提供interface,目前没有找到,所以我们先自己定义一个:

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

后面会用到。

composition API

官网:https://staging-cn.vuejs.org/guide/typescript/composition-api.html

准确的说是在 script setup 的情况下,如何设置 props,具体方法看官网,这里不搬运。

探讨一下优缺点。

interface Props {
  foo: string
  bar?: number
}

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

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

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

虽然可以单独定义 interface ,而且可以给整体 props 设置类型约束,但是只能在组件内部定义,目前暂时不支持从单独的文件里面读取。而且不能“扩充”属性。

也就是说,基本无法实现复用。

这个缺点恰恰和我的目的冲突,等待新版本可以解决吧。

option API

官网:https://staging-cn.vuejs.org/guide/typescript/options-api.html

这种方式支持Option API,也支持 setup 的方式,可以从外部引入 接口定义,但是似乎不能给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
  }
})

想了半天,可以用“二段定义”方式的方式来解决:

  • 定义一个 interface,规定一个组件必须有哪些属性。
  • 定义 props 的 “描述对象”,作为共用的 props。

我的想法

为啥要给 props 设置一个 整体的 interface,而且还要从外部文件引入呢?

因为我理解的 interface 可以拥有“约束”的功能,即:可以通过 interface 约束多个(相关)组件的 props 里面必须有一些相同的属性。

所以需要在一个单独的文件里面定义接口,然后在组件里面引入,设置给组件的props。

Vue不倡导组件使用继承,那么如果想要约束多个组件,拥有相同的 props?似乎应该可以用 interface ,但是看官方文档,好像思考角度不是这样的。

应对方式

  • 先定义组件需要哪些属性的 interface:
/**
 * 表单子控件的共用属性。约束必须有的属性
 */
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,
}

ItemProps:目的是约束一个组件需要设置哪些属性,限制属性名称。

  • 然后定义 共用 的 props 的描述对象:
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 }

定义 props 的属性的具体类型、默认值等。

  • 最后在组件里面引入
 
  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
      }
    }
  })

使用解构的方式设置组件的 props,还可以有提示,还可以扩展自己的属性。

vue3的props的提示.png

好像哪里不对,不过先这样了。

vue3 的 props 到底是啥结构?

说起来比较复杂:

vue3的props.png
  • 外层是 shallowReadonly。(第一层属性不能直接改,但是第二层(通过引用类型)可以直接改。)
  • 里面是 shallowReactive。(解构时不会强制把普通对象变成reactive,为了效率吧。)

基本就是这样。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,126评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,254评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,445评论 0 341
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,185评论 1 278
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,178评论 5 371
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,970评论 1 284
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,276评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,927评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,400评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,883评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,997评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,646评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,213评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,204评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,423评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,423评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,722评论 2 345

推荐阅读更多精彩内容