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

Block-scoped variable capturing When we first touched on the idea of variable capturing with var declaration, we briefly went into how variables act once captured. To give a better intuition of this, each time a scope is run, it creates an “environment” of variables. That environment and its captured variables can exist even after everything within its scope has finished executing. function theCityThatAlwaysSleeps() { let getCity; if (true) { let city = "Seattle"; getCity = functio

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

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

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

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

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];

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

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

Ambient Modules In Node.js, most tasks are accomplished by loading one or more modules. We could define each module in its own .d.ts file with top-level export declarations, but it’s more convenient to write them as one larger .d.ts file. To do so, we use a construct similar to ambient namespaces, but we use the module keyword and the quoted name of the module which will be available to a later import. For example: node.d.ts (simplified excerpt) declare module "url" { export interface Url {