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.

Decorator Evaluation There is a well defined order to how decorators applied to various declarations inside of a class are applied: Parameter Decorators, followed by Method, Accessor, or Property Decorators are applied for each instance member. Parameter Decorators, followed by Method, Accessor, or Property Decorators are applied for each static member. Parameter Decorators are applied for the constructor. Class Decorators are applied for the class.

Constructor functions When you declare a class in TypeScript, you are actually creating multiple declarations at the same time. The first is the type of the instance of the class. class Greeter { greeting: string; constructor(message: string) { this.greeting = message; } greet() { return "Hello, " + this.greeting; } } let greeter: Greeter; greeter = new Greeter("world"); console.log(greeter.greet()); Here, when we say let greeter: Greeter, we’re using Greeter as the type of

Classes Documentation You can create a greeter by instantiating the Greeter object, or create a customized greeter by extending from it. Code const myGreeter = new Greeter("hello, world"); myGreeter.greeting = "howdy"; myGreeter.showGreeting(); class SpecialGreeter extends Greeter { constructor() { super("Very special greetings"); } } Declaration Use declare class to describe a class or class-like object. Classes can have properties and methods as well as a constructor. declare clas

Intrinsic elements Intrinsic elements are looked up on the special interface JSX.IntrinsicElements. By default, if this interface is not specified, then anything goes and intrinsic elements will not be type checked. However, if interface is present, then the name of the intrinsic element is looked up as a property on the JSX.IntrinsicElements interface. For example: declare namespace JSX { interface IntrinsicElements { foo: any } } <foo />; // ok <bar />; // error In the a

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:

Writing a Configuration File TypeScript uses a file called tsconfig.json for managing your project’s options, such as which files you want to include, and what sorts of checking you want to perform. Let’s create a bare-bones one for our project: { "compilerOptions": { "outDir": "./built", "allowJs": true, "target": "es5" }, "include": [ "./src" ] } Here we’re specifying a few things to TypeScript: Read in any files it understands in the src directory (with include). Acc

Parameter properties In our last example, we had to declare a readonly member name and a constructor parameter theName in the Octopus class, and we then immediately set name to theName. This turns out to be a very common practice. Parameter properties let you create and initialize a member in one place. Here’s a further revision of the previous Octopus class using a parameter property: class Octopus { readonly numberOfLegs: number = 8; constructor(readonly name: string) { } } Notice how

Details The "compilerOptions" property can be omitted, in which case the compiler’s defaults are used. See our full list of supported Compiler Options. The "files" property takes a list of relative or absolute file paths. The "include" and "exclude" properties take a list of glob-like file patterns. The supported glob wildcards are: * matches zero or more characters (excluding directory separators) ? matches any one character (excluding directory separators) **/ recursively matches any subdi

Uglify First install Uglify. Since the point of Uglify is to mangle your code, we also need to install vinyl-buffer and gulp-sourcemaps to keep sourcemaps working. npm install --save-dev gulp-uglify vinyl-buffer gulp-sourcemaps Now change your gulpfile to the following: var gulp = require("gulp"); var browserify = require("browserify"); var source = require('vinyl-source-stream'); var tsify = require("tsify"); var uglify = require('gulp-uglify'); var sourcemaps = require('gulp-sourcemaps'); va