Just another developer

🔥 I hope to see you on my channels: @SeasonedDev and C# 1001 notes

TypeScript types cheat sheet

06 Feb 2020

This post is a collection of the available TypeScript types, examples of their usual use, and JavaScript outputs.

Update history:

  • 13 Feb 2020 - Added void type (thx to AngularBeginner);
  • 13 Feb 2020 - Added unknown type (thx to andra_nl);
  • 8 Mar 2020 - Added the const enum section;

Boolean

Nothing special, just true and false:

TypeScript:

let isDone: boolean = true;

JavaScript:

let isDone = true;

Note: Boolean with an upper case B is different from boolean with a lower case b. Upper case Boolean is an object type whereas lower case boolean is a primitive type. It is always recommended to use boolean.

Number

4 ways to declare a number:

TypeScript:

let decimal: number = 6;
let hex: number = 0xf00d;
let binary: number = 0b0101;
let octal: number = 0o744;

JavaScript:

let decimal = 6;
let hex = 0xf00d;
let binary = 0b0101;
let octal = 0o744;

Note: All numbers in TypeScript are floating point values

String

Same to boolean, pretty much as-is:

TypeScript:

let color: string = "blue";
let template = `Sky is ${color}`;

JavaScript:

let color = "blue";
let template = `Sky is ${color}`;

Array

There are two ways to declare an array:

TypeScript:

let list: number[] = [1, 2, 3];
let array: Array<number> = [1, 2, 3];

JavaScript:

let list = [1, 2, 3];
let array = [1, 2, 3];

Note: Both ways produce the same JavaScript output

You can also declare an array that contains elements of different data types:

TypeScript:

let values: (string | number)[] = ['Apple', 2, 'Orange', 3, 4, 'Banana']; 
// or 
let values: Array<string | number> = ['Apple', 2, 'Orange', 3, 4, 'Banana'];

JavaScript:

let values = ['Apple', 2, 'Orange', 3, 4, 'Banana'];
// or 
let values = ['Apple', 2, 'Orange', 3, 4, 'Banana'];

Tuple

Tuple is a type that allows you to express an array with a fixed number of elements whose types are known:

TypeScript:

let x: [string, number];
x = ["hello", 10];
let str = x[0];
let num = x[1];

JavaScript:

let x;
x = ["hello", 10];
let str = x[0];
let num = x[1];

Enum

Numeric

Numeric enum allows you to use and specify numeric values:

TypeScript:

enum Color { Red = 1, Green = 2 }
let c: Color = Color.Green;

JavaScript:

var Color;
(function (Color) {
    Color[Color["Red"] = 1] = "Red";
    Color[Color["Green"] = 2] = "Green";
})(Color || (Color = {}));
let c = Color.Green;

Look at this elegant approach:

Color[Color["Red"] = 1] = "Red";

Since the Color is the object, this line is responsible for producing the following output:

{
  1: "Red"
  2: "Green"
  Red: 1
  Green: 2
}

Eventually, it allows us to access the enum both ways: either Color.Red or Color[1].

Get name

Two ways to get the enum’s key:

TypeScript:

let cs: string = Color[0] || Color[Color.Green] // Green

JavaScript:

let cs = Color[0] || Color[Color.Green]; // Green

Note: Works with numeric enums only

Duplicates

I don’t know why but you can use a single value for multiple enum keys:

TypeScript:

enum Vehicle { Car = 1, Plane = 1 }
let vs: Vehicle = Vehicle.Car;       // 1
let vss: Vehicle = Vehicle.Plane;    // 1

JavaScript:

var Vehicle;
(function (Vehicle) {
    Vehicle[Vehicle["Car"] = 1] = "Car";
    Vehicle[Vehicle["Plane"] = 1] = "Plane";
})(Vehicle || (Vehicle = {}));
let vs = Vehicle.Car; // 1
let vss = Vehicle.Plane; // 1

In this case you’ll end up with the following output:

{
  1: "Plane"
  Car: 1
  Plane: 1
}

Note: You can get the same value by multiple keys but not vice versa

Const

Const enums are completely removed during compilation. Const enum mebers are inlined:

TypeScript:

const enum Directions { Up, Down, Left, Right }
let directions = [ 
    Directions.Up, 
    Directions.Down, 
    Directions.Left, 
    Directions.Right
];

JavaScript:

"use strict";
let directions = [0 /* Up */, 1 /* Down */, 2 /* Left */, 3 /* Right */];

String

String enums allow you to specify string values but the output is a bit different:

TypeScript:

enum Sex { Male = "MALE", Female = "FEMALE" }

JavaScript:

var Sex;
(function (Sex) {
    Sex["Male"] = "MALE";
    Sex["Female"] = "FEMALE";
})(Sex || (Sex = {}));

The output object won’t have MALE and FEMALE properties, so there is only one way to access values:

let s: Sex = Sex.Male // Male
let ss: Sex = Sex["MALE"] || Sex[Sex.Male] // Error: Property MALE doesn't exist on type Sex

Heterogeneous

Again, the use case isn’t clear for me, but you can define enums with values of various types:

TypeScript:

enum Status { Started = 'STARTED', Progress = 1, Done }

JavaScript:

var Status;
(function (Status) {
    Status["Started"] = "STARTED";
    Status[Status["Progress"] = 1] = "Progress";
    Status[Status["Done"] = 2] = "Done";
})(Status || (Status = {}));

Status.Done has the value 2 which was calculated automatically

Any

TypeScript has type-checking and compile-time checks. And any is extremely helpful when we don’t have prior knowledge about the type of some variables:

TypeScript:

let notSure: any = 4;
notSure = 'maybe a string';
notSure = false;

JavaScript:

let notSure = 4;
notSure = 'maybe a string';
notSure = false;

Why not have an array of any values? Absolutely not a problem:

TypeScript:

let notSureList: any[] = [1, 'free', true]

JavaScript:

let notSureList = [1, 'free', true];

Unknown

The unknown type is very similar to any but much less permissive. On the one hand unknown variables can hold any values (e.g. true, [], Math.random, undefined, new Error()). On the other hand TypeScript won’t let you to access type specific properties and operations without explicit and prior type checking:

TypeScript:

// unknown
function format(value: unknown): any {
    // return value.trim();    // Error
    if (typeof value === 'string') {
        return value.trim();    // OK
    }

    // return value.length; // Error
    if (value instanceof Array) {
        return value.length;    // OK
    }
}

JavaScript:

function format(value) {
    // return value.trim();    // Error
    if (typeof value === 'string') {
        return value.trim(); // OK
    }
    
    // return value.length; // Error
    if (value instanceof Array) {
        return value.length; // OK
    }
}

Both typeof and instanceof operators are valid for type checking

Null & undefined

Null and undefined are separate types in TypeScript. They’re not extremely useful on their own, but still can assist you as a part of union type declarations:

TypeScript:

function search(term: string | null | undefined) 
{
}

JavaScript:

function search(term) 
{
}

Void

Void type is used to declare functions that don’t return any meaningful value (besides undefined and null (if --strictNullChecks is disabled)). Anyway, you can even declare void variables:

TypeScript:

function log(): void {
    return undefined;
}
const l: void = 1; // Error: Type '1' is not assignable to type 'void'
const ll: void = log(); // undefined

JavaScript:

function log() {
    return undefined;
}
const l = 1; // Error: Type '1' is not assignable to type 'void'
const ll = log(); // undefined

Never

The last piece in puzzle is the type never. It could be used as the return type of a function that always throws an exception or never returns a value.

TypeScript:

function err(msg: string): never {
    throw new Error(msg);
}
function fail(): never {
    return err('Failed');
}
function infLoop(): never {
    while (true) { }
}

JavaScript:

function err(msg) {
    throw new Error(msg);
}
function fail() {
    return err('Failed');
}
function infLoop() {
    while (true) { }
}

Reference:

  1. TypeScript playground;
  2. Basic types;
  3. Enums in TypeScript;
  4. Boolean in TypeScript;
  5. Boolean in Javascript and TypeScript;
  6. The unknown Type in TypeScript;

Follow me online

Join the Discord: https://discord.gg/V4yMGPQzRB

Related Posts