Interfaces Extending Classes When an interface type extends a class type it inherits the members of the class but not their implementations. It is as if the interface had declared all of the members of the class without providing an implementation. Interfaces inherit even the private and protected members of a base class. This means that when you create an interface that extends a class with private or protected members, that interface type can only be implemented by that class or a subclass of

Exporting a declaration Any declaration (such as a variable, function, class, type alias, or interface) can be exported by adding the export keyword. Validation.ts export interface StringValidator { isAcceptable(s: string): boolean; } ZipCodeValidator.ts export const numberRegexp = /^[0-9]+$/; export class ZipCodeValidator implements StringValidator { isAcceptable(s: string) { return s.length === 5 && numberRegexp.test(s); } }

Export statements Export statements are handy when exports need to be renamed for consumers, so the above example can be written as: class ZipCodeValidator implements StringValidator { isAcceptable(s: string) { return s.length === 5 && numberRegexp.test(s); } } export { ZipCodeValidator }; export { ZipCodeValidator as mainValidator };

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

Exhaustiveness checking We would like the compiler to tell us when we don’t cover all variants of the discriminated union. For example, if we add Triangle to Shape, we need to update area as well: type Shape = Square | Rectangle | Circle | Triangle; function area(s: Shape) { switch (s.kind) { case "square": return s.size * s.size; case "rectangle": return s.height * s.width; case "circle": return Math.PI * s.radius ** 2; } // should error here - we didn't handle case "triangle

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

Decorator Evaluation There is a well defined order to how decorators applied to various declarations inside of a class are applied: Parameter Decorators, followed by Method, Accessor, or Property Decorators are applied for each instance member. Parameter Decorators, followed by Method, Accessor, or Property Decorators are applied for each static member. Parameter Decorators are applied for the constructor. Class Decorators are applied for the class.

Enums Enums are compatible with numbers, and numbers are compatible with enums. Enum values from different enum types are considered incompatible. For example, enum Status { Ready, Waiting }; enum Color { Red, Blue, Green }; let status = Status.Ready; status = Color.Green; //error

Enum A helpful addition to the standard set of datatypes from JavaScript is the enum. As in languages like C#, an enum is a way of giving more friendly names to sets of numeric values. enum Color {Red, Green, Blue}; let c: Color = Color.Green; By default, enums begin numbering their members starting at 0. You can change this by manually setting the value of one of its members. For example, we can start the previous example at 1 instead of 0: enum Color {Red = 1, Green, Blue}; let c: Color = Co

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>