• Stars
    star
    373
  • Rank 114,600 (Top 3 %)
  • Language
    TypeScript
  • License
    MIT License
  • Created about 10 years ago
  • Updated over 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

A binding layer between React and TypeScript

Typed React

NPM Version Build Status Coverage

A binding layer between React and TypeScript for the React.createClass syntax. With React 0.13, you can use ES6 classes to inherit from React components. This works well with TypeScript and you can just use the type definitions in DefinitelyTyped. The inheritance path has some different functionality so you may still want to use the React.createClass pattern. TypedReact can help you implement that pattern by providing a dummy parent class and a set of functions to appropriately extract the prototype for React.createClass

Installation

npm install typed-react --save

Example

/// <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.

Mixins

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 createMixin 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
]);

Changelog

  • 3.3 Updating the React type definitions and moving the location of the type definition
  • 3.2 Update with new react.d.ts typings
  • 3.1 extractPrototype is now createMixin
  • 3.0 Idiomatic Mixin Support
  • 2.2 Making React a peer dependency. This means you do not need to pass React.createClass into createClass.
  • 2.1 Switching to createClass
  • 2.0 React 0.12.RC
  • 1.4 Removed incorrect mixin support
  • 1.3 Mixins

Development Setup

git clone [email protected]:Asana/typed-react.git
cd typed-react
npm install
npm run typings
npm test

More Repositories

1

Drawsana

An open source library that lets your users draw on things - mark up images with text, shapes, etc.
Swift
645
star
2

kraken

Distributed Pubsub Server for Realtime Apps
Erlang
335
star
3

python-asana

Official Python client library for the Asana API v1
Python
280
star
4

node-asana

Official node.js and browser JS client for the Asana API v1
JavaScript
249
star
5

Chrome-Extension-Example

Sample application illustrating use of the Asana API
JavaScript
232
star
6

php-asana

Official PHP client library for the Asana API v1
PHP
135
star
7

locheck

Validate iOS, Android, and Mac localizations. Find errors in .strings, .stringsdict, and strings.xml files.
Swift
97
star
8

bazels3cache

Small web server for a Bazel cache, proxies to S3; allows Bazel to work offline; async uploads to make Bazel faster
TypeScript
79
star
9

ruby-asana

Official Ruby client library for the Asana API v1
Ruby
76
star
10

bazeltsc

TypeScript compiler that knows how to run as a Bazel "persistent worker"
TypeScript
39
star
11

java-asana

Official Java client library for the Asana API v1
Java
35
star
12

create-app-attachment-github-action

TypeScript
33
star
13

devrel-examples

A place to share some examples from our Developer Relations team for commonly-asked-about workflows.
Python
27
star
14

comment-on-task-github-action

TypeScript
25
star
15

asana2sql

Utility for exporting Asana data to SQL databases
Python
23
star
16

api-explorer

React component to explore the Asana API
TypeScript
19
star
17

omniauth-asana

Official Asana strategy for OmniAuth
Ruby
16
star
18

SGTM

Python
14
star
19

asana-api-meta

Metadata for Asana API for generating client libraries and documenation
HTML
11
star
20

kraken-node-client

A nodejs client for the Kraken pubsub server
JavaScript
10
star
21

tsutil

TypeScript Utility Data Structures
TypeScript
9
star
22

node-asana-phrase

A random error phrase generator used to create memorable error codes, as used by Asana.
JavaScript
9
star
23

typescript-namespace-imports-vscode-plugin

A VSCode plugin that makes it easier to automatically include TypeScript namespace imports.
TypeScript
6
star
24

asana-shift

A small node script which uses the Asana API to shift all task start and due dates relative to a project's due date.
TypeScript
5
star
25

markdown-formatter

JavaScript
5
star
26

random-one-on-one

Python
5
star
27

app-components-example-app

app-components-example-app
JavaScript
4
star
28

ohmega

The Asana Ohmega process automation toolkit
Python
4
star
29

openapi

Python
4
star
30

sshca

Certificate authority for OpenSSH
Python
3
star
31

jira-server-plugin

Asana for Jira Server
3
star
32

node-asana-preview

A preview of Asana's new node client library
JavaScript
3
star
33

app-components-rule-action-example-app

JavaScript
3
star
34

python-asana-preview

A preview of Asana's new python client library
Python
3
star
35

node-sync-to-github

A node library that makes it easy to sync a directory of files to a GitHub repo using the GitHub API
JavaScript
3
star
36

deprovision_inactive_guests

A small script which uses the Asana API to remove external users (ie without a company email) from an organization if they haven't logged in for 30 days
JavaScript
2
star
37

archie

Python
2
star
38

formula-custom-fields

JavaScript
1
star
39

node-linux-fork

An implementation of fork() for Node.JS in Linux (requires a custom Node.JS build)
C++
1
star