Why patterns matter for safety in Typescript

Introduction

Patterns help us write code that is safe and less likely to cause errors. They guide us to avoid mistakes and keep our programs working well.

When you want to avoid bugs that can crash your app.

When you need to make sure your code handles unexpected inputs safely.

When working with others to keep code easy to understand and maintain.

When building features that must not fail, like payment or login systems.

When you want to prevent security problems caused by careless coding.

Syntax

Typescript

// No specific syntax, but here is an example of a safe pattern in TypeScript
function safeDivide(a: number, b: number): number | null {
  if (b === 0) {
    return null; // avoid division by zero
  }
  return a / b;
}

Patterns are ways of writing code, not special commands.

Using patterns means checking for problems before they happen.

Examples

This pattern checks for zero before dividing to avoid errors.

Typescript

function safeDivide(a: number, b: number): number | null {
  if (b === 0) {
    return null;
  }
  return a / b;
}

This pattern safely handles optional data to avoid crashes.

Typescript

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

function greet(user: User) {
  if (user.age !== undefined) {
    console.log(`Hello ${user.name}, age ${user.age}`);
  } else {
    console.log(`Hello ${user.name}`);
  }
}

Sample Program

This program uses a safe pattern to avoid dividing by zero, which would cause an error.

Typescript

function safeDivide(a: number, b: number): number | null {
  if (b === 0) {
    return null;
  }
  return a / b;
}

const result1 = safeDivide(10, 2);
const result2 = safeDivide(10, 0);

console.log(`10 / 2 = ${result1}`);
console.log(`10 / 0 = ${result2 === null ? 'Error: division by zero' : result2}`);

Important Notes

Always think about what can go wrong and handle it before it happens.

Patterns make your code easier to read and fix later.

Using TypeScript's types helps catch mistakes early.

Summary

Patterns help prevent errors and keep code safe.

They guide you to check for problems before they cause bugs.

Safe patterns make your programs more reliable and easier to maintain.

Practice

1. Why is it important to use patterns in TypeScript for safety?

easy

A. They allow skipping type checks

B. They make the code run faster

C. They reduce the file size of the program

D. They help catch errors before running the code

Solution

1. Step 1: Understand the role of patterns in TypeScript

   Patterns guide how to write code that avoids common mistakes and bugs.

2. Step 2: Identify the benefit of safety patterns

   They help detect errors early, before the program runs, improving reliability.

3. Final Answer:

   They help catch errors before running the code -> Option D

4. Quick Check:

   Patterns catch errors early = A [OK]

Hint: Patterns catch bugs early, before runtime [OK]

Common Mistakes:

• Thinking patterns only improve speed
• Believing patterns reduce file size
• Assuming patterns skip type checks

2. Which of the following is the correct TypeScript syntax to safely check if a variable value is a string before using it?

easy

A. if (typeof value === 'string') { /* use value */ }

B. if (value.type === 'string') { /* use value */ }

C. if (value instanceof 'string') { /* use value */ }

D. if (value === string) { /* use value */ }

Solution

1. Step 1: Recall correct type checking syntax in TypeScript

   Use typeof variable === 'string' to check if a variable is a string.

2. Step 2: Evaluate each option

   Only if (typeof value === 'string') { /* use value */ } uses the correct typeof operator and string comparison.

3. Final Answer:

   if (typeof value === 'string') { /* use value */ } -> Option A

4. Quick Check:

   Use typeof for type checks = D [OK]

Hint: Use typeof to check primitive types safely [OK]

Common Mistakes:

• Using .type property which doesn't exist
• Using instanceof with string literal
• Comparing variable directly to string keyword

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

function safeDivide(a: number, b: number): number | null {
  if (b === 0) return null;
  return a / b;
}

console.log(safeDivide(10, 2));
console.log(safeDivide(10, 0));

medium

A. 5 and null

B. 5 and Infinity

C. 5 and 0

D. Error at runtime

Solution

1. Step 1: Analyze the function safeDivide

   If divisor b is zero, function returns null, else returns division result.

2. Step 2: Evaluate console.log outputs

   First call: 10 / 2 = 5; second call: divisor is 0, returns null.

3. Final Answer:

   5 and null -> Option A

4. Quick Check:

   Division by zero returns null = C [OK]

Hint: Check for zero divisor to avoid runtime errors [OK]

Common Mistakes:

• Expecting division by zero to return 0
• Assuming runtime error instead of null
• Confusing null with Infinity

4. Identify the error in this TypeScript code that tries to safely access a property:

interface User {
  name: string;
  age?: number;
}

function getUserAge(user: User): number {
  return user.age;
}

medium

A. Incorrect interface declaration syntax

B. Missing check for optional property before returning

C. Function should return string instead of number

D. No error, code is correct

Solution

1. Step 1: Understand optional property in interface

   Property age is optional, so it may be undefined.

2. Step 2: Check function return type vs possible undefined

   Function returns number but user.age can be undefined, causing a type error.

3. Final Answer:

   Missing check for optional property before returning -> Option B

4. Quick Check:

   Optional properties need checks = A [OK]

Hint: Check optional properties before use to avoid errors [OK]

Common Mistakes:

• Ignoring optional property may be undefined
• Thinking interface syntax is wrong
• Confusing return type with property type

5. You want to create a safe pattern to transform an array of mixed values into an object mapping only string keys to their lengths. Which TypeScript pattern ensures safety and correctness?

const items = ["apple", 42, "banana", null, "cherry"];

// Which pattern is safest to create { [key: string]: number } mapping?

hard

A. Map all items to their length without checks

B. Use a for loop without type checks

C. Use a filter to keep only strings, then map to lengths

D. Assign items directly to object keys

Solution

1. Step 1: Identify the need to filter only strings

   Since array has mixed types, filter out non-string values to avoid errors.

2. Step 2: Map filtered strings to their lengths safely

   After filtering, create object entries mapping strings to their length, ensuring type safety.

3. Final Answer:

   Use a filter to keep only strings, then map to lengths -> Option C

4. Quick Check:

   Filter then map for safe transformation = B [OK]

Hint: Filter first, then map to avoid unsafe types [OK]

Common Mistakes:

• Mapping without filtering causes runtime errors
• Using loops without type checks
• Assigning mixed types directly to object keys