Week 3 - TypeScript

Type System

Interfaces vs Types

Generics

Type inference

Type Unions and Intersections

Function Types and Return Types

Utility Types

Type-Safe API Responses

Type Guards

HTML Element Types

Tooling

Practice

Assignment

Front end Track

Type Unions and Intersections

You've already seen unions. This section goes deeper and introduces intersections.

Unions: "One of These"

A union type (A | B) means the value is either A or B. This models choices and optional presence:

type Status = 'loading' | 'success' | 'error';

function showMessage(status: Status) {
  switch (status) {
    case 'loading':
      return 'Please wait...';
    case 'success':
      return 'Done!';
    case 'error':
      return 'Something went wrong.';
  }
}

Status is a union of three string literals. The status parameter only accepts one of those three exact strings — passing 'pending' or any other string would be an error. The switch statement handles each possibility.

String literal unions become even more powerful when used with objects. A discriminated union is a union of object types where each variant has a common field with a different literal value:

type RequestState =
  | { status: 'loading' }
  | { status: 'success'; data: string[] }
  | { status: 'error'; message: string };

This defines three possible shapes. The status field is the discriminant — its literal value tells TypeScript which variant you're dealing with. When status is 'success', TypeScript knows a data property exists. When status is 'error', it knows message exists. You'll see this pattern often for modelling states that carry different data.

Intersections: "All of These"

An intersection type (A & B) means the value has all properties from both types. The & operator combines them:

type HasName = { name: string };
type HasEmail = { email: string };

type Contact = HasName & HasEmail;
// Contact = { name: string; email: string }

A Contact must have both name and email — it satisfies both HasName and HasEmail at the same time.

Intersections are useful for composing types from smaller, reusable pieces:

type Timestamped = { createdAt: Date; updatedAt: Date };
type SoftDeletable = { deletedAt: Date | null };

type DatabaseRecord = Timestamped & SoftDeletable;

A DatabaseRecord has all three properties: createdAt, updatedAt, and deletedAt. You defined each concern separately and combined them with &.

Unions vs Intersections

<aside> ⌨️

Hands on: Model a traffic light with a string literal union. Write a function that returns a message for each state. Then use an intersection to combine two small types.

</aside>

• Show code

The HackYourFuture curriculum is licensed under CC BY-NC-SA 4.0

*https://hackyourfuture.net/*

Found a mistake or have a suggestion? Let us know in the feedback form.