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.
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.
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.
Open Node.js command prompt and run
node jsxtyper.js example.jsx
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']);
};