fix(components): [form] improve types (#14062)

* fix(components): [form] improve types * docs: update form * fix: consider RegExp * chore: update jsdoc
element-plus · Aug 30, 2023 · 3c1bd4e · 3c1bd4e
1 parent 5f028f8
commit 3c1bd4e
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 3 deletions.
diff --git a/docs/en-US/component/form.md b/docs/en-US/component/form.md
@@ -235,7 +235,39 @@ type FormValidateCallback = (
 interface FormItemRule extends RuleItem {
   trigger?: Arrayable<string>
 }
-type FormRules = Partial<Record<string, Arrayable<FormItemRule>>>
+
+type Primitive = null | undefined | string | number | boolean | symbol | bigint
+type BrowserNativeObject = Date | FileList | File | Blob | RegExp
+type IsTuple<T extends ReadonlyArray<any>> = number extends T['length']
+  ? false
+  : true
+type ArrayMethodKey = keyof any[]
+type TupleKey<T extends ReadonlyArray<any>> = Exclude<keyof T, ArrayMethodKey>
+type ArrayKey = number
+type PathImpl<K extends string | number, V> = V extends
+  | Primitive
+  | BrowserNativeObject
+  ? `${K}`
+  : `${K}` | `${K}.${Path<V>}`
+type Path<T> = T extends ReadonlyArray<infer V>
+  ? IsTuple<T> extends true
+    ? {
+        [K in TupleKey<T>]-?: PathImpl<Exclude<K, symbol>, T[K]>
+      }[TupleKey<T>]
+    : PathImpl<ArrayKey, V>
+  : {
+      [K in keyof T]-?: PathImpl<Exclude<K, symbol>, T[K]>
+    }[keyof T]
+type FieldPath<T> = T extends object ? Path<T> : never
+// MaybeRef: see [@vueuse/core](https://github.com/vueuse/vueuse/blob/main/packages/shared/utils/types.ts)
+// UnwrapRef: see [vue](https://github.com/vuejs/core/blob/main/packages/reactivity/src/ref.ts)
+type FormRules<T extends MaybeRef<Record<string, any> | string> = string> =
+  Partial<
+    Record<
+      UnwrapRef<T> extends string ? UnwrapRef<T> : FieldPath<UnwrapRef<T>>,
+      Arrayable<FormItemRule>
+    >
+  >
 ```
 
 </details>
diff --git a/packages/components/form/src/types.ts b/packages/components/form/src/types.ts
@@ -22,6 +22,7 @@ export interface FormItemRule extends RuleItem {
 }
 
 type Primitive = null | undefined | string | number | boolean | symbol | bigint
+type BrowserNativeObject = Date | FileList | File | Blob | RegExp
 /**
  * Check whether it is tuple
  *
@@ -60,7 +61,9 @@ type ArrayKey = number
  *
  * 用于通过一个类型递归构建路径的辅助类型
  */
-type PathImpl<K extends string | number, V> = V extends Primitive
+type PathImpl<K extends string | number, V> = V extends
+  | Primitive
+  | BrowserNativeObject
   ? `${K}`
   : `${K}` | `${K}.${Path<V>}`
 /**
@@ -85,7 +88,7 @@ type Path<T> = T extends ReadonlyArray<infer V>
  * 通过一个类型收集所有路径的类型
  *
  * @example
- * FieldPath<{ 1: number; a: number; b: string; c: { d: number; e: string }; f: [{ value: string }]; g: { value: string }[] }> => '1' | 'a' | 'b' | 'c' | 'f' | 'g' | 'c.d' | 'c.e' | 'f.0' | 'f.0.value' | 'g.number' | 'g.number.value'
+ * FieldPath<{ 1: number; a: number; b: string; c: { d: number; e: string }; f: [{ value: string }]; g: { value: string }[]; h: Date; i: FileList; j: File; k: Blob; l: RegExp }> => '1' | 'a' | 'b' | 'c' | 'f' | 'g' | 'c.d' | 'c.e' | 'f.0' | 'f.0.value' | 'g.number' | 'g.number.value' | 'h' | 'i' | 'j' | 'k' | 'l'
  */
 type FieldPath<T> = T extends object ? Path<T> : never
 export type FormRules<