Why type design patterns matter in Typescript - See It in Action

Why type design patterns matter

📖 Scenario: Imagine you are building a simple app that manages a list of users. Each user has a name and an age. You want to make sure your program handles user data correctly and safely.

🎯 Goal: Learn why using type design patterns in TypeScript helps keep your code safe and easy to understand by creating and using types for user data.

📋 What You'll Learn

Create a type for a user with name and age

Create a list of users using the user type

Write a function that takes a user and returns a greeting string

Print a greeting for each user

💡 Why This Matters

🌍 Real World

Type design patterns help developers build apps that handle data safely, avoiding bugs caused by wrong data types.

💼 Career

Understanding and using types is essential for TypeScript developers to write reliable and maintainable code in professional projects.

1

Create a User type

Create a type called User with two properties: name of type string and age of type number.

Typescript

// Your code here

Hint

Use the type keyword to define a new type with properties and their types.

2

Create a list of users

Create a variable called users that is an array of User type. Add these exact users: { name: "Alice", age: 30 } and { name: "Bob", age: 25 }.

Typescript

type User = {
  name: string;
  age: number;
};

// Your code here

Hint

Use User[] to declare an array of users and add the exact objects inside square brackets.

3

Write a greeting function

Write a function called greetUser that takes one parameter user of type User and returns a string greeting like `Hello, ${user.name}! You are ${user.age} years old.`.

Typescript

type User = {
  name: string;
  age: number;
};

const users: User[] = [
  { name: "Alice", age: 30 },
  { name: "Bob", age: 25 }
];

// Your code here

Hint

Use a function with typed parameter and return a template string with user properties.

4

Print greetings for all users

Use a for loop with user to go through users and print the result of greetUser(user) for each user.

Typescript

type User = {
  name: string;
  age: number;
};

const users: User[] = [
  { name: "Alice", age: 30 },
  { name: "Bob", age: 25 }
];

function greetUser(user: User): string {
  return `Hello, ${user.name}! You are ${user.age} years old.`;
}

// Your code here

Hint

Use a for...of loop and console.log to print each greeting.

Practice

1. Why are type design patterns important in TypeScript?
interface User { name: string; age: number; }

easy

A. They help organize data shapes clearly and catch errors early.

B. They make the code run faster at runtime.

C. They allow you to write code without any rules.

D. They automatically fix bugs in your code.

Solution

1. Step 1: Understand the role of type design patterns

   Type design patterns define how data is structured, making it clear what shape data should have.

2. Step 2: Recognize benefits in TypeScript

   They help catch mistakes early by checking types before running the code, improving code quality and readability.

3. Final Answer:

   They help organize data shapes clearly and catch errors early. -> Option A

4. Quick Check:

   Type design patterns = Organize + Catch errors [OK]

Hint: Think: patterns = clear data + early error catch [OK]

Common Mistakes:

• Confusing type patterns with runtime speed
• Believing types fix bugs automatically
• Ignoring the role of type safety

2. Which of the following is the correct syntax to define a type alias for a user object with a name and age in TypeScript?

easy

A. type User = name: string, age: number;

B. type User = (name: string, age: number);

C. type User = { name: string; age: number; };

D. type User = [name: string, age: number];

Solution

1. Step 1: Recall type alias syntax

   Type aliases use the syntax: type Name = { ... } to define object shapes.

2. Step 2: Check each option

   type User = { name: string; age: number; }; correctly uses curly braces and property types. Others use invalid syntax for object types.

3. Final Answer:

   type User = { name: string; age: number; }; -> Option C

4. Quick Check:

   Type alias object = curly braces [OK]

Hint: Use curly braces for object types in type aliases [OK]

Common Mistakes:

• Using parentheses instead of braces
• Missing braces around properties
• Using array syntax for objects

3. What will be the output of this TypeScript code?

type Point = { x: number; y: number };
const p: Point = { x: 5, y: 10 };
console.log(p.x + p.y);

medium

A. 510

B. Error: Type mismatch

C. NaN

D. 15

Solution

1. Step 1: Understand the Point type and object

   The object p has properties x = 5 and y = 10, both numbers.

2. Step 2: Calculate the sum of p.x and p.y

   Adding 5 + 10 results in 15, which is logged to the console.

3. Final Answer:

   15 -> Option D

4. Quick Check:

   5 + 10 = 15 [OK]

Hint: Add numeric properties directly for sum [OK]

Common Mistakes:

• Concatenating numbers as strings
• Expecting a type error at runtime
• Confusing object with array

4. Identify the error in this TypeScript code and fix it:

type Product = { id: number; name: string };
const product: Product = { id: 1, name: 100 };

medium

A. Change name to a string value, e.g., 'Book'.

B. Change id to a string value, e.g., '1'.

C. Remove the type annotation from product.

D. Add a new property price: number.

Solution

1. Step 1: Check the type of each property

   The name property expects a string, but 100 is a number, causing a type error.

2. Step 2: Fix the type mismatch

   Assign a string value to name, for example, 'Book', to match the type definition.

3. Final Answer:

   Change name to a string value, e.g., 'Book'. -> Option A

4. Quick Check:

   Property types must match definition [OK]

Hint: Match property types exactly as defined [OK]

Common Mistakes:

• Assigning wrong types to properties
• Removing type annotations unnecessarily
• Adding unrelated properties without fixing errors

5. You want to design a type pattern for a list of users where each user has a name and an optional email. Which type design pattern is best to ensure clarity and maintainability?

hard

A. Use a union type: type User = { name: string } | { email: string }

B. Use an interface with optional email property: interface User { name: string; email?: string; }

C. Use a type alias with email as a required string: type User = { name: string; email: string; }

D. Use any type: type User = any;

Solution

1. Step 1: Understand the requirement for optional email

   The email property should be optional, meaning it may or may not exist on a user object.

2. Step 2: Choose the pattern that supports optional properties clearly

   Using an interface with email?: string marks email as optional and keeps the type clear and maintainable.

3. Final Answer:

   Use an interface with optional email property: interface User { name: string; email?: string; } -> Option B

4. Quick Check:

   Optional property syntax = ? [OK]

Hint: Use ? to mark optional properties in interfaces [OK]

Common Mistakes:

• Making optional properties required
• Using union types incorrectly for optional fields
• Using any type which loses type safety