Required type in Typescript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to make all properties required in the type.

Typescript

type User = {
  name?: string;
  age?: number;
};
type RequiredUser = [1]<User>;

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

APartial

BPick

CReadonly

DRequired

Attempts:

3 left

💡 Hint

Common Mistakes

Using Partial instead of Required

Using Readonly which only makes properties readonly

Using Pick which selects properties but does not change optionality

The Required utility type makes all properties of a type required (non-optional).

2fill in blank

medium

Complete the code to make all properties required in the interface.

Typescript

interface Product {
  id?: number;
  name?: string;
}
type CompleteProduct = [1]<Product>;

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

ARequired

BPartial

CReadonly

DOmit

Attempts:

3 left

💡 Hint

Common Mistakes

Using Omit which removes properties

Using Partial which makes properties optional

Using Readonly which only affects mutability

The Required type converts all optional properties to required.

3fill in blank

hard

Fix the error by completing the code to make all properties required in the type alias.

Typescript

type Config = {
  debug?: boolean;
  verbose?: boolean;
};
type FullConfig = [1]<Config>;

const config: FullConfig = {
  debug: true,
  verbose: false
};

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

Using Readonly which does not affect optionality

Using Pick which selects properties but does not change optionality

Using Required ensures all properties must be provided, fixing the error.

4fill in blank

hard

Fill both blanks to create a required type from a partial type and assign a value.

Typescript

type Settings = [1]<{
  theme?: string;
  layout?: string;
}>;

const defaultSettings: Settings = {
  theme: 'dark',
  [2]: 'grid'
};

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

ARequired

Blayout

Ctheme

DPartial

Attempts:

3 left

💡 Hint

Common Mistakes

Using Partial instead of Required

Assigning a property name that does not exist

Forgetting to assign all required properties

Use Required to make all properties required, then assign layout property.

5fill in blank

hard

Fill all three blanks to create a required type from an interface, assign properties, and use a function parameter.

Typescript

interface Profile {
  username?: string;
  email?: string;
  age?: number;
}

type CompleteProfile = [1]<Profile>;

function printProfile(profile: [2]) {
  console.log(`User: ${profile.username}, Email: ${profile.email}, Age: ${profile.age}`);
}

const user: CompleteProfile = {
  username: 'alice',
  [3]: '[e-mail]',
  age: 30
};

printProfile(user);

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

ARequired

BCompleteProfile

Cemail

DProfile

Attempts:

3 left

💡 Hint

Common Mistakes

Using Profile instead of CompleteProfile in function parameter

Forgetting to assign the email property

Using Partial instead of Required

Use Required to make all properties required, then use the new type CompleteProfile as function parameter type, and assign the email property.