Block-scoping When a variable is declared using let, it uses what some call lexical-scoping or block-scoping. Unlike variables declared with var whose scopes leak out to their containing function, block-scoped variables are not visible outside of their nearest containing block or for-loop. function f(input: boolean) { let a = 100; if (input) { // Still okay to reference 'a' let b = a + 1; return b; } // Error: 'b' doesn't exist here return b; } Here, we have two local v

Browserify

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

Babel First install Babelify and the Babel preset for ES2015. Like Uglify, Babelify mangles code, so we’ll need vinyl-buffer and gulp-sourcemaps. By default Babelify will only process files with extensions of .js, .es, .es6 and .jsx so we need to add the .ts extension as an option to Babelify. npm install --save-dev babelify babel-preset-es2015 vinyl-buffer gulp-sourcemaps Now change your gulpfile to the following: var gulp = require('gulp'); var browserify = require('browserify'); var source

Best common type When a type inference is made from several expressions, the types of those expressions are used to calculate a “best common type”. For example, let x = [0, 1, null]; To infer the type of x in the example above, we must consider the type of each array element. Here we are given two choices for the type of the array: number and null. The best common type algorithm considers each candidate type, and picks the type that is compatible with all the other candidates. Because the best

Array TypeScript, like JavaScript, allows you to work with arrays of values. Array types can be written in one of two ways. In the first, you use the type of the elements followed by [] to denote an array of that element type: let list: number[] = [1, 2, 3]; The second way uses a generic array type, Array<elemType>: let list: Array<number> = [1, 2, 3];

Ambient enums Ambient enums are used to describe the shape of already existing enum types. declare enum Enum { A = 1, B, C = 2 } One important difference between ambient and non-ambient enums is that, in regular enums, members that don’t have an initializer are considered constant members. For non-const ambient enums member that does not have initializer is considered computed.

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

Array destructuring The simplest form of destructuring is array destructuring assignment: let input = [1, 2]; let [first, second] = input; console.log(first); // outputs 1 console.log(second); // outputs 2 This creates two new variables named first and second. This is equivalent to using indexing, but is much more convenient: first = input[0]; second = input[1]; Destructuring works with already-declared variables as well: // swap variables [first, second] = [second, first]; And with paramete

Any We may need to describe the type of variables that we do not know when we are writing an application. These values may come from dynamic content, e.g. from the user or a 3rd party library. In these cases, we want to opt-out of type-checking and let the values pass through compile-time checks. To do so, we label these with the any type: let notSure: any = 4; notSure = "maybe a string instead"; notSure = false; // okay, definitely a boolean The any type is a powerful way to work with existin