Combining utility types in Typescript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to make all properties of the type optional using a utility type.

Typescript

type PartialUser = [1]<User>;

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

APartial

BRequired

CReadonly

DPick

Attempts:

3 left

💡 Hint

Common Mistakes

Using Required instead of Partial.

Using Readonly which makes properties readonly, not optional.

The Partial utility type makes all properties optional.

2fill in blank

medium

Complete the code to create a type with only the 'id' and 'name' properties from User.

Typescript

type UserIdName = [1]<User, 'id' | 'name'>;

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

ARecord

BOmit

CPartial

DPick

Attempts:

3 left

💡 Hint

Common Mistakes

Using Omit which excludes properties instead of selecting.

Using Partial which makes properties optional but does not select.

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'

ARequired

BPartial

CReadonly

DPick

Attempts:

3 left

💡 Hint

Common Mistakes

Using Partial which makes properties optional, not readonly.

Using Required which makes properties required, not readonly.

The Readonly utility type makes all properties readonly.

4fill in blank

hard

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

Typescript

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

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

AReadonly

BPartial

COmit

DPick

Attempts:

3 left

💡 Hint

Common Mistakes

Reversing the order of utility types.

Using Pick instead of Omit.

First, Omit removes the 'password' property, then Readonly makes the rest readonly.

5fill in blank

hard

Fill all three blanks to create a type that excludes 'password', makes the remaining properties optional, and makes them readonly.

Typescript

type CustomUser = [1]<[2]<[3]<User, 'password'>>>;

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

AReadonly

BPartial

COmit

DPick

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up the order of utility types.

Using Pick instead of Omit.

First, Omit removes 'password', then Partial makes the remaining properties optional, finally Readonly makes them readonly.