Merge pull request #3141 from stkb/react

React: couple of improvements

react/react-tests.ts

@@ -72,13 +72,23 @@ React.createClass(PropTypesSpecification);
 
 var mountNode: Element;
 
-var HelloMessage = React.createClass({displayName: 'HelloMessage',
+interface HelloMessageProps {
+    name: string;
+}
+
+var HelloMessage = React.createClass<HelloMessageProps, any>({displayName: 'HelloMessage',
     render: function() {
-        return React.DOM.div(null, "Hello ", (<React.Component<{name: string}, any>>this).props.name);
+        return React.DOM.div(null, "Hello ", (<React.Component<HelloMessageProps, any>>this).props.name);
     }
 });
 
-React.render(HelloMessage({name: "John"}), mountNode);
+// This code - calling a component directly - is deprecated in v0.12
+// See http://fb.me/react-legacyfactory
+React.render(HelloMessage({ name: "John" }), mountNode);
+
+// Create a factory instead
+var HelloMessageFactory = React.createFactory(HelloMessage)
+React.render(HelloMessageFactory({ name: "John" }), mountNode)
 
 var Timer = React.createClass({displayName: 'Timer',
     getInitialState: function() {
@@ -104,4 +114,4 @@ var Timer = React.createClass({displayName: 'Timer',
     }
 });
 
-React.render(Timer(null), mountNode);
+React.render(Timer(), mountNode);

react/react.d.ts

@@ -4,7 +4,7 @@
 // Definitions: https://github.com/borisyankov/DefinitelyTyped
 
 declare module "react" {
-export = React;
+    export = React;
 }
 
 declare module React {
@@ -50,11 +50,11 @@ declare module React {
 
 
     export interface ReactComponentFactory<P> {
-        (properties: P, ...children: any[]): ReactComponentElement<P>;
+        (properties?: P, ...children: any[]): ReactComponentElement<P>;
     }
 
     export interface ReactElementFactory<P> {
-        (properties: P, ...children: any[]): ReactDOMElement<P>;
+        (properties?: P, ...children: any[]): ReactDOMElement<P>;
     }
 
     export interface DomElement extends ReactElementFactory<DomAttributes> {
@@ -117,6 +117,11 @@ declare module React {
 
     export interface DomReferencer {
         getDOMNode(): Element;
+        /**
+        * Use this overload to cast the returned element to a more specific type.
+        * Eg: var name = this.refs['name'].getDOMNode<HTMLInputElement>().value
+        */
+        getDOMNode<TElement extends Element>(): TElement;
     }
 
     export interface Component<P, S> extends DomReferencer {