Skip to content
master
Switch branches/tags
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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

About

[DEPRECATED] Wrapper to make react play nicely with typescript

Resources

Releases

No releases published

Packages

No packages published