// 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 for class modules. *~ 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' */ /*~ Note that ES6 modules cannot directly export class obj

Install our dependencies First ensure TypeScript, Typings, and webpack are installed globally. npm install -g typescript typings webpack Webpack is a tool that will bundle your code and optionally all of its dependencies into a single .js file. Typings is a package manager for grabbing definition files. Let’s now add React and React-DOM as dependencies to your package.json file: npm install --save react react-dom Next, we’ll add development-time dependencies on ts-loader and source-map-loader

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:

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

export = and import = require() Both CommonJS and AMD generally have the concept of an exports object which contains all exports from a module. They also support replacing the exports object with a custom single object. Default exports are meant to act as a replacement for this behavior; however, the two are incompatible. TypeScript supports export = to model the traditional CommonJS and AMD workflow. The export = syntax specifies a single object that is exported from the module. This can be

Indexable Types Similarly to how we can use interfaces to describe function types, we can also describe types that we can “index into” like a[10], or ageMap["daniel"]. Indexable types have an index signature that describes the types we can use to index into the object, along with the corresponding return types when indexing. Let’s take an example: interface StringArray { [index: number]: string; } let myArray: StringArray; myArray = ["Bob", "Fred"]; let myStr: string = myArray[0]; Above, w

Symbol.split A regular expression method that splits a string at the indices that match the regular expression. Called by the String.prototype.split method.

Grab our runtime dependencies We’ll need to grab Knockout itself, as well as something called RequireJS. RequireJS is a library that enables us to load modules at runtime asynchronously. There are several ways we can go about this: Download the files manually and host them. Download the files through a package manager like Bower and host them. Use a Content Delivery Network (CDN) to host both files. We’ll keep it simple and go with the first option, but Knockout’s documentation has details on

Organizing Types Documentation The greeter object can log to a file or display an alert. You can provide LogOptions to .log(...) and alert options to .alert(...) Code const g = new Greeter("Hello"); g.log({ verbose: true }); g.alert({ modal: false, title: "Current Greeting" }); Declaration Use namespaces to organize types. declare namespace GreetingLib { interface LogOptions { verbose?: boolean; } interface AlertOptions { modal: boolean; title?: string; color?: string;

Lay out the project Let’s start out with a new directory. We’ll name it proj for now, but you can change it to whatever you want. mkdir proj cd proj To start, we’re going to structure our project in the following way: proj/ +- src/ | +- components/ | +- dist/ TypeScript files will start out in your src folder, run through the TypeScript compiler, then webpack, and end up in a bundle.js file in dist. Any components that we write will go in the src/components folder. Let’s scaffold