# TypeScript — Day 3: Type Aliases & Interfaces (Beginner Friendly) Welcome to **Day 3** of your TypeScript journey! Today we’ll cover **Type Aliases** and **Interfaces** in depth — what they are, why they matter, when to use each, real examples, common use-cases, and short quizzes after every section so you can check your understanding. If you want a refresher on previous topics: - [Arrays](/blog/typescript-day-1) & [Tuples](/blog/typescript-day-1) - [Enums](/blog/typescript-day-2) & [Functions](/blog/typescript-day-2) --- ## 🔖 What is a *Type Alias*? A **type alias** lets you give a name to any type expression — a primitive, union, object shape, tuple, [function signature](/blog/typescript-day-2), or a generic. Think of `type` as a nickname you can reuse. ### Why use it? - Avoid repeating long type expressions. - Make code more readable. - Capture unions, [tuples](/blog/typescript-day-1), and complex shapes in one place. ### Simple examples ```ts type ID = number | string; let a: ID = 123; let b: ID = "abc-123"; ``` ```ts type User = { id: ID; name: string; isActive: boolean; }; const u: User = { id: 1, name: "Raj", isActive: true }; ``` 👉 Think of `type` as a **nickname** for a type. --- ### 🧠 Quiz — Type Alias (basic) **Q:** Create a type alias `Score` that can be either a `number` or the string `"N/A"`.

Show Answer

```ts type Score = number | "N/A"; let mathScore: Score = "N/A"; let englishScore: Score = 95; ```

--- ## 🏗️ More advanced `type` examples #### Function type alias ```ts type Mapper = (item: T) => U; const numToStr: Mapper = (n) => n.toString(); ``` #### Generic type alias for API responses ```ts type ApiResponse = { data: T; status: number; error?: string; }; const res: ApiResponse<{ id: number; name: string }> = { data: { id: 1, name: "Sita" }, status: 200 }; ``` #### Discriminated union (very useful pattern) ```ts type Success = { status: "success"; data: T }; type Failure = { status: "error"; error: string }; type Result = Success | Failure; function handleResult(r: Result) { if (r.status === "success") { return r.data; } else { console.error(r.error); } } ``` This pattern helps keep runtime logic safe and explicit; TypeScript narrows types for you when you check the `status` field. --- ### 📝 Quiz — Advanced `type` **Q:** Define a `Paginated` alias `{ items: T[]; total: number }` and show how to type a `fetchProducts` result for `Product = { id:number; title:string }`.

Show Answer

```ts type Paginated = { items: T[]; total: number }; type Product = { id: number; title: string }; const productPage: Paginated = { items: [{ id: 1, title: "Phone" }], total: 1 }; ```

--- ## 🧾 What is an *Interface*? An **interface** describes the shape of an object: what properties it has, their types, and method signatures. Interfaces were designed for objects and have features built specifically for object modeling. ### Simple interface example ```ts interface User { id: number; name: string; isActive: boolean; } const user: User = { id: 1, name: "Meera", isActive: true }; ``` ### Key features of interfaces - **Extensibility**: `interface A extends B { ... }`. - **Declaration merging**: you can declare the same interface name in multiple places and TypeScript merges them. - **Natural fit for objects and classes** (implements keyword). --- ### Optional and Readonly properties ```ts interface Product { id: number; name: string; description?: string; // optional property } interface Config { readonly version: string; } const cfg: Config = { version: "1.0.0" }; // cfg.version = "2.0.0"; // Error: cannot assign to 'version' ``` Optional (`?`) means the property can be omitted. `readonly` prevents reassignment. --- ### Interface with methods ```ts interface Logger { log(message: string): void; error(message: string): void; } const consoleLogger: Logger = { log(msg) { console.log(msg); }, error(msg) { console.error(msg); } }; ``` --- ### Extending interfaces ```ts interface Person { name: string; age: number; } interface Employee extends Person { employeeId: number; } const emp: Employee = { name: "Anil", age: 28, employeeId: 101 }; ``` --- ### 🧠 Quiz — Interface basics **Q:** Create an interface `Car` with `brand` (string), `year` (number), and optional `color` (string). Instantiate `myCar` with brand `"Toyota"` and year `2022`.

Show Answer

```ts interface Car { brand: string; year: number; color?: string; } const myCar: Car = { brand: "Toyota", year: 2022 }; ```

--- ## 🔁 *Type* vs *Interface* — Practical differences & guidance Although both can describe object shapes, they have differences: ### When to prefer `interface` - You want to **extend** or **implement** from classes. - You want **declaration merging** (augmenting libraries). - Many style guides prefer `interface` for object shapes. ### When to prefer `type` - You need **unions** or **tuples** (e.g., `type Status = "ok" | "err"`). - You want alias for advanced constructs. - You need to describe a **function signature** or a **union of object shapes** (discriminated unions). 👉 Need a refresher on [Union Types](/blog/typescript-day-1)? --- ### 📝 Quiz — When to use what? **Q:** Which would you choose for `Status = "idle" | "loading" | "success" | "error"` — `type` or `interface` — and why?

Show Answer

Use `type` because `Status` is a union of string literal types. `interface` cannot represent union types directly. ```ts type Status = "idle" | "loading" | "success" | "error"; ```

--- ## ✅ Real-world use cases & patterns ### 1) React component props Most projects use `interface` for props: ```tsx interface ButtonProps { label: string; onClick: () => void; disabled?: boolean; } function Button({ label, onClick, disabled }: ButtonProps) { return ; } ``` ### 2) API models & discriminated unions Use `type` for responses that can be one of several shapes: ```ts type EmailNotification = { type: "email"; to: string; subject: string }; type SMSNotification = { type: "sms"; to: string; message: string }; type Notification = EmailNotification | SMSNotification; ``` This allows safe `switch` or `if` checks on the `type` property. ### 3) Library augmentation & globals When adding types to global objects or third-party libs, `interface` merging is handy. ### 4) Utility composition Use `type` with built-in utility types (`Partial`, `Readonly`, `Pick`, `Omit`). ```ts type User = { id: number; name: string; email: string }; type UserPatch = Partial; type PublicUser = Omit; ``` --- ### 🧩 Quiz — Practical scenario **Q:** Model notifications so you can `switch` safely on `type`. Provide definitions and a handler example.

Show Answer

```ts type EmailNotification = { type: "email"; to: string; subject: string }; type SMSNotification = { type: "sms"; to: string; message: string }; type Notification = EmailNotification | SMSNotification; function handle(n: Notification) { if (n.type === "email") { console.log("Email subject:", n.subject); } else { console.log("SMS message:", n.message); } } ```

--- ## ✅ Summary & Quick Reference - **type**: flexible alias for unions, [tuples](/blog/typescript-day-1), primitives, objects, [function types](/blog/typescript-day-2). - **interface**: best for object shapes, extensible and mergeable. - Use `?` for optional properties and `readonly` for immutability. - Prefer small, reusable types/interfaces. - Rule of thumb: `interface` for object contracts, `type` for unions and advanced type constructs.