JSXtyper

JSXtyper generates TypeScript interfaces from your .jsx files. By referencing the generated .ts file and using the generated props and state interfaces you can make sure all data expected by the .jsx is supplied, and catch any typos at build-time.

How to build JSXtyper

Install Node if you haven't already. Then open Node.js command prompt and run:

npm install

This will install esprima-fb, estraverse and estraverse-fb.

We also depend on estree.d.ts. This file will be automatically downloaded when you build the solution in Visual Studio, unless you have turned off automatic downloading of dependencies. To manually download this dependency open Package Manager Console and type:

Install-Package estree.TypeScript.DefinitelyTyped

You are now ready to build. Open the .sln file in Visual Studio and select Build > Build Solution from the menu. Note that you must have Node.js Tools for Visual Studio installed in order to open .njsproj projects.

Example

Here's an example .jsx file and the corresponding generated .ts file:

var OrderPage = React.createClass({
  getInitialState: function () {
    return { orderStatus: this.props.initialOrderStatus };
  },
  render: function () {
    var header = 
      <div>
        <div>Customer: {this.props.customerName}</div>
        <div>Order Date: {this.props.orderDate}</div>
      </div>;
    var details = [];
    for (var i = 0; i < this.props.items.length; i++) {
      var item = this.props.items[i];
      details.push(
        <tr>
          <td>{item.name}</td>
          <td>{item.price}</td>
        </tr>
      );
    };
    return (
      <div>
        {header}
        <table>
           <tbody>
             {details}
             <tr>
               <td><b>Total</b></td>
               <td><b>{this.props.total}</b></td>
             </tr>
           </tbody>
        </table>
        <div>Status: {this.state.orderStatus}</div>
      </div>
    );
  }
});

The following TypeScript interfaces were automatically generated from the JSX file above.

// This file was automatically generated by jsxtyper. Do not modify by hand!

interface OrderPageProps {
    initialOrderStatus: any;
    customerName: any;
    orderDate: any;
    items: {
        name: any;
        price: any;
    }[];
    total: any;
}

interface OrderPageState {
    orderStatus: any;
}

declare var OrderPage: React.ComponentClass<OrderPageProps>;

The generated interfaces are compatible with react-global.d.ts.

The SampleProject folder contains a complete sample project.

How to run JSXtyper

Open Node.js command prompt and run

node jsxtyper.js example.jsx

Grunt task

JSXtyper can also be invoked from Grunt.

To install type

npm install grunt-jsxtyper --save-dev

Here's a sample Gruntfile.js:

module.exports = function(grunt) {

  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    jsxtyper: {
      'Generated/Views.ts': ['Views/*.jsx']
    }
  });

  grunt.loadNpmTasks('grunt-jsxtyper');

  grunt.registerTask('default', ['jsxtyper']);
};