feat: 属性支持数组形式，并给与类型提示

Author: agileago

README.md

@@ -41,7 +41,7 @@ pnpm add vue3-oop
 ### 定义组件
 
 ```typescript jsx
-import { Autobind, ComponentProps, Computed, Hook, Link, Ref, VueComponent } from 'vue3-oop'
+import { Autobind, ComponentPropsArray, Computed, Hook, Link, Ref, VueComponent } from 'vue3-oop'
 import { Directive, VNodeChild, watch } from 'vue'
 
 const focusDirective: Directive = {
@@ -60,13 +60,12 @@ interface Foo_Props {
 
 class Foo extends VueComponent<Foo_Props> {
   // vue需要的运行时属性检查
-  static defaultProps: ComponentProps<Foo_Props> = {
-    size: String,
-  }
+  static defaultProps: ComponentPropsArray<Foo_Props> = ['size']
   // 组件需要的局部指令
   static directives: Record<string, Directive> = {
     focus: focusDirective,
   }
+
   constructor() {
     super()
     // watch在构造函数中初始化
@@ -80,14 +79,17 @@ class Foo extends VueComponent<Foo_Props> {
 
   // 组件自身状态
   @Ref() count = 1
+
   // 计算属性
   @Computed()
   get doubleCount() {
     return this.count * 2
   }
+
   add() {
     this.count++
   }
+
   // 自动绑定this
   @Autobind()
   remove() {
@@ -111,7 +113,7 @@ class Foo extends VueComponent<Foo_Props> {
         <span>{this.count}</span>
         <button onClick={this.remove}>-</button>
         <div>{this.context.slots.item?.('aaa')}</div>
-        <input type="text" v-focus />
+        <input type="text" v-focus/>
       </div>
     )
   }

example/main.tsx

@@ -1,6 +1,6 @@
 import '@abraham/reflection'
-import type { ClassType } from '@/index'
-import { Autobind, Component, ComponentProps, Computed, Hook, Link, Ref, VueComponent, VueService } from '@/index'
+import type { ClassType, ComponentProps } from '@/index'
+import { Autobind, Component, Computed, Hook, Link, Ref, VueComponent, VueService } from '@/index'
 import { forwardRef, Inject, Injectable, SkipSelf } from 'injection-js'
 import { createApp, VNodeChild, watch } from 'vue'
 
@@ -23,6 +23,10 @@ class CountService extends VueService {
 // 组件属性声明
 interface HomeChild_Props {
   size: 'small' | 'large'
+  value?: string
+  'onUpdate:value'?: (name: string) => void
+  check?: boolean
+  'onUpdate:check'?: (check: boolean) => void
   // 组件个性化定义属性
   slots: {
     item(name: string): VNodeChild
@@ -32,9 +36,7 @@ interface HomeChild_Props {
 // 带属性组件
 @Component({ providers: [CountService] })
 class HomeChild extends VueComponent<HomeChild_Props> {
-  static defaultProps: ComponentProps<HomeChild_Props> = {
-    size: String,
-  }
+  static defaultProps: ComponentProps<HomeChild_Props> = ['size', 'value', 'onUpdate:value', 'check', 'onUpdate:check']
 
   constructor(
     private countService: CountService,

src/extends/component.ts

@@ -1,26 +1,14 @@
-import { getCurrentInstance, Prop, provide, SetupContext, VNodeChild, VNodeProps } from 'vue'
+import { getCurrentInstance, provide, VNodeChild, VNodeProps } from 'vue'
 import { getEmitsFromProps, useCtx, useProps } from '@/helper'
-import { Hanlder, VueComponentStaticContructor } from '@/type'
+import { Hanlder, VueComponentStaticContructor, WithSlotTypes, WithVModel, WithVSlots } from '@/type'
 import { RefHandler } from '@/decorators/ref'
 import { ComputedHandler } from '@/decorators/computed'
 import { HookHandler } from '@/decorators/hook'
 import { LinkHandler } from '@/decorators/link'
 
 export const GlobalStoreKey = 'GlobalStoreKey'
 
-type VueComponentProps<T extends Record<string, any>> = Omit<T, 'slots'> & WithVSlots<T> & VNodeProps
-
-// 处理tsx slots 类型问题
-type WithVSlots<T extends Record<string, any>> = 'slots' extends keyof T
-  ? {
-      'v-slots'?: Partial<T['slots'] & { $stable: boolean; default(): VNodeChild }>
-      [name: string]: any
-    }
-  : Record<string, any>
-
-type WithSlotTypes<T extends Record<string, any>> = Omit<SetupContext, 'slots'> & {
-  slots: Partial<T['slots'] & { default(): VNodeChild }>
-}
+type VueComponentProps<T extends Record<string, any>> = Omit<T, 'slots'> & WithVModel<T> & WithVSlots<T> & VNodeProps
 
 export abstract class VueComponent<T = Record<string, any>> {
   /** 装饰器处理 */
@@ -93,16 +81,3 @@ export abstract class VueComponent<T = Record<string, any>> {
   abstract render(ctx?: any): VNodeChild
   abstract render(ctx?: any, cache?: any[]): VNodeChild
 }
-
-export type ComponentProps<T extends Record<string, any>> = {
-  [U in keyof Omit<T, 'slots'>]-?: Prop<any>
-}
-
-export type ComponentSlots<T extends { props: any }> = T extends { props: infer U }
-  ? 'v-slots' extends keyof U
-    ? U['v-slots']
-    : Record<string, unknown>
-  : never
-
-/** 为了阻止ts把不相关的类也解析到metadata数据中，用这个工具类型包装一下类 */
-export type ClassType<T> = T

src/helper.ts

@@ -52,8 +52,8 @@ export function getDeepOwnDescriptor(proto: any, key: string): PropertyDescripto
   if (desc) return desc
   return getDeepOwnDescriptor(Reflect.getPrototypeOf(proto), key)
 }
-export function getEmitsFromProps(defaultProps: Record<string, any>) {
-  const keys = Object.keys(defaultProps)
+export function getEmitsFromProps(defaultProps: Record<string, any> | string[]) {
+  const keys = Array.isArray(defaultProps) ? defaultProps : Object.keys(defaultProps)
   const emits: string[] = []
 
   for (let key of keys) {

src/index.ts

@@ -7,4 +7,11 @@ export { Hook } from './decorators/hook'
 export * from './helper'
 export { Component, InjectorKey } from './di'
 export type { ComponentOptions } from './di'
-export type { ComponentProps, ComponentSlots, ClassType } from './extends/component'
+export type {
+  ComponentProps,
+  ComponentSlots,
+  ClassType,
+  WithVModel,
+  ComponentPropsArray,
+  ComponentPropsObject,
+} from './type'

src/type.ts

@@ -1,3 +1,5 @@
+import { Prop, SetupContext, VNodeChild } from 'vue'
+
 export interface VueComponentStaticContructor {
   new (...args: any[]): any
   /** 组件显示名称 */
@@ -24,3 +26,53 @@ export interface Hanlder {
   key: string
   handler: (targetThis: any) => void
 }
+
+// 处理tsx slots 类型问题
+export type WithVSlots<T extends Record<string, any>> = 'slots' extends keyof T
+  ? {
+      'v-slots'?: Partial<T['slots'] & { $stable: boolean; default(): VNodeChild }>
+      [name: string]: any
+    }
+  : Record<string, any>
+
+export type WithSlotTypes<T extends Record<string, any>> = Omit<SetupContext, 'slots'> & {
+  slots: Partial<T['slots'] & { default(): VNodeChild }>
+}
+
+type ModelProps<T extends Record<string, any>> = Exclude<
+  {
+    [Prop in keyof T]: T extends { [k in Prop as `onUpdate:${k & string}`]?: any } ? Prop : never
+  }[keyof T],
+  undefined
+>
+
+export type WithVModel<T extends Record<string, any>, U extends keyof T = ModelProps<T>> = {
+  [k in U as `v-model:${k & string}`]?: T[k] | [T[k], string[]]
+}
+
+export type ComponentProps<T extends Record<string, any>> = ComponentPropsArray<T> | ComponentPropsObject<T>
+
+export type ComponentPropsObject<T extends Record<string, any>> = {
+  [U in keyof Omit<T, 'slots'>]-?: Prop<any>
+}
+export type ComponentPropsArray<T extends Record<string, any>> = UnionToTuple<keyof Omit<T, 'slots'>>
+
+export type ComponentSlots<T extends { props: any }> = T extends { props: infer U }
+  ? 'v-slots' extends keyof U
+    ? U['v-slots']
+    : Record<string, unknown>
+  : never
+
+/** 为了阻止ts把不相关的类也解析到metadata数据中，用这个工具类型包装一下类 */
+export type ClassType<T> = T
+
+// 联合类型转换成数组 'aaa' | 'bbb' -> ['aaa', 'bbb']
+export type UnionToTuple<T> = (
+  (T extends any ? (t: T) => T : never) extends infer U
+    ? (U extends any ? (u: U) => any : never) extends (v: infer V) => any
+      ? V
+      : never
+    : never
+) extends (_: any) => infer W
+  ? [...UnionToTuple<Exclude<T, W>>, W]
+  : []