Summary - Union & intersection

Write a payment model by combining union and intersection.

Union and intersection together

You can build complex models by combining union and intersection. Parentheses set precedence: the union is applied first, then the intersection.

interface Identifiable { id: string; }
interface CashPay { method: "cash"; amount: number; }
interface CardPay { method: "card"; cardNumber: string; }
type Payment = (CashPay | CardPay) & Identifiable;

const p: Payment = { id: "p1", method: "cash", amount: 100 };

Every payment has an identifier and can be either cash or card.

Exercise Build a payment model

Define an Identifiable interface with id: string. Define a CashPay interface with method: "cash" and amount: number. Define a CardPay interface with method: "card" and cardNumber: string. Define the Payment type as (CashPay | CardPay) & Identifiable. The function handlePayment(p: Payment): string should return p.id + ":" + p.method and print the result.

Show example solution

interface Identifiable { id: string; }
interface CashPay { method: "cash"; amount: number; }
interface CardPay { method: "card"; cardNumber: string; }
type Payment = (CashPay | CardPay) & Identifiable;

function handlePayment(p: Payment): string {
  return p.id + ":" + p.method;
}

const payment: Payment = { id: "p1", method: "cash", amount: 100 };
console.log(handlePayment(payment));

Test yourself

Which of the following type X definitions uses both union and intersection?
- type X = A;
- type X = A | B;
- type X = (A | B) & C;
- type X = A & B;
Show answer

type X = (A | B) & C; — Inside the parentheses, A | B is a union; outside, & C is an intersection. This definition uses both concepts together.

Complete the payment model

type Payment = (Cash | Card) ____ Identifiable;

Show answer

type Payment = (Cash | Card) & Identifiable;

Combined model parts

|

Or type operator
&

And type operator
(A | B) & C

Union first, then intersection
"cash" | "card"

A union of two string literals

Next lesson: null vs undefined

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies