diff --git a/types/react/index.d.ts b/types/react/index.d.ts index b137832de4..c5742de8c7 100644 --- a/types/react/index.d.ts +++ b/types/react/index.d.ts @@ -52,7 +52,7 @@ declare namespace React { } interface ReactElement

{ - type: string | keyof ReactHTML | keyof ReactSVG | ComponentClass

| SFC

; + type: string | ComponentClass

| SFC

; props: P; key: Key | null; } @@ -69,18 +69,18 @@ declare namespace React { type ClassicElement

= CElement>; - // ReactHTML for ReactHTMLElement - // ReactSVG for ReactSVGElement // string fallback for custom web-components interface DOMElement

, T extends Element> extends ReactElement

{ - type: string | keyof ReactHTML | keyof ReactSVG; + type: string; ref: Ref; } + // ReactHTML for ReactHTMLElement interface ReactHTMLElement extends DOMElement, T> { type: keyof ReactHTML; } + // ReactSVG for ReactSVGElement interface ReactSVGElement extends DOMElement, SVGElement> { type: keyof ReactSVG; } @@ -132,8 +132,15 @@ declare namespace React { function createClass(spec: ComponentSpec): ClassicComponentClass

; + // DOM Elements + function createFactory( + type: keyof ReactHTML): HTMLFactory; + function createFactory( + type: keyof ReactSVG): SVGFactory; function createFactory

, T extends Element>( - type: keyof ReactHTML): DOMFactory; + type: string): DOMFactory; + + // Custom components function createFactory

(type: SFC

): SFCFactory

; function createFactory

( type: ClassType, ClassicComponentClass

>): CFactory>; @@ -141,6 +148,7 @@ declare namespace React { type: ClassType): CFactory; function createFactory

(type: ComponentClass

): Factory

; + // DOM Elements function createElement

, T extends HTMLElement>( type: keyof ReactHTML, props?: ClassAttributes & P, @@ -149,10 +157,12 @@ declare namespace React { type: keyof ReactSVG, props?: ClassAttributes & P, ...children: ReactNode[]): ReactSVGElement; - function createElement

, T extends Element>( - type: string | keyof ReactSVG | keyof ReactHTML, + function createElement

, T extends Element>( + type: string, props?: ClassAttributes & P, - ...children: ReactNode[]): DOMElement, T>; + ...children: ReactNode[]): DOMElement; + + // Custom components function createElement

( type: SFC

, props?: Attributes & P, @@ -170,6 +180,7 @@ declare namespace React { props?: Attributes & P, ...children: ReactNode[]): ReactElement

; + // DOM Elements // ReactHTMLElement function cloneElement

, T extends HTMLElement>( element: ReactHTMLElement, @@ -185,6 +196,8 @@ declare namespace React { element: DOMElement, props?: DOMAttributes & P, ...children: ReactNode[]): DOMElement; + + // Custom components function cloneElement

( element: SFCElement

, props?: Q, // should be Q & Attributes, but then Q is inferred as {} diff --git a/types/react/test/index.ts b/types/react/test/index.ts index ef3e3c6bdc..7264bfa2ea 100644 --- a/types/react/test/index.ts +++ b/types/react/test/index.ts @@ -189,6 +189,10 @@ const domElement: React.DOMElement, HTMLDiv const htmlElement = React.createElement("input", { type: "text" }); const svgElement = React.createElement("svg", { accentHeight: 12 }); +let customProps: React.HTMLProps = props; +let customDomElement: string = "my-element"; +const nonLiteralElement = React.createElement(customDomElement, customProps); + // React.cloneElement const clonedElement: React.CElement = React.cloneElement(element, { foo: 43 });