TypeScript · module 4 of 21
Objects & Interfaces
An interface defines the shape of an object — which properties it has, their types, and whether they are optional or readonly. Interfaces are reusable and can be extended.
What this module covers
4 steps · TypeScript
Step 1. Objects & Interfaces
An interface defines the shape of an object — which properties it has, their types, and whether they are optional or readonly. Interfaces are reusable and can be extended. interface User { readonly id: number; // cannot change after set name: string; email: string; role?: string; // optional } const alice: User = { id: 1, name: "Alice", email: "alice@example.com" }; Interfaces can extend other interfaces to combine shapes: interface Animal { name: string; speak(): string; } interface Dog extends Animal { breed: string; } Key notes: interfaces only exist at compile time (they produce no JavaScript code), readonly prevents modification, ? marks a property optional, and interfaces can extend other interfaces.
An interface is checked structurally — any object with matching properties satisfies it, whether or not it explicitly says `: Point`. In TypeScript, make the state/interaction visible in the UI so completion is easy to verify.
Check yourself: [TypeScript] Create a variable typed as Point.
Step 2. Quiz: Objects & Interfaces
Answer these questions about interfaces.
interface defines a reusable object shape; readonly and ? modify individual properties. In TypeScript, make the state/interaction visible in the UI so completion is easy to verify.
Check yourself: [TypeScript] Answer the quiz below.
Step 3. Design an Interface
Create an interface called Product with id (readonly number), name (string), price (number), inStock (optional boolean). Then create a variable of type Product.
Interfaces like this one are the everyday building block of typed data in real apps — API responses, form models, and component props are almost always shaped this way. In TypeScript, make the state/interaction visible in the UI so completion is easy to verify.
Check yourself: [TypeScript] Does the Product interface have id, name, price, and inStock with the right modifiers?
Step 4. Mini project: Objects & Interfaces
Create an interface called Product with id (readonly number), name (string), price (number), inStock (optional boolean). Then create a variable of type Product. Turn the completed challenge into a small standalone project. Add realistic content, clear naming, one edge case or error state, and a short README-style explanation of how the main idea works.
Interfaces like this one are the everyday building block of typed data in real apps — API responses, form models, and component props are almost always shaped this way. This project stage asks you to apply the same idea without step-by-step scaffolding. In TypeScript, make the state/interaction visible in the UI so completion is easy to verify.
Check yourself: [TypeScript] Does the Product interface have id, name, price, and inStock with the right modifiers?
Loading code lab...