🧩 TypeScript Type Composition: Building with LEGO Blocks

Imagine you have a box of LEGO blocks. Each block has a shape and color. Now, what if you could combine blocks in special ways to build amazing things? That’s exactly what Type Composition is in TypeScript!

🎯 The Big Idea

Think of types like ingredients in a kitchen. Sometimes you need just one ingredient (a simple type). But often, you want to mix ingredients together to make something new and delicious!

TypeScript gives you special tools to combine types:

• Mix them together (Union)
• Stack them on top of each other (Intersection)
• Lock them so nobody changes them (readonly/const)

Let’s explore each one!

🔀 Union Types: “This OR That”

What is it?

A union type says: “This can be one thing OR another thing.”

Think of a traffic light. It can be:

• 🔴 Red
• 🟡 Yellow
• 🟢 Green

But it can ONLY be ONE color at a time!

Example

type TrafficLight = "red" | "yellow" | "green";

let light: TrafficLight = "red";    // ✅ OK
light = "green";                     // ✅ OK
light = "purple";                    // ❌ Error!

Real Life Use

type Pet = "cat" | "dog" | "fish";
type Age = number | string;

let myPet: Pet = "cat";       // ✅
let myAge: Age = 10;          // ✅ number works
myAge = "ten years old";      // ✅ string works too!

🎨 Visual Flow

graph TD
    A[Union Type] --> B[Option 1]
    A --> C[Option 2]
    A --> D[Option 3]
    B --> E[Pick ONE!]
    C --> E
    D --> E

Remember: Union = Choose ONE from many options!

➕ Intersection Types: “This AND That”

What is it?

An intersection type says: “This must be everything combined!”

Imagine a superhero who has:

• Flying powers (like Superman)
• Spider powers (like Spider-Man)

With intersection, your hero gets BOTH powers at once!

Example

type CanFly = {
  fly: () => void;
};

type CanSwim = {
  swim: () => void;
};

type SuperHero = CanFly & CanSwim;

const aquaFlyer: SuperHero = {
  fly: () => console.log("Whoosh!"),
  swim: () => console.log("Splash!")
};

🎨 Visual Flow

graph TD
    A[Type A] --> C[Intersection A & B]
    B[Type B] --> C
    C --> D[Has ALL properties!]

Remember: Intersection = Get EVERYTHING from all types!

📝 Literal Types: Exact Values Only

What is it?

A literal type is super strict. It says: “Only THIS exact value is allowed!”

It’s like a password. Not just any word—only the EXACT word works.

Example

type Yes = "yes";
type Five = 5;
type IsTrue = true;

let answer: Yes = "yes";    // ✅ Only "yes" works
answer = "Yes";             // ❌ Error! Capital Y!
answer = "yeah";            // ❌ Error! Not exact!

let count: Five = 5;        // ✅ Only number 5
count = 6;                  // ❌ Error!

Combining Literals

type Direction = "up" | "down" | "left" | "right";
type DiceRoll = 1 | 2 | 3 | 4 | 5 | 6;

let move: Direction = "up";     // ✅
let roll: DiceRoll = 4;         // ✅
roll = 7;                       // ❌ Error!

🔤 Template Literal Types: Smart Text Building

What is it?

Template literals let you build new text types from pieces!

It’s like Mad Libs—you fill in the blanks to create new sentences.

Example

type Color = "red" | "blue" | "green";
type Size = "small" | "large";

type TShirt = `${Size}-${Color}`;
// Creates: "small-red" | "small-blue" |
//          "small-green" | "large-red" |
//          "large-blue" | "large-green"

let myShirt: TShirt = "small-red";   // ✅
myShirt = "medium-red";               // ❌ Error!

🎨 Visual Flow

graph TD
    A[Size: small, large] --> C[Template]
    B[Color: red, blue, green] --> C
    C --> D["small-red"]
    C --> E["small-blue"]
    C --> F["large-red"]
    C --> G["...and more!"]

🔒 readonly vs const: Locking Things Down

What’s the difference?

Think of a museum:

• const = The display case is bolted to the floor (can’t move it)
• readonly = The items INSIDE the case can’t be touched

const Example

const myName = "Alex";
myName = "Bob";  // ❌ Error! Can't change!

const myPets = ["cat", "dog"];
myPets.push("fish");  // ✅ Array content CAN change!
myPets = [];          // ❌ Can't reassign!

readonly Example

type Person = {
  readonly name: string;
  age: number;
};

const me: Person = { name: "Alex", age: 10 };
me.age = 11;      // ✅ age can change
me.name = "Bob";  // ❌ Error! name is readonly!

Quick Comparison

📦 Destructuring with Types

What is it?

Destructuring is like unpacking a gift box. You take things OUT and give them names!

Object Destructuring

type Gift = {
  toy: string;
  color: string;
  price: number;
};

const present: Gift = {
  toy: "robot",
  color: "blue",
  price: 20
};

// Unpack the gift!
const { toy, color }: Gift = present;
console.log(toy);    // "robot"
console.log(color);  // "blue"

Array Destructuring

const scores: [number, number, number] = [95, 87, 92];

const [first, second, third] = scores;
console.log(first);  // 95

With Default Values

type Settings = {
  theme?: string;
  volume?: number;
};

const config: Settings = { theme: "dark" };

const {
  theme = "light",
  volume = 50
}: Settings = config;

console.log(theme);   // "dark" (from config)
console.log(volume);  // 50 (default used!)

🤔 Object vs object vs {}

This is tricky! Let’s make it simple:

The Three Types

Visual Guide

graph TD
    A["{} - Widest"] --> B["object - Middle"]
    B --> C["Specific type - Best!"]
    D["Object - Avoid!"] -.-> A

Examples

// Object (capital O) - TOO broad, avoid!
let a: Object = "hello";     // ✅ string works
let b: Object = 42;          // ✅ number works
let c: Object = {};          // ✅ object works

// object (lowercase) - non-primitives only
let d: object = {};          // ✅ object literal
let e: object = [];          // ✅ array is object
let f: object = "hello";     // ❌ Error! string!

// {} - almost anything except null/undefined
let g: {} = "hello";         // ✅ works
let h: {} = 42;              // ✅ works
let i: {} = null;            // ❌ Error!

🌟 Best Practice

// ❌ Avoid these - too vague
let bad1: Object = {};
let bad2: object = {};
let bad3: {} = {};

// ✅ Use specific types!
type User = {
  name: string;
  age: number;
};

let good: User = { name: "Alex", age: 10 };

🎉 Putting It All Together

Here’s a real example using EVERYTHING we learned:

// Literal types for status
type Status = "active" | "inactive" | "pending";

// Template literal for IDs
type UserId = `user-${number}`;

// Types to combine
type HasName = { readonly name: string };
type HasEmail = { email: string };

// Intersection: combine both!
type User = HasName & HasEmail & {
  id: UserId;
  status: Status;
};

// Create a user
const user: User = {
  id: "user-123",
  name: "Alex",
  email: "alex@example.com",
  status: "active"
};

// Destructure with types
const { name, status }: User = user;

user.name = "Bob";    // ❌ readonly!
user.status = "inactive"; // ✅ OK

🧠 Key Takeaways

1. Union (|) = Pick ONE from options
2. Intersection (&) = Combine ALL properties
3. Literal = Exact value only
4. Template Literal = Build text types from pieces
5. readonly = Lock a property
6. const = Lock the whole variable
7. Destructuring = Unpack with types
8. Use specific types over Object/object/{}

You’re now a Type Composition master! 🏆 These building blocks let you create any type you can imagine!