Advanced: TypeScriptAdvanced⏱ 7 min22 / 23

TypeScript: Interfaces & Types

Describe the shape of objects with interfaces and type aliases — optional fields, unions, and why structural typing is so flexible.

Beyond primitives, you'll want to describe the shape of objects. TypeScript offers interface and type for exactly that — a contract the compiler enforces everywhere the object is used.

an interface
interface User {
  name: string;
  age: number;
  admin?: boolean;   // optional (the ? )
}

function greet(u: User): string {
  return `Hi ${u.name} (${u.age})`;
}

console.log(greet({ name: "Ada", age: 36 }));
// greet({ name: "Bea" })  // ❌ missing 'age'

The ? marks an optional property. Pass an object missing a required field and TS errors. Note structural typing: any object with the right shape is a User — you don't have to explicitly declare that it implements the interface.

#Type aliases & unions

type alias + union types
type ID = string | number;      // union: either type is allowed
type Status = "todo" | "doing" | "done";  // literal union

function setStatus(s: Status) {
  console.log("status:", s);
}

setStatus("done");   // ✅
// setStatus("nope") // ❌ not one of the allowed literals
let userId: ID = 42;
console.log(userId);
Tip

interface vs type

Both describe shapes. Rule of thumb: use interface for object shapes you might extend or implement; use type for unions, primitives, and combinations (A | B, A & B). In practice they overlap a lot — pick one and stay consistent.

Quick check

What does the `?` in `admin?: boolean` mean?

Key takeaways

  • `interface` and `type` describe the shape of objects.
  • `?` marks an optional property.
  • TypeScript is structurally typed: any object with the right shape matches.
  • Union types (`string | number`, or literal unions like `"todo" | "done"`) allow a value to be one of several options.
Practice challenges
Test yourself · earn XP
0/3
Fix the bug#1

This object is rejected by TypeScript. Why?

fix-bug
interface User { name: string; age: number; }
const u: User = { name: 'Ada' };
Predict the output#2

Which values are allowed for `s: Status`?

predict-output
type Status = 'todo' | 'doing' | 'done';
let s: Status;
Fill in the blank#3

Mark `nickname` as an optional property.

interface Person {
  name: string;
  nickname: string;
}
Your turn
Practice exercise

Define an interface Product with name: string, price: number, and an optional onSale: boolean. Then write a function label(p: Product) that returns the name.

Try it live — edit the code and hit Run to see the output:

solution.js · editable