Write a simple Angular app in TypeScript First, change the code in app.ts to: import {Component} from "angular2/core" import {MyModel} from "./model" @Component({ selector: `my-app`, template: `<div>Hello from </div>` }) class MyApp { model = new MyModel(); getCompiler() { return this.model.compiler; } } Then add another TypeScript file in src named model.ts: export class MyModel { compiler = "TypeScript"; } And then another TypeScript file in src named main.ts: i

Weeding out Errors Like we mentioned, it’s not unexpected to get error messages after conversion. The important thing is to actually go one by one through these and decide how to deal with the errors. Often these will be legitimate bugs, but sometimes you’ll have to explain what you’re trying to do a little better to TypeScript.

Webpack Webpack integration is pretty simple. You can use ts-loader, a TypeScript loader, combined with source-map-loader for easier debugging. Simply run npm install ts-loader source-map-loader and merge in options from the following into your webpack.config.js file: module.exports = { entry: "./src/index.ts", output: { filename: "./dist/bundle.js", }, // Enable sourcemaps for debugging webpack's output. devtool: "source-map", resolve: { // Add '.ts' and '.tsx' as resolv

Watchify We’ll start with Watchify to provide background compilation: npm install --save-dev watchify gulp-util Now change your gulpfile to the following: var gulp = require("gulp"); var browserify = require("browserify"); var source = require('vinyl-source-stream'); var watchify = require("watchify"); var tsify = require("tsify"); var gutil = require("gulp-util"); var paths = { pages: ['src/*.html'] }; var watchedBrowserify = watchify(browserify({ basedir: '.', debug: true, entries:

Using tsconfig.json By invoking tsc with no input files, in which case the compiler searches for the tsconfig.json file starting in the current directory and continuing up the parent directory chain. By invoking tsc with no input files and a --project (or just -p) command line option that specifies the path of a directory containing a tsconfig.json file. When input files are specified on the command line, tsconfig.json files are ignored.

Using with export = or import An important rule is that export and import declarations export or import all meanings of their targets.

Value-based elements Value based elements are simply looked up by identifiers that are in scope. import MyComponent from "./myComponent"; <MyComponent />; // ok <SomeOtherComponent />; // error It is possible to limit the type of a value-based element. However, for this we must introduce two new terms: the element class type and the element instance type. Given <Expr />, the element class type is the type of Expr. So in the example above, if MyComponent was an ES6 class the

Validators in a single file interface StringValidator { isAcceptable(s: string): boolean; } let lettersRegexp = /^[A-Za-z]+$/; let numberRegexp = /^[0-9]+$/; class LettersOnlyValidator implements StringValidator { isAcceptable(s: string) { return lettersRegexp.test(s); } } class ZipCodeValidator implements StringValidator { isAcceptable(s: string) { return s.length === 5 && numberRegexp.test(s); } } // Some samples to try let strings = ["Hello", "98052", "101"]; /

var declarations Declaring a variable in JavaScript has always traditionally been done with the var keyword. var a = 10; As you might’ve figured out, we just declared a variable named a with the value 10. We can also declare a variable inside of a function: function f() { var message = "Hello, world!"; return message; } and we can also access those same variables within other functions: function f() { var a = 10; return function g() { var b = a + 1; return b; } } var g =

Variable capturing quirks Take a quick second to guess what the output of the following snippet is: for (var i = 0; i < 10; i++) { setTimeout(function() { console.log(i); }, 100 * i); } For those unfamiliar, setTimeout will try to execute a function after a certain number of milliseconds (though waiting for anything else to stop running). Ready? Take a look: 10 10 10 10 10 10 10 10 10 10 Many JavaScript developers are intimately familiar with this behavior, but if you’re surprised, you’r