Interfaces & Objects

Defining the shape of objects with interfaces and type aliases

Written by Andrew Lee Jenkins14 min read1 activity

Buzz presents

interfaces tell TypeScript what shape youre objects should have, so nothing goes missing. its like a little checklist, yay!interfaces tell TypeScript what shape youre objects should have, so nothing goes missing. its like a little checklist, yay!

Buzz ticks off a clipboard checklist against pizza dough, a sauce jar and a toppings bowl on a counter — An interface is a checklist for the shape of an object

Ordering a pizza online is basically a lesson in interfaces. The order form wants a size, a crust type and your toppings. Skip a required field and it won't submit. Try to add a field called "favorite color" and... nope, that doesn't belong on a pizza order (no matter how strongly you feel about it).

Interfaces in TypeScript work the exact same way. They spell out the shape an object has to have, meaning which properties it needs, what type each one is, and which ones are optional.

Your First Interface#

An interface describes which properties an object should have.

interface User {
  name: string;
  email: string;
  age: number;
}
 
// This object matches the interface perfectly
const alice: User = {
  name: "Alice",
  email: "[email protected]",
  age: 28
};
 
// This would cause an error - missing 'age' property
const bob: User = {
  name: "Bob",
  email: "[email protected]"
}; // Error! Property 'age' is missing

Now TypeScript makes sure every object labeled User has the right properties with the right types. Miss one and you'll hear about it.

Optional Properties#

Not every property has to be there every time. Stick a question mark on a property to make it optional.

interface BlogPost {
  title: string;
  content: string;
  author: string;
  publishedDate?: string;  // Optional - might be a draft
  tags?: string[];          // Optional - not all posts have tags
  coverImage?: string;      // Optional - not all posts have images
}
 
// Valid - optional properties can be omitted
const draft: BlogPost = {
  title: "My First Post",
  content: "Hello world!",
  author: "Alice"
};
 
// Also valid - optional properties included
const published: BlogPost = {
  title: "TypeScript Guide",
  content: "Let's learn types...",
  author: "Bob",
  publishedDate: "2025-01-15",
  tags: ["typescript", "tutorial"]
};

Readonly Properties#

Sometimes you want a property locked once the object is created, so nobody can change it later.

interface Config {
  readonly apiKey: string;
  readonly baseUrl: string;
  timeout: number;  // This one can be changed
}
 
const config: Config = {
  apiKey: "abc123",
  baseUrl: "https://api.example.com",
  timeout: 5000
};
 
config.timeout = 10000;  // OK - not readonly
config.apiKey = "xyz";   // Error! Cannot assign to 'apiKey' because it is read-only

Nested Objects#

Interfaces can describe objects that live inside other objects too.

interface Address {
  street: string;
  city: string;
  state: string;
  zipCode: string;
}
 
interface Customer {
  name: string;
  email: string;
  address: Address;        // Nested object
  orders: Order[];         // Array of objects
}
 
interface Order {
  id: number;
  total: number;
  items: string[];
}
 
const customer: Customer = {
  name: "Alice",
  email: "[email protected]",
  address: {
    street: "123 Main St",
    city: "Portland",
    state: "OR",
    zipCode: "97201"
  },
  orders: [
    { id: 1, total: 29.99, items: ["T-Shirt"] },
    { id: 2, total: 59.98, items: ["Hoodie", "Cap"] }
  ]
};

Extending Interfaces#

Buzz holds two cards with green seals, one fully ticked and one with dotted boxes left empty — Optional properties can be left out and the object still fits

You can build new interfaces on top of ones you already have.

interface Animal {
  name: string;
  age: number;
}
 
interface Dog extends Animal {
  breed: string;
  isGoodBoy: boolean;
}
 
// Dog has all Animal properties plus its own
const rex: Dog = {
  name: "Rex",
  age: 3,
  breed: "Golden Retriever",
  isGoodBoy: true
};

Think of it like inheritance. A Dog is just an Animal with some extra stuff bolted on.

Interface vs Type Alias#

TypeScript gives you two ways to describe an object shape, interface and type. They're REALLY similar, with a few differences.

// Interface - can be extended and merged
interface UserInterface {
  name: string;
  email: string;
}
 
// Type alias - more flexible, can represent unions
type UserType = {
  name: string;
  email: string;
};
 
// Both work the same for simple objects
const user1: UserInterface = { name: "Alice", email: "[email protected]" };
const user2: UserType = { name: "Bob", email: "[email protected]" };

So which one do you use?

Use interface for object shapes, especially in libraries or anywhere you want room to extend later
Use type when you need unions, intersections, or mapped types (we'll get there)
Honestly, for most cases either one works fine. Pick a style and stay consistent

Real-World Example: API Response#

Here's what typing a real API response might look like.

interface ApiResponse<T> {
  data: T;
  status: number;
  message: string;
  timestamp: string;
}
 
interface Product {
  id: number;
  name: string;
  price: number;
  inStock: boolean;
  category: string;
}
 
// The response contains a Product
const response: ApiResponse<Product> = {
  data: {
    id: 1,
    name: "TypeScript Handbook",
    price: 29.99,
    inStock: true,
    category: "Books"
  },
  status: 200,
  message: "Success",
  timestamp: "2025-01-15T10:30:00Z"
};

TL;DR#

Interfaces describe the shape of an object, meaning which properties it needs and what types they are
Put ? after a property name to make it optional
Use readonly to stop a property from changing after the object is created
Interfaces can be nested, and they can extend other interfaces
Both interface and type work for object shapes, and interface is the pick when you want to extend
Real apps use interfaces to type API responses, form data and component props

What's Next?#

So you can describe objects now. Next we'll get more precise about typing functions... typed parameters, return types, and a thing called generics that sounds scary and REALLY isn't.

This lesson ends with a short activity.