This repository is outdated and not maintained, it was an experiment more than anything else, you should check typed-react

React Typescript

React wrapper to make it play nicely with typescript.

warning: ReactTypescript can actualy only be used with commonjs modules and browserify, if someone does want AMD I'll gladly accept any PR that would packages it for another format.

Installation

react-typescript is dependent on npm so just have to install Node.js.

npm install git://github.com/fdecampredon/react-typescript.git#no-constructor
#npm install react-typescript (not published yet since this is alpha)

After installing react-typescript with npm, download the declaration files for React, React addons, and ReactTypescript from /Declaration.

Usage

Basic

To create a React component using ReactTypescript, simply extends ReactComponentBase :

importReact= require('react');importReactTypescript= require('react-typescript');classHelloMessageextendsReactTypescript.ReactComponentBase<{name: string;},{}>{render(){returnReact.DOM.div(null,'Hello '+this.props.name);}}React.renderComponent(newHelloMessage({name: 'Jhon'}),mountNode);

the 2 generic types passed to ReactComponentBase correspond to the desired type for the 'props' and 'state' of a react component.

Mixins

To use mixins simply use the applyMixins static method of ReactComponentBase

importReact= require('react');importReactTypescript= require('react-typescript');classHelloMessageextendsReactTypescript.ReactComponentBase<{name: string;},{}>{getGreetMessage:(name: string)=>stringrender(){returnReact.DOM.div(null,this.getGreetMessage(this.props.name));}}HelloMessage.applyMixins({getGreetMessage(name: string){return'Hello '+name;}});

AutoBind Methods

In react, methods are automaticly bound to a component, this is not the case when using ReactTypecript, to activate this behavious you can use the autoBindMethods function of ReactTypescript :

classMyButtonextendsReactTypeScript.ReactComponentBase<{message: string},any>{clickHandler(event: React.MouseEvent){alert(this.props.message);}render(){returnReact.DOM.button({onClick: this.clickHandler},'Click Me');}}ReactTypeScript.autoBindMethods(MyComponent);

However you can also use the TypeScript way with a property assigned to fat arrow function:

classMyButtonextendsReactTypeScript.ReactComponentBase<{message: string},any>{clickHandler=(event: React.MouseEvent)=>{alert(this.props.message);}render(){returnReact.DOM.button({onClick: this.clickHandler},'Click Me');}}

Mixins methods are always automaticly bound