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.