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);

type (thx to AngularBeginner); 13 Feb 2020 — Added unknown type (thx to andra_nl);

type (thx to andra_nl); 8 Mar 2020 — Added the const enum section;

All of the samples from the code are available here: TypeScript playground.

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 members 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 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: