Why advanced utility types matter in Typescript - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

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

Typescript

type PartialUser = [1]<User>;

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

APick

BRequired

CReadonly

DPartial

Attempts:

3 left

💡 Hint

Common Mistakes

Using Required instead of Partial, which makes all properties required.

Using Readonly which only makes properties immutable.

The Partial utility type makes all properties of a type optional.

2fill in blank

medium

Complete the code to create a type that picks only the 'name' and 'age' properties.

Typescript

type NameAndAge = [1]<User, 'name' | 'age'>;

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

APartial

BOmit

CPick

DRecord

Attempts:

3 left

💡 Hint

Common Mistakes

Using Omit which excludes properties instead of selecting them.

Using Record which creates a new type from keys and values.

The Pick utility type selects specific properties from a type.

3fill in blank

hard

Fix the error in the code to make all properties readonly.

Typescript

type ReadonlyUser = [1]<User>;

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

AReadonly

BRequired

CPartial

DPick

Attempts:

3 left

💡 Hint

Common Mistakes

Using Partial which makes properties optional but not readonly.

Using Required which makes properties required but not readonly.

The Readonly utility type makes all properties immutable.

4fill in blank

hard

Fill both blanks to create a type that excludes 'password' and makes the rest required.

Typescript

type SafeUser = [1]<User> & [2]<User, 'password'>;

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

AOmit

BPartial

CRequired

DPick

Attempts:

3 left

💡 Hint

Common Mistakes

Using Partial instead of Required, which makes properties optional.

Using Pick instead of Omit, which selects properties instead of excluding.

Omit removes the 'password' property, and Required makes the rest required.

5fill in blank

hard

Fill all three blanks to create a type that maps the keys 'active' and 'admin' to boolean and makes them readonly.

Typescript

type Flags = Readonly<[1]<[2], [3]>>;

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

ARecord

B'active' | 'admin'

Cboolean

DPick

Attempts:

3 left

💡 Hint

Common Mistakes

Confusing the order of utility types.

Using string instead of boolean for the mapped type.

Record creates a type with keys mapped to boolean values, and Readonly makes them immutable.