Extending Interfaces Like classes, interfaces can extend each other. This allows you to copy the members of one interface into another, which gives you more flexibility in how you separate your interfaces into reusable components. interface Shape { color: string; } interface Square extends Shape { sideLength: number; } let square = <Square>{}; square.color = "blue"; square.sideLength = 10; An interface can extend multiple interfaces, creating a combination of all of the interfaces.

Using NuGet with MSBuild Note: You’ll need to configure your project to use the NuGet packages. Please see Configuring MSBuild projects to use NuGet for more information. The nightlies are available on www.myget.org. There are two packages: Microsoft.TypeScript.Compiler: Tools only (tsc.exe, lib.d.ts, etc.) . Microsoft.TypeScript.MSBuild: Tools as above, as well as MSBuild tasks and targets (Microsoft.TypeScript.targets, Microsoft.TypeScript.Default.props, etc.)

// Type definitions for [~THE LIBRARY NAME~] [~OPTIONAL VERSION NUMBER~] // Project: [~THE PROJECT NAME~] // Definitions by: [~YOUR NAME~] <[~A URL FOR YOU~]> /*~ This is the module template file. You should rename it to index.d.ts *~ and place it in a folder with the same name as the module. *~ For example, if you were writing a file for "super-greeter", this *~ file should be 'super-greeter/index.d.ts' */ /*~ If this module is a UMD module that exposes a global variable 'myLib' wh

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

Generic Types In previous sections, we created generic identity functions that worked over a range of types. In this section, we’ll explore the type of the functions themselves and how to create generic interfaces. The type of generic functions is just like those of non-generic functions, with the type parameters listed first, similarly to function declarations: function identity<T>(arg: T): T { return arg; } let myIdentity: <T>(arg: T) => T = identity; We could also have use

Enums Enums are compatible with numbers, and numbers are compatible with enums. Enum values from different enum types are considered incompatible. For example, enum Status { Ready, Waiting }; enum Color { Red, Blue, Green }; let status = Status.Ready; status = Color.Green; //error

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.

Symbol.replace A regular expression method that replaces matched substrings of a string. Called by the String.prototype.replace method.

/// <reference path="..." /> The /// <reference path="..." /> directive is the most common of this group. It serves as a declaration of dependency between files. Triple-slash references instruct the compiler to include additional files in the compilation process. They also serve as a method to order the output when using --out or --outFile. Files are emitted to the output file location in the same order as the input after preprocessing pass.

Babel First install Babelify and the Babel preset for ES2015. Like Uglify, Babelify mangles code, so we’ll need vinyl-buffer and gulp-sourcemaps. By default Babelify will only process files with extensions of .js, .es, .es6 and .jsx so we need to add the .ts extension as an option to Babelify. npm install --save-dev babelify babel-preset-es2015 vinyl-buffer gulp-sourcemaps Now change your gulpfile to the following: var gulp = require('gulp'); var browserify = require('browserify'); var source