Satisfies operator in Typescript - Mini Project: Build & Apply

Using the Satisfies Operator in TypeScript

📖 Scenario: You are creating a small app that stores information about fruits and their colors. You want to make sure the data matches a specific shape so your app works correctly.

🎯 Goal: Build a TypeScript object that uses the satisfies operator to ensure the object matches a defined type for fruit colors.

📋 What You'll Learn

Create a type called FruitColors with exact keys and string values

Create an object called fruits with specific fruit-color pairs

Use the satisfies operator to check the object matches the FruitColors type

Print the fruits object to the console

💡 Why This Matters

🌍 Real World

Using the <code>satisfies</code> operator helps catch mistakes early by making sure your data matches the expected shape, which is very useful in apps that handle structured data like user profiles, settings, or product lists.

💼 Career

Many jobs require writing safe and maintainable TypeScript code. Knowing how to use the <code>satisfies</code> operator helps you write code that is easier to understand and less prone to bugs.

1

Create the FruitColors type

Create a TypeScript type called FruitColors with these exact keys and string values: apple, banana, and cherry.

Typescript

// Define the FruitColors type with keys apple, banana, and cherry
// Your code here

Need a hint?

Use type FruitColors = { apple: string; banana: string; cherry: string; } to define the type.

2

Create the fruits object

Create an object called fruits with these exact entries: apple: "red", banana: "yellow", and cherry: "dark red".

Typescript

type FruitColors = {
  apple: string;
  banana: string;
  cherry: string;
};

// Create the fruits object with the specified fruit-color pairs
// Your code here

Need a hint?

Use const fruits = { apple: "red", banana: "yellow", cherry: "dark red" }; to create the object.

3

Use the satisfies operator

Modify the fruits object declaration to use the satisfies operator with the FruitColors type to ensure it matches the type.

Typescript

type FruitColors = {
  apple: string;
  banana: string;
  cherry: string;
};

// Use the satisfies operator to check fruits matches FruitColors
const fruits = {
  apple: "red",
  banana: "yellow",
  cherry: "dark red"
} satisfies FruitColors;

Need a hint?

Add satisfies FruitColors right after the object declaration.

4

Print the fruits object

Write a console.log statement to print the fruits object to the console.

Typescript

type FruitColors = {
  apple: string;
  banana: string;
  cherry: string;
};

const fruits = {
  apple: "red",
  banana: "yellow",
  cherry: "dark red"
} satisfies FruitColors;

// Print the fruits object
// Your code here

Need a hint?

Use console.log(fruits); to display the object.