Destructuring Another ECMAScript 2015 feature that TypeScript has is destructuring. For a complete reference, see the article on the Mozilla Developer Network. In this section, we’ll give a short overview.

Import a single export from a module import { ZipCodeValidator } from "./ZipCodeValidator"; let myValidator = new ZipCodeValidator(); imports can also be renamed import { ZipCodeValidator as ZCV } from "./ZipCodeValidator"; let myValidator = new ZCV();

Functions with overloads When a function has overloads, each overload in the source type must be matched by a compatible signature on the target type. This ensures that the target function can be called in all the same situations as the source function.

Excess Property Checks In our first example using interfaces, TypeScript let us pass { size: number; label: string; } to something that only expected a { label: string; }. We also just learned about optional properties, and how they’re useful when describing so-called “option bags”. However, combining the two naively would let you to shoot yourself in the foot the same way you might in JavaScript. For example, taking our last example using createSquare: interface SquareConfig { color?: string

Putting it all together Just run: tsc Now open up index.html in your favorite browser and everything should be ready to use! You should see a page that says “Hello from TypeScript and Knockout!” Below that, you’ll also see two input boxes. As you modify their contents and switch focus, you’ll see that the original message changes.

Initialize the project Now we’ll turn this folder into an npm package. npm init You’ll be given a series of prompts. You can use the defaults except for your entry point. For your entry point, use ./dist/main.js. You can always go back and change these in the package.json file that’s been generated for you.

Add TypeScript code Right click on src and click New Item. Then choose TypeScript File and name the file app.ts.

Integrating with Build Tools You might have some more build steps in your pipeline. Perhaps you concatenate something to each of your files. Each build tool is different, but we’ll do our best to cover the gist of things.

Global-modifying Modules A global-modifying module alters existing values in the global scope when they are imported. For example, there might exist a library which adds new members to String.prototype when imported. This pattern is somewhat dangerous due to the possibility of runtime conflicts, but we can still write a declaration file for it.

Embedding Expressions JSX allows you to embed expressions between tags by surrounding the expressions with curly braces ({ }). var a = <div> {["foo", "bar"].map(i => <span>{i / 2}</span>)} </div> The above code will result in an error since you cannot divide a string by a number. The output, when using the preserve option, looks like: var a = <div> {["foo", "bar"].map(function (i) { return <span>{i / 2}</span>; })} </div>