diff --git a/react/react-global-tests.ts b/react/react-global-tests.ts index ac8b85116..d4c8aa9f1 100644 --- a/react/react-global-tests.ts +++ b/react/react-global-tests.ts @@ -1,6 +1,6 @@ /// -interface Props extends React.Props { +interface Props { hello: string; world?: string; foo: number; @@ -24,7 +24,7 @@ interface MyComponent extends React.Component { reset(): void; } -var props: Props = { +var props: Props & React.ClassAttributes<{}> = { key: 42, ref: "myComponent42", hello: "world", diff --git a/react/react-tests.ts b/react/react-tests.ts index 9147194dc..4a9c7de63 100644 --- a/react/react-tests.ts +++ b/react/react-tests.ts @@ -23,7 +23,7 @@ import TestUtils = require("react-addons-test-utils"); import TransitionGroup = require("react-addons-transition-group"); import update = require("react-addons-update"); -interface Props extends React.Props { +interface Props { hello: string; world?: string; foo: number; @@ -46,7 +46,7 @@ interface MyComponent extends React.Component { reset(): void; } -var props: Props = { +var props: Props & React.ClassAttributes<{}> = { key: 42, ref: "myComponent42", hello: "world", @@ -138,7 +138,7 @@ class ModernComponent extends React.Component } } -interface SCProps extends React.Props<{}> { +interface SCProps { foo?: number; } @@ -250,12 +250,9 @@ myComponent.reset(); // // Refs -// NB: to infer the correct type for callback refs, your component's Props -// interface must extend React.Props where T is your component type (or -// an interface that it implements). // -------------------------------------------------------------------------- -interface RCProps extends React.Props { +interface RCProps { } class RefComponent extends React.Component { diff --git a/react/react.d.ts b/react/react.d.ts index f4369e4a1..3e55ca7eb 100644 --- a/react/react.d.ts +++ b/react/react.d.ts @@ -13,11 +13,17 @@ declare namespace __React { type Key = string | number; type Ref = string | ((instance: T) => any); + interface Attributes { + key?: Key; + } + interface ClassAttributes extends Attributes { + ref?: Ref; + } + interface ReactElement

> { type: string | ComponentClass

| StatelessComponent

; props: P; - key: Key; - ref: Ref | Element>; + key?: Key; } interface ClassicElement

extends ReactElement

{ @@ -25,16 +31,16 @@ declare namespace __React { ref: Ref>; } - interface DOMElement

> extends ReactElement

{ + interface DOMElement

extends ReactElement

{ type: string; ref: Ref; } - interface ReactHTMLElement extends DOMElement> { + interface ReactHTMLElement extends DOMElement { ref: Ref; } - interface ReactSVGElement extends DOMElement { + interface ReactSVGElement extends DOMElement { ref: Ref; } @@ -43,19 +49,19 @@ declare namespace __React { // ---------------------------------------------------------------------- interface Factory

{ - (props?: P, ...children: ReactNode[]): ReactElement

; + (props?: P & Attributes, ...children: ReactNode[]): ReactElement

; } interface ClassicFactory

extends Factory

{ - (props?: P, ...children: ReactNode[]): ClassicElement

; + (props?: P & ClassAttributes>, ...children: ReactNode[]): ClassicElement

; } - interface DOMFactory

> extends Factory

{ - (props?: P, ...children: ReactNode[]): DOMElement

; + interface DOMFactory

{ + (props?: P & ClassAttributes, ...children: ReactNode[]): DOMElement

; } - type HTMLFactory = DOMFactory>; - type SVGFactory = DOMFactory; + type HTMLFactory = DOMFactory; + type SVGFactory = DOMFactory; // // React Nodes @@ -79,37 +85,37 @@ declare namespace __React { function createFactory

(type: ClassicComponentClass

): ClassicFactory

; function createFactory

(type: ComponentClass

| StatelessComponent

): Factory

; - function createElement

( + function createElement

( type: string, - props?: P, + props?: P & ClassAttributes, ...children: ReactNode[]): DOMElement

; function createElement

( type: ClassicComponentClass

, - props?: P, + props?: P & ClassAttributes>, ...children: ReactNode[]): ClassicElement

; function createElement

( type: ComponentClass

| StatelessComponent

, - props?: P, + props?: P & ClassAttributes>, ...children: ReactNode[]): ReactElement

; function cloneElement( element: ReactHTMLElement, - props?: HTMLProps, + props?: HTMLAttributes & ClassAttributes, ...children: ReactNode[]): ReactHTMLElement; function cloneElement( element: ReactSVGElement, - props?: SVGProps, + props?: SVGAttributes & ClassAttributes, ...children: ReactNode[]): ReactSVGElement; function cloneElement

( element: ClassicElement

, - props?: Q, + props?: Q & ClassAttributes>, ...children: ReactNode[]): ClassicElement

; function cloneElement

( element: ReactElement

, - props?: Q, + props?: Q & Attributes, ...children: ReactNode[]): ReactElement

; - function isValidElement(object: {}): boolean; + function isValidElement

(object: {}): object is ReactElement

; var DOM: ReactDOM; var PropTypes: ReactPropTypes; @@ -128,7 +134,13 @@ declare namespace __React { setState(state: S, callback?: () => any): void; forceUpdate(callBack?: () => any): void; render(): JSX.Element; - props: P; + + // React.Props is now deprecated, which means that the `children` + // property is not available on `P` by default, even though you can + // always pass children as variadic arguments to `createElement`. + // In the future, if we can define its call signature conditionallly + // on the existence of `children` in `P`, then we should remove this. + props: P & { children?: ReactNode }; state: S; context: {}; refs: { @@ -325,19 +337,34 @@ declare namespace __React { // Props / DOM Attributes // ---------------------------------------------------------------------- + /** + * @deprecated. This was used to allow clients to pass `ref` and `key` + * to `createElement`, which is no longer necessary due to intersection + * types. If you need to declare a props object before passing it to + * `createElement` or a factory, use `ClassAttributes`: + * + * ```ts + * var b: Button; + * var props: ButtonProps & ClassAttributes