diff --git a/types/idyll-document/idyll-document-tests.ts b/types/idyll-document/idyll-document-tests.ts index 880e017013..7a08c0189d 100644 --- a/types/idyll-document/idyll-document-tests.ts +++ b/types/idyll-document/idyll-document-tests.ts @@ -1,5 +1,7 @@ import IdyllDocument, { IdyllDocumentProps } from "idyll-document"; -import { createElement } from "react"; +import { createElement, ReactElement } from "react"; -// $ExpectType ReactElement -createElement(IdyllDocument); +const doc = createElement(IdyllDocument); + +// $ExpectType true +type test = typeof doc extends ReactElement ? true : false; diff --git a/types/ink/index.d.ts b/types/ink/index.d.ts index f91d83df75..23f4fe5d80 100644 --- a/types/ink/index.d.ts +++ b/types/ink/index.d.ts @@ -59,7 +59,7 @@ export abstract class Component< S extends Record = {}, C extends Record = {} > { - readonly props: P; + readonly props: P & { children?: InkNode }; readonly context: C; setState( diff --git a/types/react/index.d.ts b/types/react/index.d.ts index 1df5c5256a..e561e8f131 100644 --- a/types/react/index.d.ts +++ b/types/react/index.d.ts @@ -57,6 +57,10 @@ declare namespace React { ComponentType

; type ComponentType

= ComponentClass

| FunctionComponent

; + type JSXElementConstructor

= + | ((props: P) => ReactElement | null) + | (new (props: P) => Component); + type Key = string | number; interface RefObject { @@ -78,33 +82,35 @@ declare namespace React { ref?: LegacyRef; } - interface ReactElement

{ - type: string | ComponentClass

| FunctionComponent

; + interface ReactElement = string | JSXElementConstructor> { + type: T; props: P; key: Key | null; } + interface ReactComponentElement< + T extends keyof JSX.IntrinsicElements | JSXElementConstructor, + P = Pick, Exclude, 'key' | 'ref'>> + > extends ReactElement { } + /** * @deprecated Please use `FunctionComponentElement` */ type SFCElement

= FunctionComponentElement

; - interface FunctionComponentElement

extends ReactElement

{ - type: FunctionComponent

; + interface FunctionComponentElement

extends ReactElement> { ref?: 'ref' extends keyof P ? P extends { ref?: infer R } ? R : never : never; } type CElement> = ComponentElement; - interface ComponentElement> extends ReactElement

{ - type: ComponentClass

; + interface ComponentElement> extends ReactElement> { ref?: LegacyRef; } type ClassicElement

= CElement>; // string fallback for custom web-components - interface DOMElement

| SVGAttributes, T extends Element> extends ReactElement

{ - type: string; + interface DOMElement

| SVGAttributes, T extends Element> extends ReactElement { ref: LegacyRef; } @@ -491,10 +497,6 @@ declare namespace React { getDefaultProps?(): P; } - type JSXElementConstructor

= - | ((props: P) => ReactElement | null) - | (new (props: P) => Component); - /** * We use an intersection type to infer multiple type parameters from * a single argument, which is useful for many top-level API defs. @@ -2586,12 +2588,11 @@ declare namespace React { // ---------------------------------------------------------------------- interface ReactChildren { - map>(children: C[], fn: (child: C, index: number) => T): T[]; - map(children: ReactNode, fn: (child: ReactChild, index: number) => T): T[]; - forEach(children: ReactNode, fn: (child: ReactChild, index: number) => void): void; - count(children: ReactNode): number; - only(children: ReactNode): ReactElement; - toArray(children: ReactNode): ReactChild[]; + map(children: C | C[], fn: (child: C, index: number) => T): T[]; + forEach(children: C | C[], fn: (child: C, index: number) => void): void; + count(children: any): number; + only(children: C): C extends any[] ? never : C; + toArray(children: C | C[]): C[]; } // @@ -2670,7 +2671,7 @@ type ReactManagedAttributes = C extends { propTypes: infer T; defaultProps declare global { namespace JSX { // tslint:disable-next-line:no-empty-interface - interface Element extends React.ReactElement { } + interface Element extends React.ReactElement { } interface ElementClass extends React.Component { render(): React.ReactNode; } diff --git a/types/react/test/index.ts b/types/react/test/index.ts index a2c6ebab36..ada2f860ba 100644 --- a/types/react/test/index.ts +++ b/types/react/test/index.ts @@ -488,7 +488,7 @@ DOM.svg({ // -------------------------------------------------------------------------- const mappedChildrenArray: number[] = - React.Children.map(children, (child) => 42); + React.Children.map(children, (child: any) => 42); const childrenArray: Array> = children; const mappedChildrenArrayWithKnownChildren: number[] = React.Children.map(childrenArray, (child) => child.props.p); @@ -498,6 +498,23 @@ let onlyChild: React.ReactElement = React.Children.only(DOM.div()); // ok onlyChild = React.Children.only([null, [[["Hallo"], true]], false]); // error const childrenToArray: React.ReactChild[] = React.Children.toArray(children); +declare const numberChildren: number[]; +declare const elementChildren: JSX.Element[]; +declare const mixedChildren: Array; +declare const singlePluralChildren: JSX.Element | JSX.Element[]; +declare const renderPropsChildren: () => JSX.Element; + +// $ExpectType number[] +const mappedChildrenArray2 = React.Children.map(numberChildren, num => num); +// $ExpectType Element[] +const mappedChildrenArray3 = React.Children.map(elementChildren, element => element); +// $ExpectType (string | Element)[] +const mappedChildrenArray4 = React.Children.map(mixedChildren, elementOrString => elementOrString); +// $ExpectType (string | number | null)[] +const mappedChildrenArray5 = React.Children.map(singlePluralChildren, element => element.key); +// $ExpectType string[] +const mappedChildrenArray6 = React.Children.map(renderPropsChildren, element => element.name); + // // Example from http://facebook.github.io/react/ // -------------------------------------------------------------------------- @@ -774,7 +791,7 @@ class RenderChildren extends React.Component { const Memoized1 = React.memo(function Foo(props: { foo: string }) { return null; }); React.createElement(Memoized1, { foo: 'string' }); -const Memoized2 = React.memo( +const Memoized2 = React.memo<{ bar: string }>( function Bar(props: { bar: string }) { return null; }, (prevProps, nextProps) => prevProps.bar === nextProps.bar ); diff --git a/types/react/test/tsx.tsx b/types/react/test/tsx.tsx index 9309799de7..119a82db11 100644 --- a/types/react/test/tsx.tsx +++ b/types/react/test/tsx.tsx @@ -361,7 +361,7 @@ interface TestPropTypesProps3 { const testPropTypes = { foo: PropTypes.string }; -type DeclaredPropTypes

= Required['propTypes'], undefined>>; +type DeclaredPropTypes

= Required['propTypes'], undefined>>; // $ExpectType false type propTypesTest = typeof testPropTypes extends DeclaredPropTypes ? true : false; // $ExpectType true diff --git a/types/styled-react-modal/index.d.ts b/types/styled-react-modal/index.d.ts index 3598e8d55b..48a0d67b32 100644 --- a/types/styled-react-modal/index.d.ts +++ b/types/styled-react-modal/index.d.ts @@ -10,6 +10,7 @@ import { StyledComponent, AnyStyledComponent, CSSObject, InterpolationFunction } declare const BaseModalBackground: StyledComponent<'div', any>; interface ModalProps { + children?: React.ReactNode; isOpen: boolean; allowScroll?: boolean; afterOpen?: () => void;