Add example code Type the following code into app.ts. function sayHello() { const compiler = (document.getElementById("compiler") as HTMLInputElement).value; const framework = (document.getElementById("framework") as HTMLInputElement).value; return `Hello from ${compiler} and ${framework}!`; }

Ambient Namespaces The popular library D3 defines its functionality in a global object called d3. Because this library is loaded through a <script> tag (instead of a module loader), its declaration uses namespaces to define its shape. For the TypeScript compiler to see this shape, we use an ambient namespace declaration. For example, we could begin writing it as follows: D3.d.ts (simplified excerpt) declare namespace D3 { export interface Selectors { select: { (selector: strin

Validators in a single file interface StringValidator { isAcceptable(s: string): boolean; } let lettersRegexp = /^[A-Za-z]+$/; let numberRegexp = /^[0-9]+$/; class LettersOnlyValidator implements StringValidator { isAcceptable(s: string) { return lettersRegexp.test(s); } } class ZipCodeValidator implements StringValidator { isAcceptable(s: string) { return s.length === 5 && numberRegexp.test(s); } } // Some samples to try let strings = ["Hello", "98052", "101"]; /

Class Decorators A Class Decorator is declared just before a class declaration. The class decorator is applied to the constructor of the class and can be used to observe, modify, or replace a class definition. A class decorator cannot be used in a declaration file, or in any other ambient context (such as on a declare class). The expression for the class decorator will be called as a function at runtime, with the constructor of the decorated class as its only argument. If the class decorator re

Moving to TypeScript Files At this point, you’re probably ready to start using TypeScript files. The first step is to rename one of your .js files to .ts. If your file uses JSX, you’ll need to rename it to .tsx. Finished with that step? Great! You’ve successfully migrated a file from JavaScript to TypeScript! Of course, that might not feel right. If you open that file in an editor with TypeScript support (or if you run tsc --pretty), you might see red squiggles on certain lines. You should thin

Browserify

Using with export = or import An important rule is that export and import declarations export or import all meanings of their targets.

Attribute type checking The first step to type checking attributes is to determine the element attributes type. This is slightly different between intrinsic and value-based elements. For intrinsic elements, it is the type of the property on JSX.IntrinsicElements declare namespace JSX { interface IntrinsicElements { foo: { bar?: boolean } } } // element attributes type for 'foo' is '{bar?: boolean}' <foo bar />; For value-based elements, it is a bit more complex. It is determined b

Hybrid Types As we mentioned earlier, interfaces can describe the rich types present in real world JavaScript. Because of JavaScript’s dynamic and flexible nature, you may occasionally encounter an object that works as a combination of some of the types described above. One such example is an object that acts as both a function and an object, with additional properties: interface Counter { (start: number): string; interval: number; reset(): void; } function getCounter(): Counter { let

Symbol.species A function valued property that is the constructor function that is used to create derived objects.