TypeScript

Types

TypeScript provides many different types. We'll start with the most basic types — the core types provided by vanilla JavaScript.

function add(number1: number, number2: number) {
	return number1 + number2;
}

const x = Number.isInteger(5);
console.log(x);
const y = Number.isInteger(5.2);
console.log(y);

true
false

function isEmptyString(str: string) {
	return str === "";
}

function Nand(a: boolean, b: boolean) {
	return !(a && b);
}

Type Inference

TypeScript provides a type-inference system. For example, TypeScript can infer all of the following:

const x = 5; // infers number
const y = true; // infers boolean
let n = ""; // infers string

For declared but uninitialized variables, it's considered best practice to indicate the variable's type upfront:

let x: number;
let y: boolean;
let n: string;

Object Types

Suppose we had the following JavaScript object:

const square = {
	width: 5,
	height: 5,
	name: "square1",
};

TypeScript infers square's type as:

{
	width: number;
	height: number;
	name: string;
}

This works for nested objects as well.

const polygon = {
	sideNames: ["a", "b", "c", "d"],
	dimensions: {
		length: 5,
		width: 5,
	},
	name: "polygon1",
};

The inferred type:

{
	sideNames: string[],
	dimensions: {
		length: number,
		width: number
	},
	name: string,
};

Array Types

Arrays can also have types. As we know, JavaScript arrays can be homogenous (all of the array's elements are of one type) or heterogenous (the array consists of elements of various types).

const arr = ["a", "b", "c"];

arr: string[];

const arr = ["a", 1, true];

arr: any[];

Tuple Types

Tuples are a data structure unique to TypeScript. They are not a part of vanilla JavaScript. Simply put, tuples are arrays of fixed length. Having fixed lengths is useful when we know that some datum should consist of a finite, ordered set of values. For example, the Cartesian coordinate takes the form ${(x,y).}$ With TypeScript, we can write:

cartesianCoordinate: [number, number];

Enums

Enums are a useful type found in various languages. They're what we should use when we know that a particular value can only be one of a finite set. For example, we might have data that can only be one of VOTER and NONVOTER. In plain JavaScript, we might specify these as global constants:

const VOTER = "voter";
const NONVOTER = "nonvoter";

This allows us to use the values VOTER or NONVOTER anywhere in our code.

const VOTER = "voter";
const NONVOTER = "nonvoter";

if (user.registration === VOTER) {
	user.castVote();
}

The problem with this approach is that we have to keep track of these constants. Not a huge problem if we only have a few such constants, but it can get unwieldy once we have several.

Fortunately, TypeScript makes this easy:

enum VoteStatus {
	VOTER,
	NONVOTER,
}

if (user.registration === VoteStatus.VOTER) {
	user.castVote();
}

As with other languages, by default, the enum values map to numbers. Thus, the values above are really:

enum VoteStatus {
	VOTER = 0,
	NONVOTER = 1,
}

Of course, we can assign custom values:

enum VoteStatus {
	VOTER = "voter",
	NONVOTER = "nonvoter",
}

Union Types

Union types allow us to specify "or" type data. For example, we might have a function that takes a color value argument. That value could be a string (for an HTML named color) or a number (perhaps some HEX value). We could specify the function's parameter as:

function color(colorValue: string | number) {
	if (typeof colorValue === "string") {
		// code to execute if the value's a string
	} else {
		// code to execute if the value's a number
	}
}

Type Aliasing

Some union types — e.g., number | string — are so common that it'd be cumbersome to write such types over and over again. Similar to languages like ML, TypeScript allows us to write type aliases:

type Color = number | string;

function color(colorValue: Color) {
	if (typeof colorValue === "string") {
		// code to execute if the value's a string
	} else {
		// code to execute if the value's a number
	}
}

Type aliases aren't limited to union types. We can use them for all the previous types we've seen. For example, we might want to specify a Cartesian coordinate as always having the type CartesianCoordinate:

type CartesianCoordinate = [number, number];

Return Types

Some languages require functions to have return types (e.g., Rust, Swift, C, C++). Having explicit return types for functions makes our code much more predictable and reason about.

For example, a function that adds two numbers should always return a number:

function add(a: number, b: number): number {
	return a + b;
}

Notice how we placed the type after the function's header. This is tells TypeScript that our function add should always return a number.

function printErrorCode(code: number): void {
	console.log(code);
}

Functions as Types

TypeScript allows us to write function types. We can think of the function type as outlining what the function should take and return:

const f: () => number;

The code above tells TypeScript that the functione f takes no parameters and returns a number. If the function f does have parameters, say, numbers, we can write:

const f: (a: number, b: number) => number;