TypeScript types cheat sheet
06 Feb 2020This 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 fromboolean
with a lower case b. Upper caseBoolean
is an object type whereas lower caseboolean
is a primitive type. It is always recommended to useboolean
.
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
andinstanceof
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:
- TypeScript playground;
- Basic types;
- Enums in TypeScript;
- Boolean in TypeScript;
- Boolean in Javascript and TypeScript;
- The unknown Type in TypeScript;
Follow me online
Join the Discord: https://discord.gg/V4yMGPQzRB
- GitHub: https://github.com/FSou1
- LinkedIn: https://www.linkedin.com/in/maxim-zhukov-dev
- Youtube: https://www.youtube.com/channel/UCz6AZvABoICHPpi43y-Hd5g
- Telegram: https://t.me/seasoneddev