[DEPRECATED] Wrapper to make react play nicely with typescript
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
declarations
examples
third_party
.gitignore
Gruntfile.js
Readme.md
index.js
package.json

Readme.md

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 :

import React = require('react');
import ReactTypescript = require('react-typescript');

class HelloMessage extends ReactTypescript.ReactComponentBase<{ name: string; }, {}> {
  render() {
    return React.DOM.div(null, 'Hello ' + this.props.name);
  }
}

React.renderComponent(new HelloMessage({ 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

import React = require('react');
import ReactTypescript = require('react-typescript');

class HelloMessage extends ReactTypescript.ReactComponentBase<{ name: string; }, {}> {
  getGreetMessage:(name: string) => string
  render() {
    return React.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 :

class MyButton extends  ReactTypeScript.ReactComponentBase<{ message: string}, any> {
    clickHandler(event: React.MouseEvent) {
        alert(this.props.message);
    }
    
    render() {
        return React.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:

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

Mixins methods are always automaticly bound