Create a new project Choose File Choose New Project (Ctrl + Shift + N) Choose Visual C# Choose ASP.NET Web Application Choose ASP.NET 5 Empty Let’s uncheck “Host in the cloud” since we’re going to run this locally. Run the application and make sure that it works.

Default exports Each module can optionally export a default export. Default exports are marked with the keyword default; and there can only be one default export per module. default exports are imported using a different import form. default exports are really handy. For instance, a library like JQuery might have a default export of jQuery or $, which we’d probably also import under the name $ or jQuery. JQuery.d.ts declare let $: JQuery; export default $; App.ts import $ from "JQuery"; $("bu

Global Variables Documentation The global variable foo contains the number of widgets present. Code console.log("Half the number of widgets is " + (foo / 2)); Declaration Use declare var to declare variables. If the variable is read-only, you can use declare const. You can also use declare let if the variable is block-scoped. /** The number of widgets present */ declare var foo: number;

Inheritance In TypeScript, we can use common object-oriented patterns. Of course, one of the most fundamental patterns in class-based programming is being able to extend existing classes to create new ones using inheritance. Let’s take a look at an example: class Animal { name: string; constructor(theName: string) { this.name = theName; } move(distanceInMeters: number = 0) { console.log(`${this.name} moved ${distanceInMeters}m.`); } } class Snake extends Animal { constructor(name

Merging Namespaces Similarly to interfaces, namespaces of the same name will also merge their members. Since namespaces create both a namespace and a value, we need to understand how both merge. To merge the namespaces, type definitions from exported interfaces declared in each namespace are themselves merged, forming a single namespace with merged interface definitions inside. To merge the namespace value, at each declaration site, if a namespace already exists with the given name, it is furth

String Literal Types String literal types allow you to specify the exact value a string must have. In practice string literal types combine nicely with union types, type guards, and type aliases. You can use these features together to get enum-like behavior with strings. type Easing = "ease-in" | "ease-out" | "ease-in-out"; class UIElement { animate(dx: number, dy: number, easing: Easing) { if (easing === "ease-in") { // ... } else if (easing === "ease-out") { } else

Browserify Now let’s move this project from Node to the browser. To do this, we’d like to bundle all our modules into one JavaScript file. Fortunately, that’s exactly what Browserify does. Even better, it lets us use the CommonJS module system used by Node, which is the default TypeScript emit. That means our TypeScript and Node setup will transfer to the browser basically unchanged. First, install browserify, tsify, and vinyl-source-stream. tsify is a Browserify plugin that, like gulp-typescri

Understanding protected The protected modifier acts much like the private modifier with the exception that members declared protected can also be accessed by instances of deriving classes. For example, class Person { protected name: string; constructor(name: string) { this.name = name; } } class Employee extends Person { private department: string; constructor(name: string, department: string) { super(name); this.department = department; } public getElevatorPitch() {

Decorator Factories If we want to customize how a decorator is applied to a declaration, we can write a decorator factory. A Decorator Factory is simply a function that returns the expression that will be called by the decorator at runtime. We can write a decorator factory in the following fashion: function color(value: string) { // this is the decorator factory return function (target) { // this is the decorator // do something with 'target' and 'value'... } } NOTE You can see a more

// 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 plugin 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' */ /*~ On this line, import the module which this module adds to */ impo