feat(utils): 新增 slots、emit 的工具类型函数 (#695)

components/_util/interface.ts

@@ -8,6 +8,7 @@ import type {
     Plugin,
     ExtractPropTypes,
     InjectionKey,
+    SlotsType,
 } from 'vue';
 
 export type Emit = SetupContext['emit'];
@@ -45,6 +46,16 @@ export type ExtractPublicPropTypes<T> = Omit<
 /** defineComponent 中 setup 函数的 props 参数类型 */
 export type ComponentInnerProps<P> = Parameters<DefineComponent<P>['setup']>[0];
 
+/** defineComponent 中 setup 函数的 slots 参数类型 */
+export type ComponentSlots<SlotParams extends Record<string, unknown>> =
+    SetupContext<unknown, SlotsType<SlotParams>>['slots'];
+
+/** defineComponent 中 setup 函数的 emit 参数类型 */
+export type ComponentEmit<EmitEvents extends readonly string[]> = (
+    event: EmitEvents[number],
+    ...args: any[]
+) => void;
+
 export interface Option {
     value?: string | number | boolean;
     label?: string | number;

components/calendar/calendar.tsx

@@ -1,6 +1,5 @@
 import {
     type CSSProperties,
-    type SlotsType,
     type VNode,
     type VNodeChild,
     computed,
@@ -19,11 +18,7 @@ import {
     isSameDate,
     isSameMonth,
 } from './utils';
-import {
-    CalendarEvent,
-    calendarProps,
-    type CalendarSlots as Slots,
-} from './props';
+import { CalendarEvent, calendarProps, type CalendarSlots } from './props';
 import { type CalendarDate } from './types';
 import useWeekNames from './useWeekNames';
 import CalendarNavigator from './calendarNavigator';
@@ -37,7 +32,7 @@ export default defineComponent({
         CalendarEvent.UPDATE_MODE,
         CalendarEvent.CELL_CLICK,
     ],
-    slots: Object as SlotsType<Slots>,
+    slots: Object as CalendarSlots,
     setup: (props, { emit, slots }) => {
         useTheme();
         const { t } = useLocale();

components/calendar/props.ts

@@ -1,13 +1,13 @@
 import {
+    type SlotsType,
     type ComponentObjectPropsOptions,
     type PropType,
-    type SetupContext,
-    type SlotsType,
 } from 'vue';
 import { UPDATE_MODEL_EVENT } from '../_util/constants';
 import {
     type ExtractPublicPropTypes,
     type ComponentInnerProps,
+    type ComponentSlots,
 } from '../_util/interface';
 import { type UnixTime } from './types';
 
@@ -67,14 +67,13 @@ export const CalendarEvent = {
     CELL_CLICK: 'cellClick',
 } as const;
 
-export type CalendarSlots = {
-    // 	单元格
+export type CalendarSlotsParams = {
+    // 单元格
     cellMain: { date: UnixTime; mode: CalendarMode };
     // 单元格附加内容
     cellAppendant: { date: UnixTime; mode: CalendarMode };
 };
 
-export type CalendarUnboxSlots = SetupContext<
-    unknown,
-    SlotsType<CalendarSlots>
->['slots'];
+export type CalendarSlots = SlotsType<CalendarSlotsParams>;
+
+export type CalendarUnboxSlots = ComponentSlots<CalendarSlotsParams>;

components/timeline/props.ts

@@ -1,11 +1,11 @@
 import {
     type CSSProperties,
     type PropType,
-    type SetupContext,
-    type SlotsType,
     type VNodeChild,
     type ComponentObjectPropsOptions,
+    type SlotsType,
 } from 'vue';
+import { type ComponentSlots } from '../_util/interface';
 import type { ComponentInnerProps, ComponentProps } from './utilTypes';
 
 /** 严格版本的 Extract */
@@ -93,12 +93,11 @@ export type TimelineProps = ComponentProps<typeof timelineProps>;
 // 组件内部使用的 props 类型（包含了 default）
 export type TimelineInnerProps = ComponentInnerProps<typeof timelineProps>;
 
-export type TimelineSlots = {
+export type TimelineSlotsParams = {
     desc: TimelineNodeSlotCommonParams;
     icon: TimelineNodeSlotCommonParams;
 };
 
-export type TimelineUnboxSlots = SetupContext<
-    unknown,
-    SlotsType<TimelineSlots>
->['slots'];
+export type TimelineSlots = SlotsType<TimelineSlotsParams>;
+
+export type TimelineUnboxSlots = ComponentSlots<TimelineSlotsParams>;

components/timeline/timeline.tsx

@@ -1,6 +1,5 @@
 import {
     type CSSProperties,
-    type SlotsType,
     type VNode,
     type VNodeChild,
     computed,
@@ -175,7 +174,7 @@ const renderNode = (nodeProps: {
 export default defineComponent({
     name: COMPONENT_NAME,
     props: timelineProps,
-    slots: Object as SlotsType<Slots>,
+    slots: Object as Slots,
     setup: (props: Props, { slots }) => {
         useTheme();
 

package.json

@@ -111,7 +111,7 @@
     "ts-jest": "^27.1.3",
     "ts-morph": "^17.0.1",
     "typescript": "^4.9.5",
-    "vitepress": "1.0.0-rc.44",
+    "vitepress": "^1.0.0",
     "vue": "^3.3.4"
   },
   "dependencies": {