Master Complete TypeScript Cheat Sheet.

#typescript #webdev #programming #javascript

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!