wassname/DefinitelyTyped
1
0
Fork 0
mirror of https://github.com/wassname/DefinitelyTyped.git synced 2026-08-20 12:00:53 +08:00
Code Issues Packages Projects Releases Wiki Activity

[react] Add ComponentElement<P, T> for instance type inference

Browse Source
This commit is contained in:
Vincent Siao
2016-03-14 02:05:24 -07:00
parent 5e85e146c6
commit 1a67b639ce
5 changed files with 125 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files
react/react-addons-test-utils.d.ts
Vendored
+11 -10
View File
@@ -96,10 +96,12 @@ declare namespace __React {
export function renderIntoDocument<T extends Element>(
element: DOMElement<any, T>): T;
export function renderIntoDocument(
element: SFCElement<any>): void;
export function renderIntoDocument<T extends Component<any, any>>(
element: CElement<any, T>): T;
export function renderIntoDocument<P>(
element: ReactElement<P>): Component<P, any>;
export function renderIntoDocument<C extends Component<any, any>>(
element: ReactElement<any>): C;
element: ReactElement<P>): Component<P, {}> | Element | void;
export function mockComponent(
mocked: MockedComponentClass, mockTagName?: string): typeof TestUtils;
@@ -115,9 +117,8 @@ declare namespace __React {
export function isDOMComponent(instance: ReactInstance): instance is Element;
export function isCompositeComponent(instance: ReactInstance): instance is Component<any, any>;
export function isCompositeComponentWithType(
instance: ReactInstance,
type: ComponentClass<any>): boolean;
export function isCompositeComponentWithType<T extends Component<any, any>, C extends ComponentClass<any>>(
instance: ReactInstance, type: ClassType<any, T, C>): T;
export function findAllInRenderedTree(
root: Component<any, any>,
@@ -137,13 +138,13 @@ declare namespace __React {
root: Component<any, any>,
tagName: string): Element;
export function scryRenderedComponentsWithType<T extends Component<{}, {}>>(
export function scryRenderedComponentsWithType<T extends Component<{}, {}>, C extends ComponentClass<{}>>(
root: Component<any, any>,
type: { new(): T }): T[];
type: ClassType<any, T, C>): T[];
export function findRenderedComponentWithType<T extends Component<{}, {}>>(
export function findRenderedComponentWithType<T extends Component<{}, {}>, C extends ComponentClass<{}>>(
root: Component<any, any>,
type: { new(): T }): T;
type: ClassType<any, T, C>): T;
export function createRenderer(): ShallowRenderer;
}
react/react-dom.d.ts
Vendored
+20 -11
View File
@@ -14,14 +14,18 @@ declare namespace __React {
element: DOMElement<P, T>,
container: Element,
callback?: (element: T) => any): T;
function render<P, S>(
element: ClassicElement<P>,
function render<P>(
element: SFCElement<P>,
container: Element,
callback?: (component: ClassicComponent<P, S>) => any): ClassicComponent<P, S>;
function render<P, S>(
callback?: () => any): void;
function render<P, T extends Component<P, {}>>(
element: CElement<P, T>,
container: Element,
callback?: (component: T) => any): T;
function render<P>(
element: ReactElement<P>,
container: Element,
callback?: (component: Component<P, S>) => any): Component<P, S>;
callback?: (component?: Component<P, {}> | Element) => any): Component<P, {}> | Element | void;
function unmountComponentAtNode(container: Element): boolean;
@@ -36,16 +40,21 @@ declare namespace __React {
element: DOMElement<P, T>,
container: Element,
callback?: (element: T) => any): T;
function unstable_renderSubtreeIntoContainer<P, S>(
function unstable_renderSubtreeIntoContainer<P, T extends Component<P, {}>>(
parentComponent: Component<any, any>,
nextElement: ClassicElement<P>,
element: CElement<P, T>,
container: Element,
callback?: (component: ClassicComponent<P, S>) => any): ClassicComponent<P, S>;
function unstable_renderSubtreeIntoContainer<P, S>(
callback?: (component: T) => any): T;
function render<P>(
parentComponent: Component<any, any>,
nextElement: ReactElement<P>,
element: SFCElement<P>,
container: Element,
callback?: (component: Component<P, S>) => any): Component<P, S>;
callback?: () => any): void;
function unstable_renderSubtreeIntoContainer<P>(
parentComponent: Component<any, any>,
element: ReactElement<P>,
container: Element,
callback?: (component?: Component<P, {}> | Element) => any): Component<P, {}> | Element | void;
}
namespace __DOMServer {
react/react-global-tests.ts
+4 -4
View File
@@ -115,9 +115,9 @@ class ModernComponent extends React.Component<Props, State>
}
// React.createFactory
var factory: React.Factory<Props> =
var factory: React.CFactory<Props, ModernComponent> =
React.createFactory(ModernComponent);
var factoryElement: React.ReactElement<Props> =
var factoryElement: React.CElement<Props, ModernComponent> =
factory(props);
var classicFactory: React.ClassicFactory<Props> =
@@ -131,7 +131,7 @@ var domFactoryElement: React.DOMElement<React.DOMAttributes, Element> =
domFactory();
// React.createElement
var element: React.ReactElement<Props> =
var element: React.CElement<Props, ModernComponent> =
React.createElement(ModernComponent, props);
var classicElement: React.ClassicElement<Props> =
React.createElement(ClassicComponent, props);
@@ -139,7 +139,7 @@ var domElement: React.ReactHTMLElement<HTMLDivElement> =
React.createElement("div");
// React.cloneElement
var clonedElement: React.ReactElement<Props> =
var clonedElement: React.CElement<Props, ModernComponent> =
React.cloneElement(element, props);
var clonedClassicElement: React.ClassicElement<Props> =
React.cloneElement(classicElement, props);
react/react-tests.ts
+28 -14
View File
@@ -142,27 +142,31 @@ interface SCProps {
foo?: number;
}
var StatelessComponent = (props: SCProps) => {
function StatelessComponent(props: SCProps) {
return React.DOM.div(null, props.foo);
};
namespace StatelessComponent {
export var displayName = "StatelessComponent";
export var defaultProps = { foo: 42 };
}
// Must explicitly type-annotate to add displayName/defaultProps/contextTypes
var StatelessComponent2: React.StatelessComponent<SCProps> =
(props: SCProps) => React.DOM.div(null, props.foo);
var StatelessComponent2: React.SFC<SCProps> =
// props is contextually typed
props => React.DOM.div(null, props.foo);
StatelessComponent2.displayName = "StatelessComponent2";
StatelessComponent2.defaultProps = {
foo: 42
};
// React.createFactory
var factory: React.Factory<Props> =
var factory: React.CFactory<Props, ModernComponent> =
React.createFactory(ModernComponent);
var factoryElement: React.ReactElement<Props> =
var factoryElement: React.CElement<Props, ModernComponent> =
factory(props);
var statelessFactory: React.Factory<SCProps> =
var statelessFactory: React.SFCFactory<SCProps> =
React.createFactory(StatelessComponent);
var statelessElement: React.ReactElement<SCProps> =
var statelessElement: React.SFCElement<SCProps> =
statelessFactory(props);
var classicFactory: React.ClassicFactory<Props> =
@@ -176,9 +180,9 @@ var domFactoryElement: React.DOMElement<React.DOMAttributes, Element> =
domFactory();
// React.createElement
var element: React.ReactElement<Props> =
var element: React.CElement<Props, ModernComponent> =
React.createElement(ModernComponent, props);
var statelessElement: React.ReactElement<SCProps> =
var statelessElement: React.SFCElement<SCProps> =
React.createElement(StatelessComponent, props);
var classicElement: React.ClassicElement<Props> =
React.createElement(ClassicComponent, props);
@@ -186,9 +190,19 @@ var domElement: React.ReactHTMLElement<HTMLDivElement> =
React.createElement("div");
// React.cloneElement
var clonedElement: React.ReactElement<Props> =
var clonedElement: React.CElement<Props, ModernComponent> =
React.cloneElement(element, { foo: 43 });
var clonedStatelessElement: React.ReactElement<SCProps> =
var clonedElement2: React.CElement<Props, ModernComponent> =
// known problem: cloning with key or ref requires cast
React.cloneElement(element, <React.ClassAttributes<ModernComponent>>{
ref: c => c.reset()
});
var clonedElement3: React.CElement<Props, ModernComponent> =
React.cloneElement(element, <{ foo: number } & React.Attributes>{
key: "8eac7",
foo: 55
});
var clonedStatelessElement: React.SFCElement<SCProps> =
// known problem: cloning with optional props don't work properly
// workaround: cast to actual props type
React.cloneElement(statelessElement, <SCProps>{ foo: 44 });
@@ -200,7 +214,7 @@ var clonedDOMElement: React.ReactHTMLElement<HTMLDivElement> =
});
// React.render
var component: React.Component<Props, any> =
var component: ModernComponent =
ReactDOM.render(element, container);
var classicComponent: React.ClassicComponent<Props, any> =
ReactDOM.render(classicElement, container);
@@ -224,7 +238,7 @@ var type: React.ComponentClass<Props> = element.type;
var elementProps: Props = element.props;
var key: React.Key = element.key;
var t: React.ReactType<any>;
var t: React.ReactType;
var name = typeof t === "string" ? t : t.displayName;
//
react/react.d.ts
Vendored
+62 -20
View File
@@ -10,6 +10,7 @@ declare namespace __React {
// ----------------------------------------------------------------------
type ReactType = string | ComponentClass<any> | StatelessComponent<any>;
type Key = string | number;
type Ref<T> = string | ((instance: T) => any);
@@ -20,17 +21,24 @@ declare namespace __React {
ref?: Ref<T>;
}
interface ReactElement<P extends Props<any>> {
type: string | ComponentClass<P> | StatelessComponent<P>;
interface ReactElement<P> {
type: string | ComponentClass<P> | SFC<P>;
props: P;
key?: Key;
}
interface ClassicElement<P> extends ReactElement<P> {
type: ClassicComponentClass<P>;
ref: Ref<ClassicComponent<P, any>>;
interface SFCElement<P> extends ReactElement<P> {
type: SFC<P>;
}
type CElement<P, T extends Component<P, {}>> = ComponentElement<P, T>;
interface ComponentElement<P, T extends Component<P, {}>> extends ReactElement<P> {
type: ComponentClass<P>;
ref?: Ref<T>;
}
type ClassicElement<P> = CElement<P, ClassicComponent<P, {}>>;
interface DOMElement<P extends DOMAttributes, T extends Element> extends ReactElement<P> {
type: string;
ref: Ref<T>;
@@ -50,10 +58,17 @@ declare namespace __React {
(props?: P & Attributes, ...children: ReactNode[]): ReactElement<P>;
}
interface ClassicFactory<P> extends Factory<P> {
(props?: P & ClassAttributes<ClassicComponent<P, {}>>, ...children: ReactNode[]): ClassicElement<P>;
interface SFCFactory<P> {
(props?: P & Attributes, ...children: ReactNode[]): SFCElement<P>;
}
interface ComponentFactory<P, T extends Component<P, {}>> {
(props?: P & ClassAttributes<T>, ...children: ReactNode[]): CElement<P, T>;
}
type CFactory<P, T extends Component<P, {}>> = ComponentFactory<P, T>;
type ClassicFactory<P> = CFactory<P, ClassicComponent<P, {}>>;
interface DOMFactory<P extends DOMAttributes, T extends Element> {
(props?: P & ClassAttributes<T>, ...children: ReactNode[]): DOMElement<P, T>;
}
@@ -84,20 +99,32 @@ declare namespace __React {
function createFactory<P extends DOMAttributes, T extends Element>(
type: string): DOMFactory<P, T>;
function createFactory<P>(type: ClassicComponentClass<P>): ClassicFactory<P>;
function createFactory<P>(type: ComponentClass<P> | StatelessComponent<P>): Factory<P>;
function createFactory<P>(type: SFC<P>): SFCFactory<P>;
function createFactory<P>(
type: ClassType<P, ClassicComponent<P, {}>, ClassicComponentClass<P>>): CFactory<P, ClassicComponent<P, {}>>;
function createFactory<P, T extends Component<P, {}>, C extends ComponentClass<P>>(
type: ClassType<P, T, C>): CFactory<P, T>;
function createFactory<P>(type: ComponentClass<P> | SFC<P>): Factory<P>;
function createElement<P extends DOMAttributes, T extends Element>(
type: string,
props?: P & ClassAttributes<T>,
...children: ReactNode[]): DOMElement<P, T>;
function createElement<P>(
type: ClassicComponentClass<P>,
props?: P & ClassAttributes<ClassicComponent<P, {}>>,
...children: ReactNode[]): ClassicElement<P>;
type: SFC<P>,
props?: P & Attributes,
...children: ReactNode[]): SFCElement<P>;
function createElement<P>(
type: ComponentClass<P> | StatelessComponent<P>,
props?: P & ClassAttributes<Component<P, {}>>,
type: ClassType<P, ClassicComponent<P, {}>, ClassicComponentClass<P>>,
props?: P & ClassAttributes<ClassicComponent<P, {}>>,
...children: ReactNode[]): CElement<P, ClassicComponent<P, {}>>;
function createElement<P, T extends Component<P, {}>, C extends ComponentClass<P>>(
type: ClassType<P, T, C>,
props?: P & ClassAttributes<T>,
...children: ReactNode[]): CElement<P, T>;
function createElement<P>(
type: ComponentClass<P> | SFC<P>,
props?: P & Attributes,
...children: ReactNode[]): ReactElement<P>;
function cloneElement<P extends DOMAttributes, T extends Element>(
@@ -105,12 +132,16 @@ declare namespace __React {
props?: P & ClassAttributes<T>,
...children: ReactNode[]): DOMElement<P, T>;
function cloneElement<P extends Q, Q>(
element: ClassicElement<P>,
props?: Q & ClassAttributes<ClassicComponent<P, {}>>,
...children: ReactNode[]): ClassicElement<P>;
element: SFCElement<P>,
props?: Q, // should be Q & Attributes, but then Q is inferred as {}
...children: ReactNode[]): SFCElement<P>;
function cloneElement<P extends Q, Q, T extends Component<P, {}>>(
element: CElement<P, T>,
props?: Q, // should be Q & ClassAttributes<T>
...children: ReactNode[]): CElement<P, T>;
function cloneElement<P extends Q, Q>(
element: ReactElement<P>,
props?: Q & Attributes,
props?: Q, // should be Q & Attributes
...children: ReactNode[]): ReactElement<P>;
function isValidElement<P>(object: {}): object is ReactElement<P>;
@@ -160,6 +191,7 @@ declare namespace __React {
// Class Interfaces
// ----------------------------------------------------------------------
type SFC<P> = StatelessComponent<P>;
interface StatelessComponent<P> {
(props?: P, context?: any): ReactElement<any>;
propTypes?: ValidationMap<P>;
@@ -169,7 +201,7 @@ declare namespace __React {
}
interface ComponentClass<P> {
new(props?: P, context?: any): Component<P, any>;
new(props?: P, context?: any): Component<P, {}>;
propTypes?: ValidationMap<P>;
contextTypes?: ValidationMap<any>;
childContextTypes?: ValidationMap<any>;
@@ -178,10 +210,20 @@ declare namespace __React {
}
interface ClassicComponentClass<P> extends ComponentClass<P> {
new(props?: P, context?: any): ClassicComponent<P, any>;
new(props?: P, context?: any): ClassicComponent<P, {}>;
getDefaultProps?(): P;
}
/**
* We use an intersection type to infer multiple type parameters from
* a single argument, which is useful for many top-level API defs.
* See https://github.com/Microsoft/TypeScript/issues/7234 for more info.
*/
type ClassType<P, T extends Component<P, {}>, C extends ComponentClass<P>> =
C &
(new() => T) &
(new() => { props: P });
//
// Component Specs and Lifecycle
// ----------------------------------------------------------------------