A binding layer between React and TypeScript. React currently uses a createClass
function which takes in a component specification and then binds the value of this
. Unfortunately TypeScript does not support that currently but there are several proposals to do that in the future. React moving to a world which supports ES6 classes will also make this unnecessary. In the meantime, this library quite simple provides a class to extend and factory function to convert the prototype for createClass
.
npm install typed-react --save
/// <reference path='../path/to/react.d.ts' />
/// <reference path='../path/to/typed-react.d.ts' />
import React = require("react");
import TypedReact = require("typed-react");
export interface TimerProps {
tickInterval: number;
}
interface TimerState {
ticksElapsed: number;
}
class Timer extends TypedReact.Component<TimerProps, TimerState> {
private interval: number;
getInitialState() {
return {
ticksElapsed: 0
};
}
tick() {
this.setState({
ticksElapsed: this.state.ticksElapsed + 1
});
}
componentDidMount() {
this.interval = setInterval(this.tick, this.props.tickInterval);
}
componentWillUnmount() {
clearInterval(this.interval);
}
render() {
return React.DOM.div(null, "Ticks Elapsed: ", this.state.ticksElapsed);
}
}
export var timer = TypedReact.createClass(Timer);
In this case we export the Props and the Factory but we could make the props and state inline interfaces and just export the factory function.
TypedReact supports using existing React Mixins as well as defining new mixins with idiomatic TypeScript. The example is based on http://www.typescriptlang.org/Handbook#mixins. You need to use extractPrototype
on your own mixins and should export that from your mixin modules.
/// <reference path='../path/to/react.d.ts' />
/// <reference path='../path/to/typed-react.d.ts' />
import React = require("react/addons");
import TypedReact = require("typed-react");
export interface GreeterProps {
name: string;
}
class GreetingMixin extends TypedReact.Mixin<GreeterProps, {}> {
greet(greeting: string): React.ReactHTMLElement {
return React.DOM.h1(null, greeting, this.props.name);
}
}
class Greeter extends TypedReact.Component<GreeterProps, {}> implements GreetingMixin {
greet: (greeting: string) => React.ReactHTMLElement;
render() {
return this.greet(this.greeting);
}
}
export var greeter = TypedReact.createClass(Greeter, [
TypedReact.createMixin(GreetingMixin),
React.addons.PureRenderMixin
]);
- 3.2 Update with new
react.d.ts
typings - 3.1
extractPrototype
is nowcreateMixin
- 3.0 Idiomatic Mixin Support
- 2.2 Making React a peer dependency. This means you do not need to pass
React.createClass
intocreateClass
. - 2.1 Switching to createClass
- 2.0 React 0.12.RC
- 1.4 Removed incorrect mixin support
- 1.3 Mixins
npm install -g gulp
npm install -g tsd
git clone [email protected]:Asana/typed-react.git
cd typed-react
npm install
tsd reinstall --overwrite --save