Vue组件带类型导出

下面以 header 组件为例

组件目录

components
├── index.ts
└── header
    ├── src
    |    ├── header.ts
    |    └── header.vue
    └── index.ts

components/index.ts

export * from './header'

components/header/src/header.ts

import { buildProps } from '@makeapie/vue-component-helpers'
import type { ExtractPropTypes, PropType } from 'vue'
import type Header from './header.vue'

export type UserInfo = {
  id: string
  name: string
}

export const headerProps = buildProps({
  /**
   * @description 内容
   */
  value: {
    type: Object as PropType<UserInfo>,
    default: () => ({})
  }
} as const)

export type HeaderProps = ExtractPropTypes<typeof headerProps>
export type HeaderInstance = InstanceType<typeof Header>

export const headerEmits = {
  click: (value: string) => value
}
export type HeaderEmits = typeof headerEmits

components/header/src/header.vue

<template>
  <div :class="ns.b()">
    头部
  </div>
</template>

<script setup lang="ts">
import { useNamespace } from '@app/hooks'
import { headerEmits, headerProps } from './header'

defineProps(headerProps)

defineOptions({
  name: 'IcsChatHeader'
})

const emit = defineEmits(headerEmits)

const ns = useNamespace('header')

/**
 * 处理切换事件的函数
 * @emits switch 触发切换事件
 */
function handleSwitch() {
  emit('click', 'switch')
}

function handleJumoHome() {
  emit('click', 'home')
}
</script>

components/header/index.ts

import { withInstall } from '@makeapie/vue-component-helpers'

import Header from './src/header.vue'
import type { SFCWithInstall } from '@makeapie/vue-component-helpers'

export const IcsChatHeader: SFCWithInstall<typeof Header> = withInstall(Header)
export default IcsChatHeader

export * from './src/header'
export * from './src/types'