Expected duration 45 min ⏰

Get a useful understanding of new features that can be applied immediately 👨‍💻

function foo(x: string | number | boolean) {
    if (typeof x === "string") {
        x; // type of x is string here
        x = 1;
        x; // type of x is number here
    }
    x; // type of x is number | boolean here
}

interface Square {
    kind: "square";
    size: number;
}

interface Circle {
    kind: "circle";
    radius: number;
}

type Shape = Square | Circle;

function area(s: Shape) {
    // In the following switch statement, the type of s is narrowed in each case clause
    // according to the value of the discriminant property, thus allowing the other properties
    // of that variant to be accessed without a type assertion.
    switch (s.kind) {
        case "square": return s.size * s.size;
        case "circle": return Math.PI * s.radius * s.radius;
    }
}

// Function returning never must have unreachable end point
function error(message: string): never {
    throw new Error(message);
}


// Inferred return type is never
function fail() {
    return error("Something failed");
}


// Function returning never must have unreachable end point
function infiniteLoop(): never {
    while (true) {
    }
}

// EX1
function f1(this: void) {
    // make sure `this` is unusable in this standalone function
}

// EX2
interface Error {
    msg: string;
}

function f2(this: Error) {
    console.log(this.msg);
}

class Bar {
    a: number;
    b?: number; // it is asserted as number | undefined

    f() {
        return 1;
    } 

    // Body of optional method can be omitted, asserted as (() => number) | undefined
    g?(): number; 

    h?() {
        return 2;
    }
}

class Singleton {
    private static instance: Singleton;

    private constructor() { }

    static getInstance() {
        if (!Singleton.instance) {
            Singleton.instance = new Singleton();
        }
        return Singleton.instance;
    }
}

let e = new Singleton(); // Error: constructor of 'Singleton' is private.
let v = Singleton.getInstance();

abstract class Base {
    abstract name: string;
    abstract get value();
    abstract set value(v: number);
}

class Derived extends Base {
    name = "derived";

    value = 1;
}

function httpService(path: string, headers: { [x: string]: string }) { }

const headers = {
    "Content-Type": "application/x-www-form-urlencoded"
};

httpService("", { "Content-Type": "application/x-www-form-urlencoded" });  // Ok
httpService("", headers);  // Now ok, previously wasn't

import B, { readFile } from "./b";
// ^ Error: `B` declared but never used
readFile();

export function write(message: string, args: string[]) {
    // ^^^^ Error: 'arg' declared but never used.
    console.log(message);
}

//Parameters declaration with names starting with 
//_ are exempt from the unused parameter checking. e.g.:
function returnNull(_a, __) { // OK
    return null;
}

// in somefile.ts

interface Error {
    stack?: string;
}

interface Error {
    code?: string;
    path?: string;
    stack?: string;  // OK, previously was error
}

// EX1
interface Person {
    name: string;
    age: number;
    location: string;
}

type K1 = keyof Person; // "name" | "age" | "location"
type K2 = keyof Person[];  // "length" | "push" | "pop" | "concat" | ...
type K3 = keyof { [x: string]: Person };  // string

// EX2 type-safe lookups:
function getProperty<T, K extends keyof T>(obj: T, key: K) {
    return obj[key];  // Inferred type is T[K]
}

let x = { foo: 10, bar: "hello!" };

let foo = getProperty(x, "foo"); // OK -> number
let oops = getProperty(x, "wargarbl"); // Error! "wargarbl" is not "foo" | "bar"

class Person {
    constructor(
        public name: string,
        public age: number
    ) { }
}

type Partial<T> = {
    [P in keyof T]?: T[P]
};

var p = new Person("pero", 15);

var ppErr: Partial<Person> = { 
    name: "jack", 
    surname: "test" // Error! 'surname' does not exist on Person, you can't use undefined props, only leave out existing
};

var ppOK: Partial<Person> = { name: "jack" };

// spread the original object into a new shallow copy
let copy = { ...original };

// merge props of foo, bar and baz into merged
let merged = { ...foo, ...bar, ...baz };

let obj = { x: 1, y: 1, z: 1 };
let { z, ...obj1 } = obj;
obj1; // {x: number, y:number};

async function fn(): Promise<number> {
    return new Promise<number>((resolve, reject) => {
        setTimeout(resolve.bind(null, 2), 1500);
    });
}

async function fn2(num: number) {
    return await fn() * num;
}

function fn3(num: number) {
    fn2(num).then(num => {
        console.log(`returned number: ${num}`);
    })
}

fn3(10); // 20 after 1.5 sec

// tsc --module commonjs --importHelpers a.ts
// .ts source:
const copy = { ...o };

// will transpile into:
var tslib_1 = require("tslib"); // importing the tslib
var copy = tslib_1.__assign({}, exports.o);

declare function create(o: object | null): void;

create({ prop: 0 }); // OK
create(null); // OK

create(42); // Error
create("string"); // Error
create(false); // Error
create(undefined); // Error

function f() {
  if (new.target) { /* called via 'new' */ }
}

// ...which translates into:
function f() {
  var _newTarget = this && this instanceof f ? this.constructor : void 0;
  if (_newTarget) { /* called via 'new' */ }
}

interface StringMap<T> {
    [x: string]: T;
}

const map: StringMap<number> = { age: 5 };

map["prop1"] = 1; // OK! worked before
map.prop2 = 2; // OK!

map["wontWork1"] = "a"; // Error! a is not assignable to type number
map.wontWork2 = "b"; // Error! b is not assignable to type number

class Point {
    constructor(public x: number, public y: number) {}
}

class Person {
    constructor(public name: string) {}
}

type Constructor<T> = new(...args: any[]) => T;

function Tagged<T extends Constructor<{}>>(Base: T) {
    return class extends Base {
        _tag: string;
        constructor(...args: any[]) {
            super(...args);
            this._tag = "";
        }
    }
}

const TaggedPoint = Tagged(Point);

let point = new TaggedPoint(10, 20);
point._tag = "hello";

interface Iterator<T> {
  next(value?: any): IteratorResult<T>;
  return?(value?: any): IteratorResult<T>;
  throw?(e?: any): IteratorResult<T>;
}

function* f1() {
    yield 5;
    yield* [6, 7, 8, 9, 10];
}

function* f2() {
  yield 1;
  yield* [2, 3];
  yield 4;
  yield* f1();
}

// using the new for .. of loop which leverages iterators and generators
for (x of f2()) { // results in (separated by new line): 1 2 3 4 5 6 7 8 9 10
    console.log(x); 
}

// mind the Promise<>
interface AsyncIterator<T> {
  next(value?: any): Promise<IteratorResult<T>>;
  return?(value?: any): Promise<IteratorResult<T>>;
  throw?(e?: any): Promise<IteratorResult<T>>;
}

async function* g() {
  yield 1;
  await sleep(3000);
  yield* [2, 3];
  yield* (async function *() { // => async arrow fn not supported yet
    await sleep(1000);
    yield 4;
  })();
}

// The new for-await-of Statement
async function f() {
  for await (const x of g()) {
     console.log(x);
  }
}

await f(); // 1, ...waits 3 sec..., 2, 3, ...waits 1 second..., 4

declare function create(): Container<HTMLDivElement, HTMLDivElement[]>;
declare function create<T extends HTMLElement>(element: T): Container<T, T[]>;
declare function create<T extends HTMLElement, U extends HTMLElement>(element: T, children: U[]): Container<T, U[]>;

declare function create<T extends HTMLElement = HTMLDivElement, U = T[]>(element?: T, children?: U): Container<T, U>;

// import a module
import { sum } from "someExports"; // exports sum() and IM_A_CONST

(async function importConstDynamically(): Promise<void> {
    const { IM_A_CONST } = await import("someExports");
    sum(5, IM_A_CONST);
})();

define(["require", "exports", "tslib", "someExports"], function (require, exports, tslib_1, someExports_1) {
    "use strict";
    exports.__esModule = true;
    (function importConstDynamically() {
        return tslib_1.__awaiter(this, void 0, void 0, function () {
            var IM_A_CONST;
            return tslib_1.__generator(this, function (_a) {
                switch (_a.label) {
                    case 0: return [4, new Promise(function (resolve_1, reject_1) { require(["someExports"], resolve_1, reject_1); })];
                    case 1:
                        IM_A_CONST = (_a.sent()).IM_A_CONST;
                        someExports_1.sum(5, IM_A_CONST);
                        return [2];
                }
            });
        });
    })();
});

enum Colors {
    Red = "RED",
    Green = "GREEN",
    Blue = "BLUE",
}

function arrayMap<T, U>(f: (x: T) => U): (a: T[]) => U[] {
    return a => a.map(f);
}

const lengths: (a: string[]) => number[] = arrayMap(s => s.length);

// As an example of new errors you might spot as a result:
let x: Promise<string> = new Promise(resolve => {
    resolve(10);
    //      ~~ Error!
});

interface Options {
    data?: string,
    timeout?: number,
    maxRetries?: number,
}

// In TypeScript 2.4, it’s now an error to assign anything to a 
// weak type when there’s no overlap in properties:
function sendMessage(options: Options) {
    // ...
}

const opts = {
    payload: "hello world!",
    retryOnFail: true,
}

// Error!
sendMessage(opts);
// No overlap between the type of 'opts' and 'Options' itself.
// Maybe we meant to use 'data'/'maxRetries' instead of 'payload'/'retryOnFail'.

let input = "...";

try {
    JSON.parse(input);
}
catch {
    // ^ Notice that our `catch` clause doesn't declare a variable.
    console.log("Invalid JSON given\n\n" + input)
}