TypeScript Cheat Sheet

TypeScript is a strongly typed, object-oriented, compiled programming language developed and maintained by Microsoft. It is a superset of JavaScript, adding static types and other powerful features to improve development efficiency and code quality. TypeScript is widely used in web development, especially in large-scale applications.

TypeScript Features

Here are some of the main features of TypeScript:

• Static Typing – Enables type checking at compile time.
• Object-Oriented – Supports classes, interfaces, and inheritance.
• Robust & Secure – Helps catch errors early with strict type checks.
• Platform-Independent – Runs on any platform that supports JavaScript.
• Portable – Works across different browsers and OS environments.
• Multithreaded (Asynchronous Support) – Uses async/await and Promises.
• Interoperable – Compatible with JavaScript and its libraries

Here’s a complete TypeScript cheat sheet that covers everything from installation to advanced topics, and examples.

1. Installation

To use TypeScript, you need to install it globally or locally in your project.

Global Installation

npm install -g typescript

Local Installation

npm install typescript --save-dev

Check Version

tsc --version

Compile TypeScript to JavaScript

tsc filename.ts

For more details, you can explore this article: How to Install TypeScript.

2. Basic Variables

TypeScript provides basic types to define variables with specific data types.

let isDone: boolean = false; // Boolean
let count: number = 42; // Number
let name: string = "TypeScript"; // String
let list: number[] = [1, 2, 3]; // Array of numbers
let tuple: [string, number] = ["hello", 10]; // Tuple (fixed-type array)
let notSure: any = 4; // Any (dynamic type, avoid using)
let nothing: void = undefined; // Void (no type, used for functions)
let u: undefined = undefined; // Undefined
let n: null = null; // Null

3. Basic Data Types

4. Advanced Data Types

TypeScript supports advanced types for more complex scenarios.

Union Types

Union Types allows a variable to hold multiple types.

let value: string | number = "hello";
value = 42;

Intersection Types

Combines multiple types into one.

type A = { a: number };
type B = { b: string };
type C = A & B; // { a: number, b: string }

Literal Types

Restricts a variable to a set of specific values.

let direction: "left" | "right" | "up" | "down" = "left";

Type Aliases

Type aliases in TypeScript allow you to create a new name for an existing type

type StringOrNumber = string | number;
let id: StringOrNumber = "123";

5. Functions

Functions in TypeScript can have typed parameters and return values.

Typed Function

Typed functions in TypeScript allow you to define the types of parameters a function accepts and the type of value it returns.

function add(x: number, y: number): number {
  return x + y;
}

Optional and Default Parameters

Optional parameters (using ?) allow omitting the argument in function calls, resulting in undefined within the function. Default parameters (using = value) provide a fallback if the argument is not provided.

function greet(name: string, greeting: string = "Hello"): string {
  return `${greeting}, ${name}`;
}

Arrow Functions

Arrow functions provide a more concise syntax for defining functions compared to traditional function expressions.

// Concise arrow function (implicit return)
const add = (a: number, b: number) => a + b;

// Arrow function with explicit return and block body
const greet = (name: string) => { return `Hello, ${name}!`; };

6. Interfaces

Interfaces in TypeScript define a contract or shape for data. They specify the properties (and sometimes methods) that an object should have.

interface Person {
  name: string;
  age: number;
  greet(): void;
}

const person: Person = {
  name: "Alice",
  age: 30,
  greet() {
    console.log(`Hello, my name is ${this.name}`);
  },
};

7. Classes

Classes in TypeScript provide a blueprint for creating objects. They encapsulate data (properties) and behavior (methods) into a single unit.

class Animal {
  name: string;

  constructor(name: string) {
    this.name = name;
  }

  speak(): void {
    console.log(`${this.name} makes a noise.`);
  }
}

class Dog extends Animal {
  breed: string;

  constructor(name: string, breed: string) {
    super(name);
    this.breed = breed;
  }

  speak(): void {
    console.log(`${this.name} barks.`);
  }
}

const dog = new Dog("Rex", "Labrador");
dog.speak();

8. Generics

Generics in TypeScript allow you to write reusable components that can work with a variety of types without sacrificing type safety.

function identity<T>(arg: T): T {
  return arg;
}

let output = identity<string>("hello");

class Box<T> {
  value: T;

  constructor(value: T) {
    this.value = value;
  }
}

const box = new Box<number>(42);

9. Utility Types

Utility types in TypeScript provide a set of pre-defined type transformations that perform common operations on types.

Partial<T>

Partial<T> is a utility type that takes a type T and constructs a new type where all properties of T are optional.

interface User {
  name: string;
  age: number;
}
const partialUser: Partial<User> = { name: "GeeksforGeeks" };

Readonly<T>

Readonly<T> is a utility type that takes a type T and creates a new type where all properties of T are read-only.

const readonlyUser: Readonly<User> = { name: "Geeks", age: 30 };

Record<K, T>

Record<K, T> is a utility type that constructs an object type whose property keys are K and whose property values are T. K can be a string, number, or symbol literal, and T can be any type.

const userMap: Record<string, User> = {
  "1": { name: "Geeks", age: 30 },
};

Pick<T, K>

Pick<T, K> constructs a new type by picking a set of properties K (which is a union of string literals) from type T

type UserName = Pick<User, "name">;

10. Type Assertions

Type assertions in TypeScript allow you to override the compiler's type inference and explicitly tell it what type a value is.

let someValue: any = "this is a string";
let strLength: number = (someValue as string).length;

11. Modules

Modules in TypeScript allow you to organize your code into separate files, improving code maintainability and reusability.

Exporting

export class MyClass { /* ... */ }
export const myFunction = () => { /* ... */ };

Importing

import { MyClass, myFunction } from "./myModule";

12. Advanced Concepts In Typescript

Conditional Types

type NonNullable<T> = T extends null | undefined ? never : T;

Mapped Types

type Readonly<T> = {
  readonly [P in keyof T]: T[P];
};

Template Literal Types

type EventName = `on${Capitalize<string>}`;