Why type design patterns matter in Typescript - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a type alias for a user object.

Typescript

type User = [1];

Drag options to blanks, or click blank then click option'

Aboolean

B[string, number]

Cstring | number

D{ name: string; age: number }

Attempts:

3 left

💡 Hint

Common Mistakes

Using array or union types instead of object type.

Missing property names or types.

The correct syntax to define a type alias for an object with properties is using curly braces with property names and types.

2fill in blank

medium

Complete the code to create a function type that takes a string and returns a number.

Typescript

type StringToNumber = [1];

Drag options to blanks, or click blank then click option'

A(input: number) => string

B(input: string) => number

C(input: string) => string

D(input: boolean) => number

Attempts:

3 left

💡 Hint

Common Mistakes

Swapping parameter and return types.

Using wrong parameter types.

The function type syntax uses parentheses for parameters and an arrow to the return type. Here, input is a string and the return is a number.

3fill in blank

hard

Fix the error in the interface to make the property optional.

Typescript

interface Product {
  id: number;
  name[1] string;
}

Drag options to blanks, or click blank then click option'

A?

B!

C:

D;

Attempts:

3 left

💡 Hint

Common Mistakes

Using colon or semicolon instead of question mark.

Using exclamation mark which means definite assignment.

Adding a question mark after the property name makes it optional in TypeScript interfaces.

4fill in blank

hard

Complete the code to create a mapped type that makes all properties readonly.

Typescript

type Readonly<T> = {
  [1] P in keyof T:: readonly T[P];
};

Drag options to blanks, or click blank then click option'

Areadonly

Bin

C:

Dextends

Attempts:

3 left

💡 Hint

Common Mistakes

Putting 'readonly' in the blanks instead of before property name.

Using 'extends' instead of 'in'.

In mapped types, 'in' iterates over keys and ':' assigns the type. 'readonly' is placed before the property name, not in the blanks.

5fill in blank

hard

Fill both blanks to define a conditional type that checks if T is a string and returns boolean or number.

Typescript

type IsString<T> = T [1] string [2] boolean : number;

Drag options to blanks, or click blank then click option'

Aextends

B?

C:

Dimplements

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'implements' instead of 'extends'.

Swapping '?' and ':'.

Conditional types use 'extends' to check, '?' for true case, and ':' for false case.

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