Global Functions Documentation You can call the function greet with a string to show a greeting to the user. Code greet("hello, world"); Declaration Use declare function to declare functions. declare function greet(greeting: string): void;

Public by default In our examples, we’ve been able to freely access the members that we declared throughout our programs. If you’re familiar with classes in other languages, you may have noticed in the above examples we haven’t had to use the word public to accomplish this; for instance, C# requires that each member be explicitly labeled public to be visible. In TypeScript, each member is public by default. You may still mark a member public explicitly. We could have written the Animal class fr

Reusable Types (Type Aliases) Documentation Anywhere a greeting is expected, you can provide a string, a function returning a string, or a Greeter instance. Code function getGreeting() { return "howdy"; } class MyGreeter extends Greeter { } greet("hello"); greet(getGreeting); greet(new MyGreeter()); Declaration You can use a type alias to make a shorthand for a type: type GreetingLike = string | (() => string) | Greeting; declare function greet(g: GreetingLike): void;

UMD A UMD module is one that can either be used as module (through an import), or as a global (when run in an environment without a module loader). Many popular libraries, such as Moment.js, are written this way. For example, in Node.js or using RequireJS, you would write: import moment = require("moment"); console.log(moment.format()); whereas in a vanilla browser environment you would write: console.log(moment.format());

Understanding private When a member is marked private, it cannot be accessed from outside of its containing class. For example: class Animal { private name: string; constructor(theName: string) { this.name = theName; } } new Animal("Cat").name; // Error: 'name' is private; TypeScript is a structural type system. When we compare two different types, regardless of where they came from, if the types of all members are compatible, then we say the types themselves are compatible. However, whe

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

/// <amd-dependency /> Note: this directive has been deprecated. Use import "moduleName"; statements instead. /// <amd-dependency path="x" /> informs the compiler about a non-TS module dependency that needs to be injected in the resulting module’s require call. The amd-dependency directive can also have an optional name property; this allows passing an optional name for an amd-dependency: /// <amd-dependency path="legacy/moduleA" name="moduleA"/> declare var moduleA:MyType

Setting up your Directories If you’re writing in plain JavaScript, it’s likely that you’re running your JavaScript directly, where your .js files in a src, lib, or dist directory, and then ran as desired. If that’s the case, the files that you’ve written are going to used as inputs to TypeScript, and you’ll run the outputs it produces. During our JS to TS migration, we’ll need to separate our input files to prevent TypeScript from overwriting them. If your output files need to reside in a speci

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

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: