Dependencies All dependencies are managed by npm. Make sure all the declaration packages you depend on are marked appropriately in the "dependencies" section in your package.json. For example, imagine we authored a package that used Browserify and TypeScript. { "name": "browserify-typescript-extension", "author": "Vandelay Industries", "version": "1.0.0", "main": "./lib/main.js", "types": "./lib/main.d.ts", "dependencies": [ "browserify@latest", "@types/browserify@latest",

Set up the build Right click on the project and click New Item. Then choose TypeScript Configuration File and use the default name tsconfig.json. Replace the default tsconfig.json with the following: { "compilerOptions": { "noImplicitAny": true, "noEmitOnError": true, "sourceMap": true, "target": "es5", "outDir": "./Scripts/App" }, "files": [ "./src/app.ts", ], "compileOnSave": true } This is similar to the default, with the following differences: It sets "noImplicitAny"

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

Discriminated Unions You can combine string literal types, union types, type guards, and type aliases to build an advanced pattern called discriminated unions, also known as tagged unions or algebraic data types. Discriminated unions are useful in functional programming. Some languages automatically discriminate unions for you; TypeScript instead builds on JavaScript patterns as they exist today. There are four ingredients: Types that have a common, string literal property — the discriminant. A

Write a simple example Let’s write a Hello World program. In src, create the file main.ts: function hello(compiler: string) { console.log(`Hello from ${compiler}`); } hello("TypeScript"); In the project root, proj, create the file tsconfig.json: { "files": [ "src/main.ts" ], "compilerOptions": { "noImplicitAny": true, "target": "es5" } }

Write some code Let’s write our first TypeScript file using Knockout. First, create a new file in your src directory named hello.ts. import * as ko from "knockout"; class HelloViewModel { language: KnockoutObservable<string> framework: KnockoutObservable<string> constructor(language: string, framework: string) { this.language = ko.observable(language); this.framework = ko.observable(framework); } } ko.applyBindings(new HelloViewModel("TypeScript", "Knockout")); N

Write some code Let’s write our first TypeScript file using React. First, create a file named Hello.tsx in src/components and write the following: import * as React from "react"; export interface HelloProps { compiler: string; framework: string; } export class Hello extends React.Component<HelloProps, {}> { render() { return <h1>Hello from {this.props.compiler} and {this.props.framework}!</h1>; } } Note that while this example is quite classy, we didn’t need to use

Multi-file namespaces Here, we’ll split our Validation namespace across many files. Even though the files are separate, they can each contribute to the same namespace and can be consumed as if they were all defined in one place. Because there are dependencies between files, we’ll add reference tags to tell the compiler about the relationships between the files. Our test code is otherwise unchanged. Validation.ts namespace Validation { export interface StringValidator { isAcceptable(s: str

Reusable Types (Interfaces) Documentation When specifying a greeting, you must pass a GreetingSettings object. This object has the following properties: - greeting: Mandatory string - duration: Optional length of time (in milliseconds) - color: Optional string, e.g. ‘#ff00ff’ Code greet({ greeting: "hello world", duration: 4000 }); Declaration Use an interface to define a type with properties. interface GreetingSettings { greeting: string; duration?: number; color?: string; } decl

Type assertions Sometimes you’ll end up in a situation where you’ll know more about a value than TypeScript does. Usually this will happen when you know the type of some entity could be more specific than its current type. Type assertions are a way to tell the compiler “trust me, I know what I’m doing.” A type assertion is like a type cast in other languages, but performs no special checking or restructuring of data. It has no runtime impact, and is used purely by the compiler. TypeScript assum