Improve JSX invalid children type error (#52105)

src/compiler/checker.ts

@@ -19072,6 +19072,68 @@ export function createTypeChecker(host: TypeCheckerHost): TypeChecker {
         return reportedError;
     }
 
+    /**
+     * Assumes `target` type is assignable to the `Iterable` type, if `Iterable` is defined,
+     * or that it's an array or tuple-like type, if `Iterable` is not defined.
+     */
+    function elaborateIterableOrArrayLikeTargetElementwise(
+        iterator: ElaborationIterator,
+        source: Type,
+        target: Type,
+        relation: Map<string, RelationComparisonResult>,
+        containingMessageChain: (() => DiagnosticMessageChain | undefined) | undefined,
+        errorOutputContainer: { errors?: Diagnostic[], skipLogging?: boolean } | undefined
+    ) {
+        const tupleOrArrayLikeTargetParts = filterType(target, isArrayOrTupleLikeType);
+        const nonTupleOrArrayLikeTargetParts = filterType(target, t => !isArrayOrTupleLikeType(t));
+        // If `nonTupleOrArrayLikeTargetParts` is not `never`, then that should mean `Iterable` is defined.
+        const iterationType = nonTupleOrArrayLikeTargetParts !== neverType
+            ? getIterationTypeOfIterable(IterationUse.ForOf, IterationTypeKind.Yield, nonTupleOrArrayLikeTargetParts, /*errorNode*/ undefined)
+            : undefined;
+
+        let reportedError = false;
+        for (let status = iterator.next(); !status.done; status = iterator.next()) {
+            const { errorNode: prop, innerExpression: next, nameType, errorMessage } = status.value;
+            let targetPropType = iterationType;
+            const targetIndexedPropType = tupleOrArrayLikeTargetParts !== neverType ? getBestMatchIndexedAccessTypeOrUndefined(source, tupleOrArrayLikeTargetParts, nameType) : undefined;
+            if (targetIndexedPropType && !(targetIndexedPropType.flags & TypeFlags.IndexedAccess)) {  // Don't elaborate on indexes on generic variables
+                targetPropType = iterationType ? getUnionType([iterationType, targetIndexedPropType]) : targetIndexedPropType;
+            }
+            if (!targetPropType) continue;
+            let sourcePropType = getIndexedAccessTypeOrUndefined(source, nameType);
+            if (!sourcePropType) continue;
+            const propName = getPropertyNameFromIndex(nameType, /*accessNode*/ undefined);
+            if (!checkTypeRelatedTo(sourcePropType, targetPropType, relation, /*errorNode*/ undefined)) {
+                const elaborated = next && elaborateError(next, sourcePropType, targetPropType, relation, /*headMessage*/ undefined, containingMessageChain, errorOutputContainer);
+                reportedError = true;
+                if (!elaborated) {
+                    // Issue error on the prop itself, since the prop couldn't elaborate the error
+                    const resultObj: { errors?: Diagnostic[] } = errorOutputContainer || {};
+                    // Use the expression type, if available
+                    const specificSource = next ? checkExpressionForMutableLocationWithContextualType(next, sourcePropType) : sourcePropType;
+                    if (exactOptionalPropertyTypes && isExactOptionalPropertyMismatch(specificSource, targetPropType)) {
+                        const diag = createDiagnosticForNode(prop, Diagnostics.Type_0_is_not_assignable_to_type_1_with_exactOptionalPropertyTypes_Colon_true_Consider_adding_undefined_to_the_type_of_the_target, typeToString(specificSource), typeToString(targetPropType));
+                        diagnostics.add(diag);
+                        resultObj.errors = [diag];
+                    }
+                    else {
+                        const targetIsOptional = !!(propName && (getPropertyOfType(tupleOrArrayLikeTargetParts, propName) || unknownSymbol).flags & SymbolFlags.Optional);
+                        const sourceIsOptional = !!(propName && (getPropertyOfType(source, propName) || unknownSymbol).flags & SymbolFlags.Optional);
+                        targetPropType = removeMissingType(targetPropType, targetIsOptional);
+                        sourcePropType = removeMissingType(sourcePropType, targetIsOptional && sourceIsOptional);
+                        const result = checkTypeRelatedTo(specificSource, targetPropType, relation, prop, errorMessage, containingMessageChain, resultObj);
+                        if (result && specificSource !== sourcePropType) {
+                            // If for whatever reason the expression type doesn't yield an error, make sure we still issue an error on the sourcePropType
+                            checkTypeRelatedTo(sourcePropType, targetPropType, relation, prop, errorMessage, containingMessageChain, resultObj);
+                        }
+                    }
+                }
+            }
+        }
+        return reportedError;
+    }
+
+
     function *generateJsxAttributes(node: JsxAttributes): ElaborationIterator {
         if (!length(node.properties)) return;
         for (const prop of node.properties) {
@@ -19138,13 +19200,23 @@ export function createTypeChecker(host: TypeCheckerHost): TypeChecker {
                 return result;
             }
             const moreThanOneRealChildren = length(validChildren) > 1;
-            const arrayLikeTargetParts = filterType(childrenTargetType, isArrayOrTupleLikeType);
-            const nonArrayLikeTargetParts = filterType(childrenTargetType, t => !isArrayOrTupleLikeType(t));
+            let arrayLikeTargetParts: Type;
+            let nonArrayLikeTargetParts: Type;
+            const iterableType = getGlobalIterableType(/*reportErrors*/ false);
+            if (iterableType !== emptyGenericType) {
+                const anyIterable = createIterableType(anyType);
+                arrayLikeTargetParts = filterType(childrenTargetType, t => isTypeAssignableTo(t, anyIterable));
+                nonArrayLikeTargetParts = filterType(childrenTargetType, t => !isTypeAssignableTo(t, anyIterable));
+            }
+            else {
+                arrayLikeTargetParts = filterType(childrenTargetType, isArrayOrTupleLikeType);
+                nonArrayLikeTargetParts = filterType(childrenTargetType, t => !isArrayOrTupleLikeType(t));
+            }
             if (moreThanOneRealChildren) {
                 if (arrayLikeTargetParts !== neverType) {
                     const realSource = createTupleType(checkJsxChildren(containingElement, CheckMode.Normal));
                     const children = generateJsxChildren(containingElement, getInvalidTextualChildDiagnostic);
-                    result = elaborateElementwise(children, realSource, arrayLikeTargetParts, relation, containingMessageChain, errorOutputContainer) || result;
+                    result = elaborateIterableOrArrayLikeTargetElementwise(children, realSource, arrayLikeTargetParts, relation, containingMessageChain, errorOutputContainer) || result;
                 }
                 else if (!isTypeRelatedTo(getIndexedAccessType(source, childrenNameType), childrenTargetType, relation)) {
                     // arity mismatch

tests/baselines/reference/jsxChildWrongType.errors.txt

@@ -0,0 +1,16 @@
+tests/cases/compiler/index.tsx(6,5): error TS2322: Type 'unknown' is not assignable to type 'ReactNode'.
+
+
+==== tests/cases/compiler/index.tsx (1 errors) ====
+    /// <reference path="/.lib/react18/react18.d.ts" />
+    /// <reference path="/.lib/react18/global.d.ts" />
+    
+    const a = (
+      <main>
+        {(<div />) as unknown}
+        ~~~~~~~~~~~~~~~~~~~~~~
+!!! error TS2322: Type 'unknown' is not assignable to type 'ReactNode'.
+        <span />
+      </main>
+    );
+    

tests/baselines/reference/jsxChildWrongType.js

@@ -0,0 +1,19 @@
+//// [index.tsx]
+/// <reference path="/.lib/react18/react18.d.ts" />
+/// <reference path="/.lib/react18/global.d.ts" />
+
+const a = (
+  <main>
+    {(<div />) as unknown}
+    <span />
+  </main>
+);
+
+
+//// [index.js]
+"use strict";
+/// <reference path="react18/react18.d.ts" />
+/// <reference path="react18/global.d.ts" />
+const a = (React.createElement("main", null,
+    (React.createElement("div", null)),
+    React.createElement("span", null)));

tests/baselines/reference/jsxChildWrongType.symbols

@@ -0,0 +1,21 @@
+=== tests/cases/compiler/index.tsx ===
+/// <reference path="react18/react18.d.ts" />
+/// <reference path="react18/global.d.ts" />
+
+const a = (
+>a : Symbol(a, Decl(index.tsx, 3, 5))
+
+  <main>
+>main : Symbol(JSX.IntrinsicElements.main, Decl(react18.d.ts, 3206, 102))
+
+    {(<div />) as unknown}
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react18.d.ts, 3174, 110))
+
+    <span />
+>span : Symbol(JSX.IntrinsicElements.span, Decl(react18.d.ts, 3238, 110))
+
+  </main>
+>main : Symbol(JSX.IntrinsicElements.main, Decl(react18.d.ts, 3206, 102))
+
+);
+

tests/baselines/reference/jsxChildWrongType.types

@@ -0,0 +1,27 @@
+=== tests/cases/compiler/index.tsx ===
+/// <reference path="react18/react18.d.ts" />
+/// <reference path="react18/global.d.ts" />
+
+const a = (
+>a : JSX.Element
+>(  <main>    {(<div />) as unknown}    <span />  </main>) : JSX.Element
+
+  <main>
+><main>    {(<div />) as unknown}    <span />  </main> : JSX.Element
+>main : any
+
+    {(<div />) as unknown}
+>(<div />) as unknown : unknown
+>(<div />) : JSX.Element
+><div /> : JSX.Element
+>div : any
+
+    <span />
+><span /> : JSX.Element
+>span : any
+
+  </main>
+>main : any
+
+);
+

tests/baselines/reference/jsxChildrenArrayWrongType.errors.txt

@@ -0,0 +1,29 @@
+tests/cases/compiler/index.tsx(11,5): error TS2769: No overload matches this call.
+  Overload 2 of 2, '(props: PropsType, context: any): Foo', gave the following error.
+    Type 'unknown' is not assignable to type 'string | boolean'.
+  Overload 2 of 2, '(props: PropsType, context: any): Foo', gave the following error.
+    Type 'string' is not assignable to type 'number | boolean'.
+
+
+==== tests/cases/compiler/index.tsx (1 errors) ====
+    /// <reference path="/.lib/react18/react18.d.ts" />
+    /// <reference path="/.lib/react18/global.d.ts" />
+    
+    // target is ES5, so no `Iterable` type is present.
+    
+    interface PropsType {
+        children: [string, number] | boolean[];
+    }
+    declare class Foo extends React.Component<PropsType, {}> {}
+    const b = (
+        <Foo>
+        ~~~~~
+!!! error TS2769: No overload matches this call.
+!!! error TS2769:   Overload 2 of 2, '(props: PropsType, context: any): Foo', gave the following error.
+!!! error TS2769:     Type 'unknown' is not assignable to type 'string | boolean'.
+!!! error TS2769:   Overload 2 of 2, '(props: PropsType, context: any): Foo', gave the following error.
+!!! error TS2769:     Type 'string' is not assignable to type 'number | boolean'.
+            {<div/> as unknown}
+            {"aa"}
+        </Foo>
+    );

tests/baselines/reference/jsxChildrenArrayWrongType.js

@@ -0,0 +1,24 @@
+//// [index.tsx]
+/// <reference path="/.lib/react18/react18.d.ts" />
+/// <reference path="/.lib/react18/global.d.ts" />
+
+// target is ES5, so no `Iterable` type is present.
+
+interface PropsType {
+    children: [string, number] | boolean[];
+}
+declare class Foo extends React.Component<PropsType, {}> {}
+const b = (
+    <Foo>
+        {<div/> as unknown}
+        {"aa"}
+    </Foo>
+);
+
+//// [index.js]
+"use strict";
+/// <reference path="react18/react18.d.ts" />
+/// <reference path="react18/global.d.ts" />
+var b = (React.createElement(Foo, null,
+    React.createElement("div", null),
+    "aa"));

tests/baselines/reference/jsxChildrenArrayWrongType.symbols

@@ -0,0 +1,33 @@
+=== tests/cases/compiler/index.tsx ===
+/// <reference path="react18/react18.d.ts" />
+/// <reference path="react18/global.d.ts" />
+
+// target is ES5, so no `Iterable` type is present.
+
+interface PropsType {
+>PropsType : Symbol(PropsType, Decl(index.tsx, 0, 0))
+
+    children: [string, number] | boolean[];
+>children : Symbol(PropsType.children, Decl(index.tsx, 5, 21))
+}
+declare class Foo extends React.Component<PropsType, {}> {}
+>Foo : Symbol(Foo, Decl(index.tsx, 7, 1))
+>React.Component : Symbol(React.Component, Decl(react18.d.ts, 427, 50), Decl(react18.d.ts, 430, 90))
+>React : Symbol(React, Decl(react18.d.ts, 62, 15))
+>Component : Symbol(React.Component, Decl(react18.d.ts, 427, 50), Decl(react18.d.ts, 430, 90))
+>PropsType : Symbol(PropsType, Decl(index.tsx, 0, 0))
+
+const b = (
+>b : Symbol(b, Decl(index.tsx, 9, 5))
+
+    <Foo>
+>Foo : Symbol(Foo, Decl(index.tsx, 7, 1))
+
+        {<div/> as unknown}
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react18.d.ts, 3174, 110))
+
+        {"aa"}
+    </Foo>
+>Foo : Symbol(Foo, Decl(index.tsx, 7, 1))
+
+);

tests/baselines/reference/jsxChildrenArrayWrongType.types

@@ -0,0 +1,36 @@
+=== tests/cases/compiler/index.tsx ===
+/// <reference path="react18/react18.d.ts" />
+/// <reference path="react18/global.d.ts" />
+
+// target is ES5, so no `Iterable` type is present.
+
+interface PropsType {
+    children: [string, number] | boolean[];
+>children : [string, number] | boolean[]
+}
+declare class Foo extends React.Component<PropsType, {}> {}
+>Foo : Foo
+>React.Component : React.Component<PropsType, {}, any>
+>React : typeof React
+>Component : typeof React.Component
+
+const b = (
+>b : JSX.Element
+>(    <Foo>        {<div/> as unknown}        {"aa"}    </Foo>) : JSX.Element
+
+    <Foo>
+><Foo>        {<div/> as unknown}        {"aa"}    </Foo> : JSX.Element
+>Foo : typeof Foo
+
+        {<div/> as unknown}
+><div/> as unknown : unknown
+><div/> : JSX.Element
+>div : any
+
+        {"aa"}
+>"aa" : "aa"
+
+    </Foo>
+>Foo : typeof Foo
+
+);

tests/baselines/reference/jsxChildrenWrongType.errors.txt

@@ -0,0 +1,28 @@
+tests/cases/compiler/other.tsx(10,5): error TS2769: No overload matches this call.
+  Overload 2 of 2, '(props: PropsType, context: any): Foo', gave the following error.
+    Type 'unknown' is not assignable to type 'string | boolean'.
+  Overload 2 of 2, '(props: PropsType, context: any): Foo', gave the following error.
+    Type 'string' is not assignable to type 'number | boolean'.
+
+
+==== tests/cases/compiler/other.tsx (1 errors) ====
+    /// <reference path="/.lib/react18/react18.d.ts" />
+    /// <reference path="/.lib/react18/global.d.ts" />
+    
+    
+    interface PropsType {
+        children: [string, number?] | Iterable<boolean>;
+    }
+    declare class Foo extends React.Component<PropsType, {}> {}
+    const b = (
+        <Foo>
+        ~~~~~
+!!! error TS2769: No overload matches this call.
+!!! error TS2769:   Overload 2 of 2, '(props: PropsType, context: any): Foo', gave the following error.
+!!! error TS2769:     Type 'unknown' is not assignable to type 'string | boolean'.
+!!! error TS2769:   Overload 2 of 2, '(props: PropsType, context: any): Foo', gave the following error.
+!!! error TS2769:     Type 'string' is not assignable to type 'number | boolean'.
+            {<div/> as unknown}
+            {"aa"}
+        </Foo>
+    );

tests/baselines/reference/jsxChildrenWrongType.js

@@ -0,0 +1,23 @@
+//// [other.tsx]
+/// <reference path="/.lib/react18/react18.d.ts" />
+/// <reference path="/.lib/react18/global.d.ts" />
+
+
+interface PropsType {
+    children: [string, number?] | Iterable<boolean>;
+}
+declare class Foo extends React.Component<PropsType, {}> {}
+const b = (
+    <Foo>
+        {<div/> as unknown}
+        {"aa"}
+    </Foo>
+);
+
+//// [other.js]
+"use strict";
+/// <reference path="react18/react18.d.ts" />
+/// <reference path="react18/global.d.ts" />
+const b = (React.createElement(Foo, null,
+    React.createElement("div", null),
+    "aa"));

tests/baselines/reference/jsxChildrenWrongType.symbols

@@ -0,0 +1,33 @@
+=== tests/cases/compiler/other.tsx ===
+/// <reference path="react18/react18.d.ts" />
+/// <reference path="react18/global.d.ts" />
+
+
+interface PropsType {
+>PropsType : Symbol(PropsType, Decl(other.tsx, 0, 0))
+
+    children: [string, number?] | Iterable<boolean>;
+>children : Symbol(PropsType.children, Decl(other.tsx, 4, 21))
+>Iterable : Symbol(Iterable, Decl(lib.es2015.iterable.d.ts, --, --))
+}
+declare class Foo extends React.Component<PropsType, {}> {}
+>Foo : Symbol(Foo, Decl(other.tsx, 6, 1))
+>React.Component : Symbol(React.Component, Decl(react18.d.ts, 427, 50), Decl(react18.d.ts, 430, 90))
+>React : Symbol(React, Decl(react18.d.ts, 62, 15))
+>Component : Symbol(React.Component, Decl(react18.d.ts, 427, 50), Decl(react18.d.ts, 430, 90))
+>PropsType : Symbol(PropsType, Decl(other.tsx, 0, 0))
+
+const b = (
+>b : Symbol(b, Decl(other.tsx, 8, 5))
+
+    <Foo>
+>Foo : Symbol(Foo, Decl(other.tsx, 6, 1))
+
+        {<div/> as unknown}
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react18.d.ts, 3174, 110))
+
+        {"aa"}
+    </Foo>
+>Foo : Symbol(Foo, Decl(other.tsx, 6, 1))
+
+);

tests/baselines/reference/jsxChildrenWrongType.types

@@ -0,0 +1,35 @@
+=== tests/cases/compiler/other.tsx ===
+/// <reference path="react18/react18.d.ts" />
+/// <reference path="react18/global.d.ts" />
+
+
+interface PropsType {
+    children: [string, number?] | Iterable<boolean>;
+>children : [string, number?] | Iterable<boolean>
+}
+declare class Foo extends React.Component<PropsType, {}> {}
+>Foo : Foo
+>React.Component : React.Component<PropsType, {}, any>
+>React : typeof React
+>Component : typeof React.Component
+
+const b = (
+>b : JSX.Element
+>(    <Foo>        {<div/> as unknown}        {"aa"}    </Foo>) : JSX.Element
+
+    <Foo>
+><Foo>        {<div/> as unknown}        {"aa"}    </Foo> : JSX.Element
+>Foo : typeof Foo
+
+        {<div/> as unknown}
+><div/> as unknown : unknown
+><div/> : JSX.Element
+>div : any
+
+        {"aa"}
+>"aa" : "aa"
+
+    </Foo>
+>Foo : typeof Foo
+
+);

tests/cases/compiler/jsxChildWrongType.tsx

@@ -0,0 +1,18 @@
+// @jsx: react
+// @strict: true
+// @target: ES2017
+// @module: ESNext
+// @esModuleInterop: true
+// @skipLibCheck: true
+
+
+// @filename: index.tsx
+/// <reference path="/.lib/react18/react18.d.ts" />
+/// <reference path="/.lib/react18/global.d.ts" />
+
+const a = (
+  <main>
+    {(<div />) as unknown}
+    <span />
+  </main>
+);

tests/cases/compiler/jsxChildrenArrayWrongType.tsx

@@ -0,0 +1,23 @@
+// @jsx: react
+// @strict: true
+// @target: ES5
+// @module: ESNext
+// @esModuleInterop: true
+// @skipLibCheck: true
+
+// @filename: index.tsx
+/// <reference path="/.lib/react18/react18.d.ts" />
+/// <reference path="/.lib/react18/global.d.ts" />
+
+// target is ES5, so no `Iterable` type is present.
+
+interface PropsType {
+    children: [string, number] | boolean[];
+}
+declare class Foo extends React.Component<PropsType, {}> {}
+const b = (
+    <Foo>
+        {<div/> as unknown}
+        {"aa"}
+    </Foo>
+);

tests/cases/compiler/jsxChildrenWrongType.tsx

@@ -0,0 +1,23 @@
+// @jsx: react
+// @strict: true
+// @target: ES2017
+// @module: ESNext
+// @esModuleInterop: true
+// @skipLibCheck: true
+
+// @filename: other.tsx
+// @exactOptionalPropertyTypes: true
+/// <reference path="/.lib/react18/react18.d.ts" />
+/// <reference path="/.lib/react18/global.d.ts" />
+
+
+interface PropsType {
+    children: [string, number?] | Iterable<boolean>;
+}
+declare class Foo extends React.Component<PropsType, {}> {}
+const b = (
+    <Foo>
+        {<div/> as unknown}
+        {"aa"}
+    </Foo>
+);

tests/lib/react18/global.d.ts

@@ -0,0 +1,155 @@
+/*
+React projects that don't include the DOM library need these interfaces to compile.
+React Native applications use React, but there is no DOM available. The JavaScript runtime
+is ES6/ES2015 only. These definitions allow such projects to compile with only `--lib ES6`.
+
+Warning: all of these interfaces are empty. If you want type definitions for various properties
+(such as HTMLInputElement.prototype.value), you need to add `--lib DOM` (via command line or tsconfig.json).
+*/
+
+interface Event { }
+interface AnimationEvent extends Event { }
+interface ClipboardEvent extends Event { }
+interface CompositionEvent extends Event { }
+interface DragEvent extends Event { }
+interface FocusEvent extends Event { }
+interface KeyboardEvent extends Event { }
+interface MouseEvent extends Event { }
+interface TouchEvent extends Event { }
+interface PointerEvent extends Event { }
+interface TransitionEvent extends Event { }
+interface UIEvent extends Event { }
+interface WheelEvent extends Event { }
+
+interface EventTarget { }
+interface Document { }
+interface DataTransfer { }
+interface StyleMedia { }
+
+interface Element { }
+interface DocumentFragment { }
+
+interface HTMLElement extends Element { }
+interface HTMLAnchorElement extends HTMLElement { }
+interface HTMLAreaElement extends HTMLElement { }
+interface HTMLAudioElement extends HTMLElement { }
+interface HTMLBaseElement extends HTMLElement { }
+interface HTMLBodyElement extends HTMLElement { }
+interface HTMLBRElement extends HTMLElement { }
+interface HTMLButtonElement extends HTMLElement { }
+interface HTMLCanvasElement extends HTMLElement { }
+interface HTMLDataElement extends HTMLElement { }
+interface HTMLDataListElement extends HTMLElement { }
+interface HTMLDetailsElement extends HTMLElement { }
+interface HTMLDialogElement extends HTMLElement { }
+interface HTMLDivElement extends HTMLElement { }
+interface HTMLDListElement extends HTMLElement { }
+interface HTMLEmbedElement extends HTMLElement { }
+interface HTMLFieldSetElement extends HTMLElement { }
+interface HTMLFormElement extends HTMLElement { }
+interface HTMLHeadingElement extends HTMLElement { }
+interface HTMLHeadElement extends HTMLElement { }
+interface HTMLHRElement extends HTMLElement { }
+interface HTMLHtmlElement extends HTMLElement { }
+interface HTMLIFrameElement extends HTMLElement { }
+interface HTMLImageElement extends HTMLElement { }
+interface HTMLInputElement extends HTMLElement { }
+interface HTMLModElement extends HTMLElement { }
+interface HTMLLabelElement extends HTMLElement { }
+interface HTMLLegendElement extends HTMLElement { }
+interface HTMLLIElement extends HTMLElement { }
+interface HTMLLinkElement extends HTMLElement { }
+interface HTMLMapElement extends HTMLElement { }
+interface HTMLMetaElement extends HTMLElement { }
+interface HTMLMeterElement extends HTMLElement { }
+interface HTMLObjectElement extends HTMLElement { }
+interface HTMLOListElement extends HTMLElement { }
+interface HTMLOptGroupElement extends HTMLElement { }
+interface HTMLOptionElement extends HTMLElement { }
+interface HTMLOutputElement extends HTMLElement { }
+interface HTMLParagraphElement extends HTMLElement { }
+interface HTMLParamElement extends HTMLElement { }
+interface HTMLPreElement extends HTMLElement { }
+interface HTMLProgressElement extends HTMLElement { }
+interface HTMLQuoteElement extends HTMLElement { }
+interface HTMLSlotElement extends HTMLElement { }
+interface HTMLScriptElement extends HTMLElement { }
+interface HTMLSelectElement extends HTMLElement { }
+interface HTMLSourceElement extends HTMLElement { }
+interface HTMLSpanElement extends HTMLElement { }
+interface HTMLStyleElement extends HTMLElement { }
+interface HTMLTableElement extends HTMLElement { }
+interface HTMLTableColElement extends HTMLElement { }
+interface HTMLTableDataCellElement extends HTMLElement { }
+interface HTMLTableHeaderCellElement extends HTMLElement { }
+interface HTMLTableRowElement extends HTMLElement { }
+interface HTMLTableSectionElement extends HTMLElement { }
+interface HTMLTemplateElement extends HTMLElement { }
+interface HTMLTextAreaElement extends HTMLElement { }
+interface HTMLTimeElement extends HTMLElement { }
+interface HTMLTitleElement extends HTMLElement { }
+interface HTMLTrackElement extends HTMLElement { }
+interface HTMLUListElement extends HTMLElement { }
+interface HTMLVideoElement extends HTMLElement { }
+interface HTMLWebViewElement extends HTMLElement { }
+
+interface SVGElement extends Element { }
+interface SVGSVGElement extends SVGElement { }
+interface SVGCircleElement extends SVGElement { }
+interface SVGClipPathElement extends SVGElement { }
+interface SVGDefsElement extends SVGElement { }
+interface SVGDescElement extends SVGElement { }
+interface SVGEllipseElement extends SVGElement { }
+interface SVGFEBlendElement extends SVGElement { }
+interface SVGFEColorMatrixElement extends SVGElement { }
+interface SVGFEComponentTransferElement extends SVGElement { }
+interface SVGFECompositeElement extends SVGElement { }
+interface SVGFEConvolveMatrixElement extends SVGElement { }
+interface SVGFEDiffuseLightingElement extends SVGElement { }
+interface SVGFEDisplacementMapElement extends SVGElement { }
+interface SVGFEDistantLightElement extends SVGElement { }
+interface SVGFEDropShadowElement extends SVGElement { }
+interface SVGFEFloodElement extends SVGElement { }
+interface SVGFEFuncAElement extends SVGElement { }
+interface SVGFEFuncBElement extends SVGElement { }
+interface SVGFEFuncGElement extends SVGElement { }
+interface SVGFEFuncRElement extends SVGElement { }
+interface SVGFEGaussianBlurElement extends SVGElement { }
+interface SVGFEImageElement extends SVGElement { }
+interface SVGFEMergeElement extends SVGElement { }
+interface SVGFEMergeNodeElement extends SVGElement { }
+interface SVGFEMorphologyElement extends SVGElement { }
+interface SVGFEOffsetElement extends SVGElement { }
+interface SVGFEPointLightElement extends SVGElement { }
+interface SVGFESpecularLightingElement extends SVGElement { }
+interface SVGFESpotLightElement extends SVGElement { }
+interface SVGFETileElement extends SVGElement { }
+interface SVGFETurbulenceElement extends SVGElement { }
+interface SVGFilterElement extends SVGElement { }
+interface SVGForeignObjectElement extends SVGElement { }
+interface SVGGElement extends SVGElement { }
+interface SVGImageElement extends SVGElement { }
+interface SVGLineElement extends SVGElement { }
+interface SVGLinearGradientElement extends SVGElement { }
+interface SVGMarkerElement extends SVGElement { }
+interface SVGMaskElement extends SVGElement { }
+interface SVGMetadataElement extends SVGElement { }
+interface SVGPathElement extends SVGElement { }
+interface SVGPatternElement extends SVGElement { }
+interface SVGPolygonElement extends SVGElement { }
+interface SVGPolylineElement extends SVGElement { }
+interface SVGRadialGradientElement extends SVGElement { }
+interface SVGRectElement extends SVGElement { }
+interface SVGStopElement extends SVGElement { }
+interface SVGSwitchElement extends SVGElement { }
+interface SVGSymbolElement extends SVGElement { }
+interface SVGTextElement extends SVGElement { }
+interface SVGTextPathElement extends SVGElement { }
+interface SVGTSpanElement extends SVGElement { }
+interface SVGUseElement extends SVGElement { }
+interface SVGViewElement extends SVGElement { }
+
+interface Text { }
+interface TouchList { }
+interface WebGLRenderingContext { }
+interface WebGL2RenderingContext { }