Better JSX types.

Author: sdegutis

site/public/guides/enabling-jsx.md

@@ -141,17 +141,22 @@ declare namespace JSX {
 For HTML tag autocompletion and good-enough attr validation, add this:
 
 ```ts
-  type jsxify<T extends HTMLElement> = {
-    [A in keyof T as A extends string ? Lowercase<Exclude<A, 'children'>> : never]?:
-    string | boolean |
-    (T[A] extends (string | boolean | null | number)
-      ? T[A]
-      : never)
+declare namespace JSX {
+
+  // ...
 
+  type jsxify<T extends HTMLElement> = {
+    [A in keyof T as A extends string ? Lowercase<Exclude<A, 'children'>> : never]?: (
+      | string
+      | boolean
+      | (T[A] extends (string | boolean | null | number)
+        ? T[A]
+        : never))
   } & { children?: any, class?: string }
 
   type IntrinsicElements =
     & { [K in keyof HTMLElementTagNameMap]: jsxify<HTMLElementTagNameMap[K]> }
-    // add special cases here as necessary like this:
     & { meta: jsxify<HTMLMetaElement> & { charset?: 'utf-8' } }
+
+}
 ```

types.d.ts

@@ -1,26 +1,33 @@
 declare namespace JSX {
 
   type jsxify<T extends HTMLElement> = {
-    [A in keyof T as A extends string ? Lowercase<Exclude<A, 'children'>> : never]?:
-    string | boolean |
-    (T[A] extends (string | boolean | null | number)
-      ? T[A]
-      : never)
-
+    [A in keyof T as A extends string ? Lowercase<Exclude<A, 'children'>> : never]?: (
+      | string
+      | boolean
+      | (T[A] extends (string | boolean | null | number)
+        ? T[A]
+        : never))
   } & { children?: any, class?: string }
 
   type IntrinsicElements =
     & { [K in keyof HTMLElementTagNameMap]: jsxify<HTMLElementTagNameMap[K]> }
     // add special cases here as necessary like this:
     & { meta: jsxify<HTMLMetaElement> & { charset?: 'utf-8' } }
 
-  type ElementChildrenAttribute = { children: any }
+  type jsxChildren =
+    | string
+    | false
+    | null
+    | undefined
+    | jsxChildren[]
+
+  type ElementChildrenAttribute = { children: jsxChildren }
 
   type Element = string
 
   type ElementType =
     | string
-    | ((data: any) => JSX.Element)
+    | ((data: any) => jsxChildren)
 
 }