← JS Mastery | Module 10: Advanced Patterns TypeScript: Types, Interfaces & Generics
Module 10

TypeScript: Types, Interfaces & Generics

⏱ 28 min read ● Advanced 🆓 Free

Why TypeScript?

TypeScript adds static types to JavaScript. Errors caught at compile time, not runtime. Better IDE support, refactoring, and self-documenting code.

// Setup:
// npm install -D typescript ts-node @types/node
// npx tsc --init  → creates tsconfig.json

// Basic types:
let name: string = "Alice";
let age: number = 30;
let active: boolean = true;
let id: number | string = "user-123";  // union type

// Arrays:
let nums: number[] = [1, 2, 3];
let names: Array<string> = ["Alice"];

// Type alias:
type Status = "active" | "inactive" | "pending";
let status: Status = "active";

// Function types:
function add(a: number, b: number): number { return a + b; }
const greet = (name: string): string => "Hello, " + name;
async function fetchUser(id: number): Promise<User> { /* ... */ }

Interfaces & Generics

// Interface:
interface User {
  id: number;
  name: string;
  email: string;
  role?: "admin" | "user";  // optional
  readonly createdAt: Date; // read-only
}

// Extending:
interface Admin extends User {
  permissions: string[];
}

// Generic function:
function identity<T>(value: T): T { return value; }
identity<number>(42);  // returns number
identity<string>("hi"); // returns string

// Generic interface:
interface ApiResponse<T> {
  data: T;
  status: number;
  message: string;
}
type UsersResponse = ApiResponse<User[]>;

// Utility types:
type PartialUser = Partial<User>;       // all optional
type RequiredUser = Required<User>;     // all required
type ReadonlyUser = Readonly<User>;     // all readonly
type UserNames = Pick<User, "name" | "email">;  // subset
type NoId = Omit<User, "id">;          // exclude

⚡ Key Takeaways

🎯 Practice Exercises

EXERCISE 1

Add TypeScript to your REST API project. Type all request/response objects with interfaces. Create a generic ApiResponse<T> interface. Fix all type errors.

← Functional JS