Typescript Cheatsheet

cheatsheet.ts

/* eslint-disable no-console */
/* eslint-disable @typescript-eslint/no-unused-vars */
/* eslint-disable @typescript-eslint/no-inferrable-types */
/* eslint-disable no-unused-vars */

/*
WATCH: https://www.youtube.com/playlist?list=PLNqp92_EXZBJYFrpEzdO2EapvU0GOJ09n
*/

/*
note that it is preferable to allow typescript to infer the type
Example:
	const username: string = "Fred";
Allowed inferrable
	const username = "Fred";
Examples below just show the types, but would normally be inferred
*/

const username: string = "Fred";
const hasLoggedIn: boolean = true;
const pattern: RegExp = /foo/gi;
const terms: string[] = ["hello", "world"];
const sequence: number[] = [10, 20, 30];
const sequencegeneric: Array<number> = [10, 20, 30];

/*
Object type interface
*/
interface Person {
	first: string;
	last: string;
}

const myPerson: Person = {
	first: "Fred",
	last: "Blogs",
};

/*
Record definition defines key / value types
*/
const myKeyMap: Record<number, string> = {
	10: "a",
	20: "b",
};
myKeyMap[30] = "c";

/*
Functions
*/
function addNumbers(a: number, b: number): number {
	return a + b;
}

function addStrings(a: string, b: string = ""): string {
	return a + b;
}

// allow multiple types for an argument
function format(title: string, param: string | number): string {
	return `${title} ${param}`;
}

// no return type
function log(msg: string): void {
	console.log(msg);
}

// return interface
function newPerson(firstname: string, lastname: string): Person {
	return {
		first: firstname,
		last: lastname,
	};
}

// rest operator
function introduce(salutation: string, ...names: string[]): string {
	return `${salutation} ${names.join(" ")}`;
}
// objects as arguments (with optional properties)
function getName(user: { first: string; last: string }): string {
	return `${user?.first ?? "no_firstname"} ${user?.last ?? "no_lastname"}`;
}
// function as argument
function mutateA(numbers: number[], operation: (n: number) => number): number[] {
	return numbers.map(operation);
}
mutateA([1, 2, 3], v => v * 10);
// function as argument using a type
type NumberMutator = (n: number) => number;
function mutateB(numbers: number[], operation: NumberMutator): number[] {
	return numbers.map(operation);
}
const myMutateFunction: NumberMutator = v => v * 10;
mutateB([1, 2, 3], myMutateFunction);
// closures
type AdderFunction = (val: number) => number;
function incrementer(n: number): AdderFunction {
	return (val: number) => val + n;
}
const addOne = incrementer(1);
// argument allowed values
function createVehicle(type: "c" | "l"): string {
	if (type === "c") {
		return "CAR";
	}
	return "LORRY";
}

// React stuff
const [isLoading, setIsLoading] = React.useState<boolean>(true);
const [count, setCount] = React.useState<number>(0);