Interfaces (object shapes)
Interfaces define the shape of an object: which properties exist and their types. Use them for function parameters and return types. Here we write JS that matches an interface idea.
Appy Says…
What does a 'user' look like in your app? What properties does it have? TypeScript interfaces let you define the exact shape of an object once and use it everywhere. Get it wrong and TypeScript tells you instantly.
What are TypeScript Interfaces?
An interface defines the structure (shape) of an object. It lists required and optional properties with their types. Any object that matches the shape satisfies the interface.
- •
interface User { id: number; name: string; email: string; } - •Optional:
bio?: string(may be undefined) - •Readonly:
readonly id: number(can't be changed after creation) - •Extend:
interface Admin extends User { permissions: string[]; } - •Use as a type annotation:
function greet(user: User) { ... } - •Object must have all required properties — missing ones cause a compile error
Think of it like a Roblox datastore schema
A Roblox datastore saving player data expects exactly: level (number), coins (number), joinDate (string). An interface is that schema — define it once, and TypeScript checks every object you put through it.
How It Works
- •1. Define:
interface Product { id: number; title: string; price: number; inStock: boolean; } - •2. Use:
function display(product: Product) { ... } - •3. TS checks: if you call
display({ id: 1 })— error: missing title, price, inStock - •4. Extend:
interface DiscountedProduct extends Product { discount: number; } - •5. Index signatures:
interface Dict { [key: string]: number } - •6. Interfaces vs types:
interfaceis extendable;typesupports unions — both widely used
Real-World Examples
- •
interface Song { id: string; title: string; artist: string; duration: number; } - •React props:
interface CardProps { title: string; onClick: () => void; } - •API response:
interface ApiResponse<T> { data: T; error: string | null; } - •Applaa's lesson:
interface AcademyLesson { id: string; title: string; richContent?: RichSection[]; }
Key Facts
- •Interfaces are open for extension — you can re-declare the same interface in multiple files and TypeScript merges them (declaration merging)
- •Interface vs type alias: both work for object shapes.
interfaceis preferred for public APIs because it's extendable - •TypeScript uses structural typing — objects just need to match the shape, they don't need to explicitly implement the interface
Watch Out!
TypeScript's structural typing can surprise you: any object with the right properties satisfies an interface, even if it has extra ones. This is usually a feature, not a bug — but be aware that { id: 1, name: 'x', extra: 'y' } does satisfy interface { id: number; name: string; }.
Remember
Define interfaces for all your data shapes. Use ? for optional properties. Extend with extends. This is the most important TypeScript skill for building React apps.
What You Learned
- •Interfaces define object shapes: required props, optional (?) props, readonly props
- •Extend interfaces with extends; use them as type annotations everywhere
- •Unlocks: typed API responses, typed React props, typed data models, safe refactoring
Key Facts
- →Interfaces are open for extension — you can re-declare the same interface in multiple files and TypeScript merges them (declaration merging)
- →Interface vs type alias: both work for object shapes.
interfaceis preferred for public APIs because it's extendable - →TypeScript uses structural typing — objects just need to match the shape, they don't need to explicitly implement the interface
Real-World Examples
Remember
Define interfaces for all your data shapes. Use ? for optional properties. Extend with extends. This is the most important TypeScript skill for building React apps.
Quick Quiz
What does an interface describe?