Accessors TypeScript supports getters/setters as a way of intercepting accesses to a member of an object. This gives you a way of having finer-grained control over how a member is accessed on each object. Let’s convert a simple class to use get and set. First, let’s start with an example without getters and setters. class Employee { fullName: string; } let employee = new Employee(); employee.fullName = "Bob Smith"; if (employee.fullName) { console.log(employee.fullName); } While allowing

Import a module for side-effects only Though not recommended practice, some modules set up some global state that can be used by other modules. These modules may not have any exports, or the consumer is not interested in any of their exports. To import these modules, use: import "./my-module.js";

Rest Parameters Required, optional, and default parameters all have one thing in common: they talk about one parameter at a time. Sometimes, you want to work with multiple parameters as a group, or you may not know how many parameters a function will ultimately take. In JavaScript, you can work with the arguments directly using the arguments variable that is visible inside every function body. In TypeScript, you can gather these arguments together into a variable: function buildName(firstName:

Extending Interfaces Like classes, interfaces can extend each other. This allows you to copy the members of one interface into another, which gives you more flexibility in how you separate your interfaces into reusable components. interface Shape { color: string; } interface Square extends Shape { sideLength: number; } let square = <Square>{}; square.color = "blue"; square.sideLength = 10; An interface can extend multiple interfaces, creating a combination of all of the interfaces.

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

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

Value-based elements Value based elements are simply looked up by identifiers that are in scope. import MyComponent from "./myComponent"; <MyComponent />; // ok <SomeOtherComponent />; // error It is possible to limit the type of a value-based element. However, for this we must introduce two new terms: the element class type and the element instance type. Given <Expr />, the element class type is the type of Expr. So in the example above, if MyComponent was an ES6 class the

// Type definitions for [~THE LIBRARY NAME~] [~OPTIONAL VERSION NUMBER~] // Project: [~THE PROJECT NAME~] // Definitions by: [~YOUR NAME~] <[~A URL FOR YOU~]> /*~ This is the module template file for class modules. *~ You should rename it to index.d.ts and place it in a folder with the same name as the module. *~ For example, if you were writing a file for "super-greeter", this *~ file should be 'super-greeter/index.d.ts' */ /*~ Note that ES6 modules cannot directly export class obj

Add modules to the code Before we get to Browserify, let’s build our code out and add modules to the mix. This is the structure you’re more likely to use for a real app. Create a file called src/greet.ts: export function sayHello(name: string) { return `Hello from ${name}`; } Now change the code in src/main.ts to import sayHello from greet.ts: import { sayHello } from "./greet"; console.log(sayHello("TypeScript")); Finally, add src/greet.ts to tsconfig.json: { "files": [ "src/main.ts

Add a TypeScript configuration file You’ll want to bring your TypeScript files together - both the code you’ll be writing as well as any necessary declaration files. To do this, you’ll need to create a tsconfig.json which contains a list of your input files as well as all your compilation settings. Simply create a new file in your project root named tsconfig.json and fill it with the following contents: { "compilerOptions": { "outDir": "./dist/", "sourceMap": true, "noImplicitAny"