diff --git a/types/create-react-class/create-react-class-tests.ts b/types/create-react-class/create-react-class-tests.ts index b8025b23f0..3d7536d722 100644 --- a/types/create-react-class/create-react-class-tests.ts +++ b/types/create-react-class/create-react-class-tests.ts @@ -11,7 +11,7 @@ interface State { bar: number; } -const props: Props & React.ClassAttributes<{}> = { +const props: Props = { foo: "foo" }; diff --git a/types/react-daterange-picker/index.d.ts b/types/react-daterange-picker/index.d.ts index e6fac4c33d..9d1d3ec565 100644 --- a/types/react-daterange-picker/index.d.ts +++ b/types/react-daterange-picker/index.d.ts @@ -12,7 +12,7 @@ import * as momentRange from "moment-range"; export default class DateRangePicker extends React.Component { } export as namespace ReactDateRangePicker; -export interface Props extends React.Props<{}> { +export interface Props extends React.Props { bemBlock?: string; bemNamespace?: string; dateStates?: DateState[]; @@ -57,7 +57,7 @@ export interface StateDefinition { selectable?: boolean; } -export interface PaginationArrowProps extends React.Props<{}> { +export interface PaginationArrowProps extends React.Props { disabled?: boolean; onTrigger?(): void; direction?: 'next' | 'previous'; diff --git a/types/react/index.d.ts b/types/react/index.d.ts index 968063559a..beaf5327d5 100644 --- a/types/react/index.d.ts +++ b/types/react/index.d.ts @@ -15,6 +15,7 @@ // Josh Rutherford // Guilherme Hübner // Josh Goldberg +// Ferdy Budhidharma // Johann Rakotoharisoa // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped // TypeScript Version: 2.6 @@ -79,7 +80,12 @@ declare namespace React { type ComponentType

= ComponentClass

| StatelessComponent

; type Key = string | number; - type Ref = string | { bivarianceHack(instance: T | null): any }["bivarianceHack"]; + + interface RefObject { + readonly current: T | null; + } + + type Ref = string | { bivarianceHack(instance: T | null): any }["bivarianceHack"] | RefObject; // tslint:disable-next-line:interface-over-type-literal type ComponentState = {}; @@ -334,6 +340,14 @@ declare namespace React { displayName?: string; } + interface RefForwardingComponent { + (props: P & { children?: ReactNode }, ref?: Ref): ReactElement | null; + propTypes?: ValidationMap

; + contextTypes?: ValidationMap; + defaultProps?: Partial

; + displayName?: string; + } + interface ComponentClass

extends StaticLifecycle { new (props: P, context?: any): Component; propTypes?: ValidationMap

; @@ -535,6 +549,10 @@ declare namespace React { [propertyName: string]: any; } + function createRef(): RefObject; + + function forwardRef(Component: RefForwardingComponent): ComponentType

>; + // // Event System // ---------------------------------------------------------------------- diff --git a/types/react/test/index.ts b/types/react/test/index.ts index 1df0282ee8..4ec98db218 100644 --- a/types/react/test/index.ts +++ b/types/react/test/index.ts @@ -37,7 +37,8 @@ interface MyComponent extends React.Component { reset(): void; } -const props: Props & React.ClassAttributes<{}> = { +// use any for ClassAttribute type sine we're using string refs +const props: Props & React.ClassAttributes = { key: 42, ref: "myComponent42", hello: "world", @@ -288,6 +289,15 @@ DOM.div({ ref: node => domNodeRef = node }); let inputNodeRef: HTMLInputElement | null; DOM.input({ ref: node => inputNodeRef = node as HTMLInputElement }); +const ForwardingRefComponent = React.forwardRef((props: {}, ref: React.Ref) => { + return React.createElement(RefComponent, { ref }); +}); + +function RefCarryingComponent() { + const ref: React.RefObject = React.createRef(); + return React.createElement(ForwardingRefComponent, { ref }); +} + // // Attributes // --------------------------------------------------------------------------