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.

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.

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

Debug In Edge, press F12 and click the Debugger tab. Look in the first localhost folder, then src/app.ts Put a breakpoint on the line with return. Type in the boxes and confirm that the breakpoint hits in TypeScript code and that inspection works correctly. That’s all you need to know to include basic TypeScript in your ASP.NET project. Next we’ll include Angular and write a simple Angular app.

Consuming Dependencies There are several kinds of dependencies you might have.

Introduction Along with traditional OO hierarchies, another popular way of building up classes from reusable components is to build them by combining simpler partial classes. You may be familiar with the idea of mixins or traits for languages like Scala, and the pattern has also reached some popularity in the JavaScript community. Mixin sample In the code below, we show how you can model mixins in TypeScript. After the code, we’ll break down how it works. // Disposable Mixin class Disposable {

Void void is a little like the opposite of any: the absence of having any type at all. You may commonly see this as the return type of functions that do not return a value: function warnUser(): void { alert("This is my warning message"); } Declaring variables of type void is not useful because you can only assign undefined or null to them: let unusable: void = undefined;

Symbol.hasInstance A method that determines if a constructor object recognizes an object as one of the constructor’s instances. Called by the semantics of the instanceof operator.