Learning TypeScript From Scratch(4)

Unions and Intersection Types

---

Union Types

• use |
• union type limits the members we can access into the common fields of the two types
• a usual way to use union type is to set a common field, do different stuff and access different other fields by checking the common field(maybe using switch)

// Usage
function func(param: string | number) { ... }

// Common fields
interface Bird {
  fly(): void;
  layEggs(): void;
}

interface Fish {
  swim(): void;
  layEggs(): void;
}

declare function getSmallPet(): Fish | Bird;
let pet = getSmallPet();

pet.layEggs(); // OK
pet.swim();    // Error

// A uaual usage
type NetworkLoadingState = {
  state: "loading";
};

type NetworkFailedState = {
  state: "failed";
  code: number;
};

type NetworkSuccessState = {
  state: "success";
  response: {
    title: string;
    duration: number;
    summary: string;
  };
};

type NetworkState =
  | NetworkLoadingState
  | NetworkFailedState
  | NetworkSuccessState;

function logger(state: NetworkState): string {
  switch (state.state) {
    case "loading": 
      return "Downloading...";
    case "failed": 
      return `Error ${state.code} downloading`;
    case "success":
      return `Downloaded ${state.response.title} - ${state.response.summary}`;
  }
}

Intersection Types

• use &
• intersection type allows to access all members of listed types

interface ErrorHandling {
  success: boolean;
  error ?: { message: string };
}

interface Data {
  stuffs: { title: string }[];
}

type Response = Data & ErrorHandling;
const respHandler = (resp: Response) => {
  if (resp.error) {
    console.error(resp.error.message);
    return;
  }
  console.log(resp.stuffs);
}