Master Complete TypeScript Cheat Sheet.

Want to master TypeScript with full projects, tips, and best practices? Grab the full ebook here: ➡️ https://codewithdhanian.gumroad.com/l/hkztg 1. Basic Types // Primitive types let age: number = 25; let userName: string = "Alice"; let isAdmin: boolean = true; // Arrays let scores: number[] = [90, 80, 70]; let fruits: Array = ["apple", "banana"]; // Tuples (fixed length and types) let user: [string, number] = ["John", 30]; // Object let person: { name: string; age: number } = { name: "Bob", age: 40, }; // Null and Undefined let nothing: null = null; let something: undefined = undefined; // Any (avoid if possible) let randomValue: any = 5; randomValue = "Hello"; // Unknown (safer than any) let input: unknown = "Test"; // input.toUpperCase(); // Error without type check if (typeof input === "string") { input.toUpperCase(); } 2. Functions // Function with type annotations function add(a: number, b: number): number { return a + b; } // Optional parameters function greet(name?: string): void { console.log(`Hello, ${name || "Guest"}`); } // Default parameters function multiply(a: number, b: number = 2): number { return a * b; } 3. Type Aliases and Interfaces // Type alias type UserID = number | string; // Interface interface User { id: UserID; name: string; isAdmin: boolean; } // Extending interfaces interface Admin extends User { role: string; } 4. Advanced Types // Union types let id: number | string = 123; // Intersection types type Employee = { name: string } & { age: number }; // Literal types let direction: "left" | "right" | "center" = "left"; // Enum (constant sets) enum Status { Pending, Active, Completed, } let taskStatus: Status = Status.Active; 5. Classes and Access Modifiers class Animal { public name: string; protected age: number; private isAlive: boolean; constructor(name: string, age: number) { this.name = name; this.age = age; this.isAlive = true; } public greet(): void { console.log(`Hi, I'm ${this.name}`); } } // Inheritance class Dog extends Animal { breed: string; constructor(name: string, age: number, breed: string) { super(name, age); this.breed = breed; } bark(): void { console.log("Woof!"); } } 6. Generics // Generic function function identity(arg: T): T { return arg; } // Generic array let output = identity("Hello"); // Generic interface interface ApiResponse { data: T; status: number; } // Generic class class Box { contents: T; constructor(contents: T) { this.contents = contents; } } 7. Utility Types // Partial (make properties optional) type PartialUser = Partial; // Required (make all properties required) type RequiredUser = Required; // Pick (select specific properties) type PickUser = Pick; // Omit (remove specific properties) type OmitUser = Omit; // Readonly (make properties immutable) type ReadonlyUser = Readonly; 8. Type Guards and Narrowing // Type guard with typeof function padLeft(value: string, padding: string | number) { if (typeof padding === "number") { return Array(padding + 1).join(" ") + value; } if (typeof padding === "string") { return padding + value; } throw new Error("Expected string or number"); } // Type guard with 'in' keyword interface Fish { swim(): void } interface Bird { fly(): void } function move(animal: Fish | Bird) { if ("swim" in animal) { animal.swim(); } else { animal.fly(); } } 9. Mapped, Conditional, and Template Literal Types // Mapped types type OptionsFlags = { [Property in keyof Type]: boolean; }; // Conditional types type IsString = T extends string ? true : false; // Template literal types type EventName = `on${Capitalize}`; 10. Modules, Namespaces, and Configurations // Export and Import (ES Modules) export interface Car { model: string; } import { Car } from "./Car"; // Namespace (old pattern) namespace Utility { export function log(message: string) { console.log(message); } } Utility.log("Test"); // tsconfig.json essentials { "compilerOptions": { "target": "ES6", "module": "commonjs", "strict": true, "esModuleInterop": true, "outDir": "./dist", "rootDir": "./src" } } 11. DOM and Events // Access DOM elements safely const button = document.querySelector('button') as HTMLButtonElement; button.addEventListener('click', (e: MouseEvent) => { console.log(e.clientX, e.clientY); }); 12. TypeScript with React, Node.js, Express // React Props typing interface ButtonProps { text: string; } const Button: React.FC = ({ text }) => { return {text}; }; // Express Request typing import express, { Request, Response } from 'express'; const app = express(); app.get('/', (req: R

Apr 29, 2025 - 06:25

Want to master TypeScript with full projects, tips, and best practices? Grab the full ebook here:

➡️ https://codewithdhanian.gumroad.com/l/hkztg

1. Basic Types

// Primitive types
let age: number = 25;
let userName: string = "Alice";
let isAdmin: boolean = true;

// Arrays
let scores: number[] = [90, 80, 70];
let fruits: Array<string> = ["apple", "banana"];

// Tuples (fixed length and types)
let user: [string, number] = ["John", 30];

// Object
let person: { name: string; age: number } = {
  name: "Bob",
  age: 40,
};

// Null and Undefined
let nothing: null = null;
let something: undefined = undefined;

// Any (avoid if possible)
let randomValue: any = 5;
randomValue = "Hello";

// Unknown (safer than any)
let input: unknown = "Test";
// input.toUpperCase(); // Error without type check
if (typeof input === "string") {
  input.toUpperCase();
}

2. Functions

// Function with type annotations
function add(a: number, b: number): number {
  return a + b;
}

// Optional parameters
function greet(name?: string): void {
  console.log(`Hello, ${name || "Guest"}`);
}

// Default parameters
function multiply(a: number, b: number = 2): number {
  return a * b;
}

3. Type Aliases and Interfaces

// Type alias
type UserID = number | string;

// Interface
interface User {
  id: UserID;
  name: string;
  isAdmin: boolean;
}

// Extending interfaces
interface Admin extends User {
  role: string;
}

4. Advanced Types

// Union types
let id: number | string = 123;

// Intersection types
type Employee = { name: string } & { age: number };

// Literal types
let direction: "left" | "right" | "center" = "left";

// Enum (constant sets)
enum Status {
  Pending,
  Active,
  Completed,
}
let taskStatus: Status = Status.Active;

5. Classes and Access Modifiers

class Animal {
  public name: string;
  protected age: number;
  private isAlive: boolean;

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
    this.isAlive = true;
  }

  public greet(): void {
    console.log(`Hi, I'm ${this.name}`);
  }
}

// Inheritance
class Dog extends Animal {
  breed: string;

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

  bark(): void {
    console.log("Woof!");
  }
}

6. Generics

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

// Generic array
let output = identity<string>("Hello");

// Generic interface
interface ApiResponse<T> {
  data: T;
  status: number;
}

// Generic class
class Box<T> {
  contents: T;
  constructor(contents: T) {
    this.contents = contents;
  }
}

7. Utility Types

// Partial (make properties optional)
type PartialUser = Partial<User>;

// Required (make all properties required)
type RequiredUser = Required<User>;

// Pick (select specific properties)
type PickUser = Pick<User, "id" | "name">;

// Omit (remove specific properties)
type OmitUser = Omit<User, "isAdmin">;

// Readonly (make properties immutable)
type ReadonlyUser = Readonly<User>;

8. Type Guards and Narrowing

// Type guard with typeof
function padLeft(value: string, padding: string | number) {
  if (typeof padding === "number") {
    return Array(padding + 1).join(" ") + value;
  }
  if (typeof padding === "string") {
    return padding + value;
  }
  throw new Error("Expected string or number");
}

// Type guard with 'in' keyword
interface Fish { swim(): void }
interface Bird { fly(): void }

function move(animal: Fish | Bird) {
  if ("swim" in animal) {
    animal.swim();
  } else {
    animal.fly();
  }
}

9. Mapped, Conditional, and Template Literal Types

// Mapped types
type OptionsFlags<Type> = {
  [Property in keyof Type]: boolean;
};

// Conditional types
type IsString<T> = T extends string ? true : false;

// Template literal types
type EventName = `on${Capitalize<string>}`;

10. Modules, Namespaces, and Configurations

// Export and Import (ES Modules)
export interface Car {
  model: string;
}

import { Car } from "./Car";

// Namespace (old pattern)
namespace Utility {
  export function log(message: string) {
    console.log(message);
  }
}
Utility.log("Test");

// tsconfig.json essentials
{
  "compilerOptions": {
    "target": "ES6",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "outDir": "./dist",
    "rootDir": "./src"
  }
}

11. DOM and Events

// Access DOM elements safely
const button = document.querySelector('button') as HTMLButtonElement;

button.addEventListener('click', (e: MouseEvent) => {
  console.log(e.clientX, e.clientY);
});

12. TypeScript with React, Node.js, Express

// React Props typing
interface ButtonProps {
  text: string;
}

const Button: React.FC<ButtonProps> = ({ text }) => {
  return <button>{text}</button>;
};

// Express Request typing
import express, { Request, Response } from 'express';

const app = express();
app.get('/', (req: Request, res: Response) => {
  res.send('Hello with TypeScript');
});

13. Advanced Topics

// Keyof and typeof
type UserKeys = keyof User; // "id" | "name" | "isAdmin"
const uName: UserKeys = "name";

// Infer (conditional inferencing)
type ReturnType<T> = T extends (...args: any[]) => infer R ? R : never;

// Declaration Merging
interface Window {
  myCustomProp: string;
}

// Decorators (experimental)
function Log(target: any, propertyKey: string) {
  console.log(`${propertyKey} was accessed`);
}
class Cat {
  @Log
  name: string = "Whiskers";
}

Final Thoughts

TypeScript is more than a language upgrade — it's a career upgrade.

It will make you a better JavaScript developer, a stronger backend engineer, and an even more reliable React or Node.js developer.

If you want to truly master it, grab the full ebook packed with full projects, in-depth explanations, and real-world examples:

➡️ Click here to get it: https://codewithdhanian.gumroad.com/l/hkztg

You owe it to your future self to master TypeScript. Start today!