@white-block/types

中文文档

简介

@white-block/types用于解析 Vue3.x 中 Props 和 Emits 类型。搭配 white-block 实现 Vue 中 Props 和 Emits 类型定义和解析的一体化。

支持解析成对象形式和数组形式，更方便使用。还额外提供了数据快速转换成 markdown 表格的工具函数，用于方便搭建组件库相关文档。

使用

定义并解析Props 和 Emits

import { VueTypeResolver } from '@white-block/types'

const code = `export const Props = {
      /** 基础类型 */
      base: {
        type: Number,
        default: 0
      },
      /** 基础类型 + 属性 */
      properties: {
        type: Boolean,
        default: false,
        required: true
      },
      /** 自定义TS类型 */
      custom: {
        type: String as PropType<CustomType>,
        default: () => 'a1b2c3',
        required: true
      },
      /** 联合类型 */
      union: {
        type: String as PropType<AAA | BBB>,
        default: 'aaa'
      },
      /** 交叉类型 */
      intersection: {
        type: Object as PropType<AAA & BBB>,
        default() { return  { a: 'bbb' } }
      },
      /** 复杂类型 */
      complex: {
        type: Array as PropType<(AAA | BBB)[]>,
        default: () => ['aaa', 'bbb']
      }
    }

    export type Emits = {
      /** 导出类型 */
      click: [e: MouseEvent]
    }
    
    export default {
      /** 按钮类型 */
      type: {
        type: String as PropType<ButtonType>,
        default: 'default'
      },
      /** 组件尺寸 */
      size: {
        type: String as PropType<ButtonSize>,
        default: 'medium',
        required: true
      }
    }`
    const resolver = new VueTypeResolver(code)
    

获取类型定义

获取 Props 的类型定义 - 对象形式

resolver.getExports().Props

输出

  {
    base: {
      comment: '* 基础类型 ',
      type: 'Number',
      default: 0
    },
    properties: {
      comment: '* 基础类型 + 属性 ',
      type: 'Boolean',
      default: false,
      required: true
    },
    custom: {
      comment: '* 自定义TS类型 ',
      type: 'String as CustomType',
      default: 'a1b2c3',
      required: true
    },
    union: {
      comment: '* 联合类型 ',
      type: 'String as AAA|BBB',
      default: 'aaa'
    },
    intersection: {
      comment: '* 交叉类型 ',
      type: 'Object as AAA&BBB',
      default: { a: 'bbb' }
    },
    complex: {
      comment: '* 复杂类型 ',
      type: 'Array as (AAA|BBB)[]',
      default: ['aaa', 'bbb']
    }
  }

获取 Props 的类型定义 - 数组形式

resolver.getTransformExports('Props')

输出

  [
    {
      name: 'base',
      comment: '* 基础类型 ',
      required: false,
      type: 'Number',
      ts: 'number',
      default: 0
    },
    {
      name: 'properties',
      comment: '* 基础类型 + 属性 ',
      required: true,
      type: 'Boolean',
      ts: 'boolean',
      default: false
    },
    {
      name: 'custom',
      comment: '* 自定义TS类型 ',
      required: true,
      type: 'String',
      ts: 'CustomType',
      default: 'a1b2c3'
    },
    {
      name: 'union',
      comment: '* 联合类型 ',
      required: false,
      type: 'String',
      ts: 'AAA|BBB',
      default: 'aaa'
    },
    {
      name: 'intersection',
      comment: '* 交叉类型 ',
      required: false,
      type: 'Object',
      ts: 'AAA&BBB',
      default: { a: 'bbb' }
    },
    {
      name: 'complex1',
      comment: '* 复杂类型1 ',
      required: false,
      type: 'Array',
      ts: '(AAA|BBB)[]',
      default: ['aaa', 'bbb']
    },
    {
      name: 'complex2',
      comment: '* 复杂类型2 ',
      required: false,
      type: 'Array',
      ts: '(AAA|BBB)[]',
      default: {
        a: 1,
        b: '2',
        c: false
      }
    }
  ]

获取 Emits 的类型定义 - 对象形式

resolver.getExports().Emits

输出

  {
    click: {
      comment: '* 导出类型 ',
      params: { e: 'MouseEvent' }
    }
  }

获取 Emits 的类型定义 - 数组形式

resolver.getTransformTypeExports('Emits')

输出

  [
    {
      name: 'click',
      comment: '* 导出类型 ',
      params: { e: 'MouseEvent' }
    }
  ]

工具函数

VueTypeResolver

解析器类，用于解析 Vue3.x 中 Props 和 Emits 类型。

generateMarkdownTable

工具类，用于从解析的类型数据生成 markdown表格。

...

应用例子

具体使用可参考 test 文件夹

Emits定义如下

  export type Emits = {
    /** 导出类型 */
    click: [e: MouseEvent]
  }

输出

名称	参数	描述
click	(e: MouseEvent, payload: Data)	点击时触发

Props定义如下

  export const Props = {
    /** 按钮类型 */
    type: {
      type: String as PropType<ButtonType>,
      default: 'default'
    },
    /** 组件尺寸 */
    size: {
      type: String as PropType<ButtonSize>,
      default: 'medium',
      required: true
    }
  }

输出如下

名称	类型	TS类型	默认值	说明	必传
type	String	ButtonType	'default'	按钮类型	N
size	String	ButtonSize	'medium'	组件尺寸	Y