Challenge 3: Unions

Design a model using union and intersection.

Challenge 3: Unions

In this challenge you will use the union (|) and intersection (&) operators to design color and money models. First you will define colors with a literal union, then a money type with intersection.

Exercise Color and hex function

Define a Color type as "red" | "green" | "blue". Write a function hex(c: Color): string: return "#ff0000" for "red", "#00ff00" for "green", and "#0000ff" for "blue". Print the results of hex("red") and hex("blue").

Show example solution

type Color = "red" | "green" | "blue";

function hex(c: Color): string {
  if (c === "red") {
    return "#ff0000";
  } else if (c === "green") {
    return "#00ff00";
  } else {
    return "#0000ff";
  }
}

console.log(hex("red"));
console.log(hex("blue"));

Exercise Combine Price and Currency

Define a Price interface: amount: number. Define a Currency interface: code: string. Define the Money type as Price & Currency. Create a Money object and print its code field.

Show example solution

interface Price { amount: number; }
interface Currency { code: string; }

type Money = Price & Currency;

const m: Money = { amount: 100, code: "TRY" };
console.log(m.code);

Test yourself

What type does Price & Currency produce?
- Price or Currency
- Price and Currency combined
- Only Price
- Only Currency
Show answer

Price and Currency combined — Intersection (&) combines all fields of both types. The result contains fields from both Price and Currency.

Complete the union operator

type Color = "red" ____ "green" | "blue";

Show answer

type Color = "red" | "green" | "blue";

Union operator parts

|

Union (or)
&

Intersection (and)
"red" | "green" | "blue"

Three color literals
Price & Currency

Price and currency

Next lesson: Challenge 4: Mini app

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies