webpack

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:

Void void is a little like the opposite of any: the absence of having any type at all. You may commonly see this as the return type of functions that do not return a value: function warnUser(): void { alert("This is my warning message"); } Declaring variables of type void is not useful because you can only assign undefined or null to them: let unusable: void = undefined;

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

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 =

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"]; /

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

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.