Partial type in Typescript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to declare a variable that can have some or all properties of the interface.

Typescript

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

let user: [1]<User> = { name: "Alice" };

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 mandatory.

Using Pick which requires specifying keys.

Using Readonly which only makes properties immutable.

The Partial type makes all properties optional, so you can provide some or all.

2fill in blank

medium

Complete the code to create a function that accepts a partial User object.

Typescript

function updateUser(user: User, updates: [1]<User>): User {
  return { ...user, ...updates };
}

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

AReadonly

BPartial

CRequired

DPick

Attempts:

3 left

💡 Hint

Common Mistakes

Using Required which expects all properties.

Using Readonly which does not allow changes.

Using Pick without specifying keys.

The Partial type allows the updates object to have any subset of User properties.

3fill in blank

hard

Fix the error in the function parameter type to accept partial updates.

Typescript

function modifySettings(settings: [1]<Settings>) {
  // modify settings
}

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

APartial

BReadonly

CRequired

DPick

Attempts:

3 left

💡 Hint

Common Mistakes

Using Required which expects all properties.

Using Readonly which prevents modification.

Using Pick without specifying keys.

The Partial type allows passing an object with some or all properties of Settings.

4fill in blank

hard

Fill both blanks to create a partial update function with correct typing.

Typescript

function updateProfile(profile: User, changes: [1]<[2]>) {
  return { ...profile, ...changes };
}

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

APartial

BReadonly

CUser

DSettings

Attempts:

3 left

💡 Hint

Common Mistakes

Using Readonly instead of Partial.

Using the wrong interface type.

Mixing up the order of blanks.

The function uses Partial with the User type to allow partial updates.

5fill in blank

hard

Fill all three blanks to define a function that merges partial settings into defaults.

Typescript

function mergeDefaults(defaults: [1], overrides: [2]<[3]>) {
  return { ...defaults, ...overrides };
}

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

ASettings

BPartial

DReadonly

Attempts:

3 left

💡 Hint

Common Mistakes

Using Readonly instead of Partial for overrides.

Using different types for defaults and overrides.

Confusing the order of blanks.

The function merges defaults of type Settings with overrides which is a Partial<Settings>.