A really good read. Thank you.

• Could you add an example for browser using browserify?
• You suggest using -module system but in the node and browser sections you don't use it. Why?
• How do we use ESLint etc with typescript?
• Can we use Typescript as a replacement for Babel and then start to add type info over time

Update https://github.com/basarat/typescript-book/blob/master/docs/tips/statefulFunctions.md since microsoft/TypeScript#4630 is fixed (so use an anonymous function microsoft/TypeScript#5214)

The "Using Enums" method doesn't work for number types, but the "Using Interfaces" works ok for them:

enum FooIdBrand {}
type FooId = FooIdBrand & number;
enum BarIdBrand{}
type BarId = BarIdBrand & number;

var fooId: FooId;
var barId: BarId;

fooId = barId; // NO error (wrong)
barId = fooId; // NO error (wrong)

Add a note explaining this Enum method restriction.

Stateful functions as described are totally unnecessary in JS (and TS by extension). Since it has first-class functions it can easily be achieved with a closure:

const counter = (() => {
  let count = 0;
  return () => {
    count += 1;
    console.log(`Called : ${count }`);
  };
})();

counter(); // Called : 1
counter(); // Called : 2

https://github.com/basarat/typescript-book/blob/master/docs/tips/statefulFunctions.md

"If you now create a new file bar.ts in the same project, you will be allowed by the TypeScript type system to use the variable foo as if it was available globally:"

From the section on modules. What does it mean to say "in the same project"? Under the same tsconfig.json? So a project is parsed and reports named conflicts / allows sharing across files? Which implies a --out? Which in turn is actively discouraged?

It might be good to clarify that sentence along those lines. Thanks.

http://stackoverflow.com/a/32983118/390330

Ryan's answer : http://stackoverflow.com/questions/30174078/how-to-define-singleton-in-typescript

However I prefer to have them using a once wrapper utility function which allows singletons to be lazy.

https://github.com/TypeScriptBuilder/tsb/blob/48da91c68a1977aeaa665ca609b8cf86bc32ec71/src/common/utils.ts#L73-L83

export function once<T extends Function>(func: T): T {
    let ran = false;
    let memo = undefined;
    return function() {
        if (ran) return memo;
        ran = true;
        memo = func.apply(this, arguments);
        func = null;
        return memo;
    } as any;
}

microsoft/TypeScript#202

https://gist.github.com/aleksey-bykov/0ab85f0b5e83fc848f85

Here you explain what does __extends do. You mentioned that it is effectively does the following:
d.prototype.__proto__ = b.prototype

From my point of view it is worth to mention why it doesn't do this directly. When I read that first time I was wondering "Why it is so compicated? Why we just can't d.prototype.__proto__ = b.prototype"

My guess that old browsers doesn't support proto property (as you mentioned). I mean that it is more safe.

Thanks for the excellent book!

x:{[key:string]:string}

Here is a good solution : microsoft/TypeScript#6502 (comment) that uses Object.assign

microsoft/TypeScript#2919 (comment)

function Mixin<T>(...mixins) : new() => T {
    class X {
        constructor() {
            mixins[0].call(this);
        }
    }
    Object.assign(X.prototype, ...mixins.map(m => m.prototype));
    return <any>X;
}

abstract class Dog {
    bark() { console.log('bark!'); }
}

abstract class Duck {
    quack() { console.log('quack!'); }
}

class Base {
    constructor() {
        console.log('base ctor');
    }

    world = "world";

    hello() {
        console.log(`hello ${this.world}`);
    }
}

interface DoggyDuck extends Base, Dog, Duck { }

class Mutant extends Mixin<DoggyDuck>(Base, Dog, Duck) {

}

let xavier = new Mutant();
xavier.bark();
xavier.quack();
xavier.hello();

I wanted to make a quick fix to one of the pages: https://basarat.gitbooks.io/typescript/content/docs/types/ambient/d.ts.html#

However clicking 'edit this page' led me to a 404:
https://github.com/basarat/typescript-book/tree/master/en/docs/types/ambient/d.ts.md

Great book, BTW ;-)

http://www.typescriptlang.org/Playground/#src=interface%20Foo%20%7B%0A%09foo%3A%20number%3B%0A%7D%0Ainterface%20Bar%20%7B%0A%09bar%3A%20number%3B%0A%7D%0A%0Avar%20foo%3AFoo%3B%0Afoo%20%3D%20%7Bfoo%3A123%7D%3B%20%2F%2F%20okay%0Afoo%20%3D%20%7B%7D%3B%20%2F%2F%20Error%0Afoo%20%3D%20%3CFoo%3E%7B%7D%3B%20%2F%2F%20Okay%20as%20%60Foo%60%20is%20assignable%20to%20%60%7B%7D%60%0Afoo%20%3D%20%3CFoo%3E%7Bbar%3A123%7D%3B%20%2F%2F%20Error%20as%20%60Foo%60%20is%20not%20assignable%20to%20%60Bar%60%20and%20%60Bar%60%20is%20not%20assignable%20to%20%60Foo%60%0A%20%20

This is just a suggestion, but maybe an example on how to assign properties to new variable names would be of benefit. My issue was that some of the properties contained spaces so I didn't know how to assign them.

E.G

var obj = {"some property": "some value", anotherProperty: "another value"};

//destructure
var {"some property": someProperty, anotherProperty} = obj;
//someProperty="some value"; 

Thanks for an excellent resource.

Stateless function components : microsoft/TypeScript#4861 :)

Add a chapter on this modeling

include : microsoft/TypeScript#4910

Hi Basarat!

What do you think about adding more ES6 features, such as Symbols, Maps and Sets into the book? These features are mostly about ES6 rather than TypeScript, however usage of these things has some specific in TypeScript and worth documenting. What is the best way to structure this information on your opinion?

• In ES6 features
• In readonly for a sample of readonly dictionary 🌹

microsoft/TypeScript#2249

Also checkout http://blog.wolksoftware.com/decorators-metadata-reflection-in-typescript-from-novice-to-expert-part-4

https://blogs.msdn.microsoft.com/typescript/2016/02/22/announcing-typescript-1-8-2/

import { Scale } from "./scale";
import "./advancedScale";

It would be nice to have a chapter describing iterators (with iterator symbol) specific with TypeScript. It is quite straight forward, we're just need to define proper type as it expressed in https://github.com/Microsoft/TypeScript/blob/master/src/lib/es6.d.ts, but still good to have as a separate chapter.

microsoft/TypeScript#1007

http://stackoverflow.com/a/34193842/390330

Update book https://github.com/basarat/typescript-book/blob/master/docs/tips/bind.md

if microsoft/TypeScript#212 changes

Specifially string + number index signatures : http://stackoverflow.com/a/30659916/390330

The following code : https://github.com/Microsoft/TypeScript/blob/12c6a7400dffc10c41f9245da64fbd5beeceb3dc/src/services/services.ts#L7843-L7847

                if (length > 0) {
                    result.spans.push(start);
                    result.spans.push(length);
                    result.spans.push(classification);
                }

I also found the comment // Encoded as triples of [start, length, ClassificationType]. in the source. It was completely unobvious till I reviewed the code and can break on API consumers if new things are needed. Would be better if it was moved into {start,length,classification} datastructure, but I guess they did it for performance reasons 🌹

Update https://basarat.gitbooks.io/typescript/content/docs/let.html please 🌹

Write a complete section on it

• declare
• classic lookup
• node lookup
• with path mappings

e.g :

function test({ x, y }: { x: number, y: number }) {
  console.log(x, y);
}

test({
  x: 1,
  y: 2
});

with defaults :

function test({ x = 123, y = 456 } = {}) {
  console.log(x, y);
}

test({
  x: 1,
  y: 2
});

with defaults and type annotation:

function test({ x = 123, y = 456 }: { x?: number, y?: number } = {}) {
  console.log(x, y);
}

test({
  x: 1,
  y: 2
});

Also https://blog.mariusschulz.com/2015/11/13/typing-destructured-object-parameters-in-typescript

From: https://basarat.gitbooks.io/typescript/content/docs/types/ambient/d.ts.html

If a file has the extension .d.ts then each root level definition much have the declare keyword prefixed to it to make it clear that the author knows that there will be no code emitted by TypeScript to ensure that this defined item will exist at runtime.

Do you mean "no code emitted by TypeScript and to ensure that this defined item will exist at runtime"?

readonly is planned to 2.0

As it is typed as any. Instead use the arrow. E.g. don't do:

<ScrollWrapper>
 <SidebarMenu toggle={ this.toggle.bind(this) } />
</ScrollWrapper>

In the book, this code is demonstrated :

function foo(x, y, z) { }
var args = [0, 1, 2];
foo(...args);

This is perfectly valid ES6 code, however AFAIK the TS compiler reports an error per microsoft/TypeScript#5296

microsoft/TypeScript#5185 (comment) 🌹

getName : https://github.com/TypeStrong/atom-typescript/blob/master/lib/main/lang/utils.ts#L300-L308

var nameExtractorRegex = /return (.*);/;
/** Get the name using a lambda so that you don't have magic strings */
export function getName(nameLambda: () => any) {
    var m = nameExtractorRegex.exec(nameLambda + "");
    if (m == null)
        throw new Error("The function does not contain a statement matching 'return variableName;'");
    var access = m[1].split('.');
    return access[access.length - 1];
}

David's function : http://stackoverflow.com/a/32542368/390330

function getPropertyName(propertyFunction) {
    return /\.([^\.;]+);?\s*\}$/.exec(propertyFunction.toString())[1];
}

Assert a return object literal in an expression using brackets ()=>({a:123})

Here : https://basarat.gitbooks.io/typescript/content/docs/types/type-system.html

microsoft/TypeScript#3622

Use Object.assign when available.

Sample : http://stackoverflow.com/a/34212743/390330 🌹

Since this book is meant to be the definitive guide to TypeScript, developers ideally will read this when ramping up on TS as I did. In deploying a production system, you don't want to use an unreleased version of TS to get access to WIP features. You suggest getting the nightly build of TS as you are showing some future features. I would suggest that these future features (e.g., JSX, alt Type Assertion), should be marked as future to avoid confusion.

Since you're making this available for free, a Creative Commons license would help to make that clear.

Should help with : microsoft/TypeScript#1805 (comment)

https://github.com/Microsoft/TypeScript/wiki/What%27s-new-in-TypeScript#augmenting-globalmodule-scope-from-modules

// Ensure this is treated as a module.
export {};

declare global {
    interface Array<T> {
        mapToNumbers(): number[];
    }
}

Array.prototype.mapToNumbers = function () { /* ... */ }

microsoft/TypeScript#4914

microsoft/TypeScript#7140

Nullable types are just syntactic sugar for union types that include type of null/undefined.

See microsoft/TypeScript#5949

Definitely worth covering at some point

http://stackoverflow.com/a/33271578/390330

return { temperature:temperature, humidity:humidity};

Checkout New notations in ES6 : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer

http://stackoverflow.com/questions/33410124/complete-list-of-typescript-error-codes-and-their-fixes

Import

import * as $ from "jquery"
import {extend} from "jquery"
import {extend as ex} from "jquery" // Useful if the name conflicts with a local variable
import something from "es6module"; // For default import. Not recommended https://basarat.gitbooks.io/typescript/content/docs/tips/defaultIsBad.html

Export

export something
export default something // Not recommended https://basarat.gitbooks.io/typescript/content/docs/tips/defaultIsBad.html
export = something; // Not recommended for new code. Prefer default export or export individual items
export {extend as ex} // Useful when you want to extend an alias

Reexport

export * from 'mod'; // Great for top level file where you just export everthing from some sub module.
export {v} from 'mod'; // Great for top level file e.g. main.js where you just export stuff from different files in your project.
export {v as x} from 'mod'; // When you want to export stuff from someone else's module but with a different name.

Quite often I do something like:

export var types = { 
    setActiveProject: '',
    expandErrors: '',
    collapseErrors: '',
}

// make values same as keys
Object.keys(types).map((key) => types[key] = key);

Each member is infered to be be string, you cannot access something that is invalid and the values are kept into sync.

"interfaces" below is a link which point to https://basarat.gitbooks.io/typescript/content/types/ambient/interfaces.md and its says 404

Again. Iterator itself is not a TypeScript feature, this code could work without implementing Iterator and IteratorResult interfaces explicitly. However it is very helpful to use these common ES6 interfaces for code consistency.