Gists for the blog post porting react app to tyescript

currentlocation.ts

import {Url,parse} from "url";

interface MvcUrl extends Url {
  controller : string;
}

function extractFirstPart(url : Url) : string {
  var url2 = url.path.substring(1);
  if (url2.indexOf('/') == -1)
    return url2;
  return url2.substring(0, url2.indexOf('/'))
}

var theUrl = <MvcUrl>parse(window.location.href);
theUrl.controller = extractFirstPart(theUrl);

export = theUrl;

EntryPoint.ts

import {assign}  from 'lodash'

function startModule() {
  //etc.
}

global['Project'] = assign(global['Project'] || {}, {
  startModule
});

Externals_shallow.d.ts

interface JQuery {
  autocomplete(options: any): JQuery;
  datepicker(options: any): JQuery;
  modal(arg : any) : JQuery; //From bootstrap
  ejChart(arg : any) : JQuery // From syncfusion
}

declare module ReactRouter {
  interface RouteHandlerProp {
    key : string | number;
    hub : any;
    state : Object;
  }

  interface RouteProp {
    hub? : any;
  }

  interface LinkProp {
    className : string;
  }
}

GulpfileBundling.js

var start = require('gulp-start-process');
...
gulp.task('js_app', ['build_ts'], function() {
  var b = browserify({ 
    entries: ["ts_modules/area1/App.js", "ts_modules/area2/App.js"], debug: doMapFiles 
  })
  .external(externalCommonModules.concat(['charting']))
  .bundle()
  .pipe(source('app.js'))
  .pipe(gulp.dest(targetRoot));
});

gulp.task('build_ts', function(cb) {
  return start('npm run compile_ts', cb);
})

ReactComponentBeforeAndAfter.ts

//Before:
var Button = React.createClass({
	render: function() {
		className = "fa " + this.props.icon;
		return (
			<button type="button" className="btn btn-primary" onClick={this._handleClick}>
	      <span className={className} /> {this.props.caption}
	    </button>
		);
	},
	
	_handleClick() {
		var shouldClose = this.props.handler();
		if (shouldClose)
		{
			this.props.onCloseRequest();
		}
	}
});

//After (revised):
import * as React from "react";

// The T in React.Props<T> is used for the function style access of `ref`
// for use by the caller. Example (defines `component` parameter of callback):
//     <Button ref={ component => this._button = component }/>
interface ButtonProps extends React.Props<Button> {
  icon : string;
  caption : string;
  handler : ()=>boolean;
  onCloseRequest? : ()=>void;
}

class Button extends React.Component<ButtonProps,{}> {
  render() {
    let className = `fa ${ this.props.icon }`;
    return (
      <button type="button" className="btn btn-primary" onClick={this.handleClick}>
        <span className={className} /> {this.props.caption}
      </button>
    );
  }

  // Using this syntax, `this` is pre-bound. Bonus, if you want the event
  // object, you'd use `React.MouseEvent` (instead of `MouseEvent`).
  private handleClick = (e:React.MouseEvent) => {
    let shouldClose = this.props.handler();
    if (shouldClose)
    {
      this.props.onCloseRequest();
    }
  }
}

ReactInitialStateBeforeAndAfter.ts

//Before:

var AutoComplete = React.createClass({
  ...
  getInitialState() {
    var value = Common.coerceFieldValue(this.props);
    return { value: value };
  }
});

//After:

export class AutoComplete extends React.Component<AutoCompleteProps, State> {

  constructor(props : AutoCompleteProps, context) {
    super(props,context);
    var value = HubConnectivity.coerceFieldValue(props);
    this.state = { value: value };
  }
  ...
}

tsconfig.json

{
  "compilerOptions": {
    "jsx": "react",
    "outDir": "./ts_modules",
    "target": "es5",
    "module": "commonjs"
  },
  "files": [
    "./typings/tsd.d.ts",
    "./Project/ts/Externals_shallow.d.ts",
    "./Project/ts/components/UI/UIModules.ts",
    "./Project/ts/area1/App.tsx",
    "./Project/ts/area2/App.tsx"
  ]
}