Skip to content

Instantly share code, notes, and snippets.

@flq flq/EntryPoint.ts
Last active Oct 10, 2015

Embed
What would you like to do?
Gists for the blog post porting react app to tyescript
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;
import {assign} from 'lodash'
function startModule() {
//etc.
}
global['Project'] = assign(global['Project'] || {}, {
startModule
});
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;
}
}
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);
})
//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:
import * as React from "react";
type ReactProps = React.Props<React.DOMComponent<any>>;
interface ButtonProps extends ReactProps {
icon : string;
caption : string;
handler : ()=>boolean;
onCloseRequest? : ()=>void;
}
class Button extends React.Component<ButtonProps,{}> {
render() {
var className = "fa " + this.props.icon;
return (
<button type="button" className="btn btn-primary" onClick={this.handleClick.bind(this)}>
<span className={className} /> {this.props.caption}
</button>
);
}
private handleClick() {
var shouldClose = this.props.handler();
if (shouldClose)
{
this.props.onCloseRequest();
}
}
}
//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 };
}
...
}
{
"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"
]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.