diff --git a/types/create-react-class/create-react-class-tests.ts b/types/create-react-class/create-react-class-tests.ts index c3f7c620ef..ae62233135 100644 --- a/types/create-react-class/create-react-class-tests.ts +++ b/types/create-react-class/create-react-class-tests.ts @@ -73,6 +73,12 @@ const ClassicComponent: React.ClassicComponentClass = createReactClass = React.createFactory(ClassicComponent); @@ -81,6 +87,7 @@ const classicFactoryElement: React.ClassicElement = // React.createElement const classicElement: React.ClassicElement = React.createElement(ClassicComponent, props); +const classicElementNullProps: React.ClassicElement<{}> = React.createElement(ClassicComponentNoProps, null); // React.cloneElement const clonedClassicElement: React.ClassicElement = diff --git a/types/react/index.d.ts b/types/react/index.d.ts index d7ea8d2b8b..83ab445356 100644 --- a/types/react/index.d.ts +++ b/types/react/index.d.ts @@ -193,37 +193,37 @@ declare namespace React { // TODO: generalize this to everything in `keyof ReactHTML`, not just "input" function createElement( type: "input", - props?: InputHTMLAttributes & ClassAttributes, + props?: InputHTMLAttributes & ClassAttributes | null, ...children: ReactNode[]): DetailedReactHTMLElement, HTMLInputElement>; function createElement

, T extends HTMLElement>( type: keyof ReactHTML, - props?: ClassAttributes & P, + props?: ClassAttributes & P | null, ...children: ReactNode[]): DetailedReactHTMLElement; function createElement

, T extends SVGElement>( type: keyof ReactSVG, - props?: ClassAttributes & P, + props?: ClassAttributes & P | null, ...children: ReactNode[]): ReactSVGElement; function createElement

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

( type: SFC

, - props?: Attributes & P, + props?: Attributes & P | null, ...children: ReactNode[]): SFCElement

; function createElement

( type: ClassType, ClassicComponentClass

>, - props?: ClassAttributes> & P, + props?: ClassAttributes> & P | null, ...children: ReactNode[]): CElement>; function createElement, C extends ComponentClass

>( type: ClassType, - props?: ClassAttributes & P, + props?: ClassAttributes & P | null, ...children: ReactNode[]): CElement; function createElement

( type: SFC

| ComponentClass

| string, - props?: Attributes & P, + props?: Attributes & P | null, ...children: ReactNode[]): ReactElement

; // DOM Elements diff --git a/types/react/test/index.ts b/types/react/test/index.ts index d767de4487..3e2be1605f 100644 --- a/types/react/test/index.ts +++ b/types/react/test/index.ts @@ -141,6 +141,9 @@ const StatelessComponent3: React.SFC = // allows null return props => props.foo ? DOM.div(null, props.foo, props.children) : null; +// allows null as props +const StatelessComponent4: React.SFC = props => null; + // React.createFactory const factory: React.CFactory = React.createFactory(ModernComponent); @@ -160,15 +163,22 @@ const domFactoryElement: React.DOMElement, Element> = // React.createElement const element: React.CElement = React.createElement(ModernComponent, props); const elementNoState: React.CElement = React.createElement(ModernComponentNoState, props); +const elementNullProps: React.CElement<{}, ModernComponentNoPropsAndState> = React.createElement(ModernComponentNoPropsAndState, null); const statelessElement: React.SFCElement = React.createElement(StatelessComponent, props); +const statelessElementNullProps: React.SFCElement = React.createElement(StatelessComponent4, null); const domElement: React.DOMElement, HTMLDivElement> = React.createElement("div"); +const domElementNullProps = React.createElement("div", null); const htmlElement = React.createElement("input", { type: "text" }); +const inputElementNullProps: React.DOMElement, HTMLInputElement> = React.createElement("input", null); const svgElement = React.createElement("svg", { accentHeight: 12 }); +const svgElementNullProps = React.createElement("svg", null); const fragmentElement: React.ReactElement<{}> = React.createElement(React.Fragment, {}, [React.createElement("div"), React.createElement("div")]); +const fragmentElementNullProps: React.ReactElement<{}> = React.createElement(React.Fragment, null, [React.createElement("div"), React.createElement("div")]); const customProps: React.HTMLProps = props; const customDomElement = "my-element"; const nonLiteralElement = React.createElement(customDomElement, customProps); +const customDomElementNullProps = React.createElement(customDomElement, null); // https://github.com/Microsoft/TypeScript/issues/15019