Add Angular to the gulp build Finally, we need to make sure that the Angular files are copied as part of the build. We need to add: The paths to the library files. Add a lib task to pipe the files to wwwroot. Add a dependendency on lib to the default task. The updated gulpfile.js should look like this: /// <binding AfterBuild='default' Clean='clean' /> /* This file is the main entry point for defining Gulp tasks and using Gulp plugins. Click here to learn more. http://go.microsoft.com/f

Add modules to the code Before we get to Browserify, let’s build our code out and add modules to the mix. This is the structure you’re more likely to use for a real app. Create a file called src/greet.ts: export function sayHello(name: string) { return `Hello from ${name}`; } Now change the code in src/main.ts to import sayHello from greet.ts: import { sayHello } from "./greet"; console.log(sayHello("TypeScript")); Finally, add src/greet.ts to tsconfig.json: { "files": [ "src/main.ts

Add example code Type the following code into app.ts. function sayHello() { const compiler = (document.getElementById("compiler") as HTMLInputElement).value; const framework = (document.getElementById("framework") as HTMLInputElement).value; return `Hello from ${compiler} and ${framework}!`; }

Accessors TypeScript supports getters/setters as a way of intercepting accesses to a member of an object. This gives you a way of having finer-grained control over how a member is accessed on each object. Let’s convert a simple class to use get and set. First, let’s start with an example without getters and setters. class Employee { fullName: string; } let employee = new Employee(); employee.fullName = "Bob Smith"; if (employee.fullName) { console.log(employee.fullName); } While allowing

Accessor Decorators An Accessor Decorator is declared just before an accessor declaration. The accessor decorator is applied to the Property Descriptor for the accessor and can be used to observe, modify, or replace an accessor’s definitions. An accessor decorator cannot be used in a declaration file, or in any other ambient context (such as in a declare class). NOTE TypeScript disallows decorating both the get and set accessor for a single member. Instead, all decorators for the member must b

Abstract Classes Abstract classes are base classes from which other classes may be derived. They may not be instantiated directly. Unlike an interface, an abstract class may contain implementation details for its members. The abstract keyword is used to define abstract classes as well as abstract methods within an abstract class. abstract class Animal { abstract makeSound(): void; move(): void { console.log("roaming the earth..."); } } Methods within an abstract class that are marked

Add a TypeScript configuration file You’ll want to bring your TypeScript files together - both the code you’ll be writing as well as any necessary declaration files. To do this, you’ll need to create a tsconfig.json which contains a list of your input files as well as all your compilation settings. Simply create a new file in your project root named tsconfig.json and fill it with the following contents: { "compilerOptions": { "outDir": "./dist/", "sourceMap": true, "noImplicitAny"

/// <reference>-ing a module A common mistake is to try to use the /// <reference ... /> syntax to refer to a module file, rather than using an import statement. To understand the distinction, we first need to understand how compiler can locate the type information for a module based on the path of an import (e.g. the ... in import x from "...";, import x = require("...");, etc.) path. The compiler will try to find a .ts, .tsx, and then a .d.ts with the appropriate path. If a speci

Add a TypeScript configuration file You’ll want to bring your TypeScript files together - both the code you’ll be writing as well as any necessary declaration files. To do this, you’ll need to create a tsconfig.json which contains a list of your input files as well as all your compilation settings. Simply create a new file in your project root named tsconfig.json and fill it with the following contents: { "compilerOptions": { "outDir": "./built/", "sourceMap": true, "noImplicitAny

Add a CopyFiles target to the build Finally, we need to make sure that the Angular files are copied as part of the build. To do this, edit the project by right-clicking ‘Unload’ and then ‘Edit csproj’. After the TypeScript configuration PropertyGroup, add a new ItemGroup and Target to copy the angular files. <ItemGroup> <NodeLib Include="$(MSBuildProjectDirectory)\node_modules\angular2\bundles\angular2.js"/> <NodeLib Include="$(MSBuildProjectDirectory)\node_modules\angular2\b