TypeScript

TypeScript #

Properly handle unknown errors # 

interface ErrorWithCode extends Error {
    code: string;
}

function isErrorWithCode(err: unknown): err is ErrorWithCode {
    if (err instanceof Error) {
        if ('code' in err)) {
            return true;
        }
    }
    
    return false;
}

function doSomething(key: string) {
    try {
     ...
    } catch (ex) {
        if (isErrorWithCode(ex) && ex.code === 'ENOENT') {
          // do something
        } else {
            throw ex;
        }
    }

Get properties from unknown objects # 

function getName(something: unknown) {
    let name: string | undefined;
    
    if (typeof something === 'object' && something !== null && 'name' in something) {
        if (typeof something.name === 'string') {
            name = something.name;
        }
    }
    
    return name;
}

Switch expression # 

switch(expression) {
    case constant-expression1: {
        //statements;
        break;
    }
    case constant_expression2: {
        //statements;
        break;
    }
    default: {
        //statements;
        break;
    }
}

Delete generated js files #

tsc --build --clean

TypeScript ? question mark - optional chaining # 

const test = undefined;
console.log(test.length)
// TypeError: Cannot read properties of undefined (reading 'length')

const test = undefined;
console.log(test?.length)
// undefined

TypeScript project references , nested tsconfig.json #

  • Nested tsconfigs do NOT automatically assume different projects
  • By adding references in the root project, you instruct tsc to build first the referenced projects and then the root one
  • The root tsconfig should exclude the directories of the referenced projects and the child projects should stop the exclusion on their own tsconfig
  • Referenced projects should have ‘composite’: true and noEmit: false in their tsconfigs
  • Project references

TypeScript - improve performance #

tsconfig.json types array not getting used #

Delete the tsconfig.tsbuildinfo cache file!

Use of never for exhaustiveCheck # 

function doSwitch(value: MyEnum): boolean {
    switch (value) {
        case MyEnum.A: return true;
        case MyEnum.B: return true;
        default: {
            // Use never type here
            const exhaustiveCheck: never = value;
            throw new Error(exhaustiveCheck);
        }
    }
}

Assign a property on constructor # 

export class Lock {
    constructor(private lockName: string) {
    }
}

Assert not null with typescript typeguard # 

function expectNotNull<T>(value: T): asserts value is NonNullable<T> {
    expect(value).not.toBeNull();
}

Assert not undefined with typescript typeguard # 

function expectNotUndefined<T>(value: T): asserts value is NonUndefined<T> {
    if (value === undefined) {
        throw new Error('Value is undefined');
    }
}

type NonUndefined<T> = T extends undefined ? never : T;

ESM modules error: CustomError: Cannot find module … imported from … #

Add the “.js” NOT “.ts” extension in the import, i.e. import { EfficientQueue } from './EfficientQueue.js';

String comparator for sorting #

String.localCompare()

const items = ["réservé", "premier", "communiqué", "café", "adieu", "éclair"];
items.sort((a, b) => a.localeCompare(b));

Convert string array to union type # 

const myVals = ['A', 'B'] as const;

type myUnionType = typeof myVals[number];

Convert a property of an object array to union type # 

const colors = [
    { no: 1, name: 'Red' },
    { no: 2, name: 'Green' },
    { no: 3, name: 'Blue' },
] as const;

type ColorName = typeof colors[number]['name']; // 'Red' | 'Green' | 'Blue'

Convert string array to object keys # 

const myVals = ['a', 'b'] as const;

type myObj = {
    [P in (typeof myVals)[number]]: boolean;
};

Convert object keys to union type # 

const yesNo = {
    yes: 'Yes',
    no: 'No',
} as const;

type YesNo = typeof yesNo[keyof typeof yesNo];

Convert object keys to array # 

const yesNo = {
    yes: 'Yes',
    no: 'No’
} as const;

const getKeys = Object.keys as <T extends object>(obj: T) => Array<keyof T>

const yesNoArr = getKeys(yesNo);

TypeScript Object vs {} vs object #

TypeScript has three confusing types: Object, {} and object.

You can assign null and undefined to all three types if strictNullChecks compiler option is disabled otherwise the compile error occurs.

  • Object: Contains stuff (like toString(), hasOwnProperty()) that is present in all JavaScript objects. Any value (primitive, non-primitive) can be assigned to Object type.
  • {}: {} is an empty object. It is pretty much the same as Object in runtime but different in compile time. In compile time {} doesn’t have Object’s members and Object has more strict behavior (see the @golmschenk’s comment).
  • object: object was introduced in TypeScript 2.2. It is any non-primitive type. You can’t assign to it any primitive type like bool, number, string, symbol.

Differentiating between types in a union based on a key #

Use the ‘in’ operator as a type guard

interface Car {
    color: string;
    doors: number;
    speed: number;
    bootSize: number;
}

interface Bike {
    color: string;
    speed: number;
    type: string;
}

function doSomething(vehicle: Car | Bike) {
    if ('doors' in vehicle) {
        console.log(vehicle.bootSize);
    } else {
        console.log(vehicle.type);
    }
}

Destructuring #

Destructuring to new variables #

let { r, g, b } = colors;

Destructuring to new variables with different names #

let { r: red, g: green, b: blue } = colors;

Destructuring to existing variables # 

let r, g, b;
({ r, g, b } = colors);

Destructuring to existing variables with different names # 

let red, green, blue;
({ r: red, g: green, b: blue } = colors);

Destructuring into another object with same property names # 

let myColor = { r: 0, g: 0, b: 0 };..
({ r: myColor.r, g: myColor.g, b: myColor.b } = colors);

Destructuring into another object with different property names # 

let myColor = { red: 0, green: 0, blue: 0 };.
({ r: myColor.red, g: myColor.green, b: myColor.blue } = colors);

Array destructuring # 

const RGB = [255, 180, 151];
const [red, green, blue] = RGB;

Destructure, Skip the first item and set default value # 

const RGB = [255, 180];
// Set a default value (51) for the third item (`blue`)
const [, green, blue = 51] = RGB;

Access nested properties # 

const student = {
    name: 'John Doe',
    age: 16,
    scores: {
        maths: 74,
        english: 63
    }
};

const { name, scores: {maths, science = 50} } = student;

Swap variables # 

let width = 300;
let height = 400;

[width, height] = [height, width];

Nested array destructuring # 

const color = ['#FF00FF', [255, 0, 255], 'rgb(255, 0, 255)'];
const [hex, [red, green, blue]] = color;

Rest items # 

const rainbow = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'];
const [red,, yellow, ...otherColors] = rainbow;
console.log(otherColors); // ['green', 'blue', 'indigo', 'violet']

Running esm scripts using ts-node #

In tsconfig.json

"ts-node": {
    "moduleTypes": {
        "./my-script.ts": "esm"
    }
}

To execute

node --loader ts-node/esm ./my-script.ts

Utility types libraries #

Other resources #

TypeScript Training #