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 {

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

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>

Minimal 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/ +- dist/ TypeScript files will start out in your src folder, run through the TypeScript compiler and end up in dist. Let’s scaffold this out: mkdir src mkdir dist

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.

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.

Advanced Combinations Some kinds of declarations can be combined across multiple declarations. For example, class C { } and interface C { } can co-exist and both contribute properties to the C types. This is legal as long as it does not create a conflict. A general rule of thumb is that values always conflict with other values of the same name unless they are declared as namespaces, types will conflict if they are declared with a type alias declaration (type s = string), and namespaces never co

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.

Use Union Types Don’t write overloads that differ by type in only one argument position: /* WRONG */ interface Moment { utcOffset(): number; utcOffset(b: number): Moment; utcOffset(b: string): Moment; } Do use union types whenver possible: /* OK */ interface Moment { utcOffset(): number; utcOffset(b: number|string): Moment; } Note that we didn’t make b optional here because the return types of the signatures differ. Why: This is important for people who are “passing through” a value