Excess property checks vs structural compatibility in Typescript - Interactive Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to declare an object with a required property 'name'.

Typescript

interface Person { name: string; }
const person: Person = { name: [1] };

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

A"Alice"

BAlice

Cname

D123

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting quotes around string values.

Using a variable name instead of a string literal.

The property 'name' must be a string, so we use a string literal like "Alice".

2fill in blank

medium

Complete the code to assign an object with an extra property 'age' to a variable of type Person.

Typescript

interface Person { name: string; }
const person: Person = { name: "Bob", [1]: 30 };

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

Aheight

Baddress

Cage

Dweight

Attempts:

3 left

💡 Hint

Common Mistakes

Using a property name that is in the interface (like 'name').

Using a property name unrelated to the example.

The extra property 'age' is not declared in Person, so TypeScript will check for excess properties.

3fill in blank

hard

Fix the error in the code by completing the type assertion to allow extra properties.

Typescript

interface Person { name: string; }
const p: Person = { name: "Carol", age: 25 } as [1];

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

Aany

BPerson

Cunknown

Dobject

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'Person' which does not allow extra properties.

Using 'unknown' which requires further checks.

Using 'any' in a type assertion disables excess property checks, allowing extra properties.

4fill in blank

hard

Fill both blanks to create a function that accepts an object with at least a 'name' property and any extra properties.

Typescript

function greet(person: [1] & [2]) {
  console.log(`Hello, ${person.name}`);
}

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

A{ name: string }

BRecord<string, unknown>

Cany

Dobject

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'any' which disables type safety.

Using 'object' which does not specify properties.

The intersection of a specific type and a Record allows extra properties while requiring 'name'.

5fill in blank

hard

Fill all three blanks to create a variable with structural compatibility allowing extra properties without errors.

Typescript

interface Person { name: string; }
const p: Person = { name: "Dave", [1]: 40, [2]: "blue" } as [3];

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

Aage

BfavoriteColor

Cany

DPerson

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'Person' in the assertion which causes errors due to extra properties.

Using property names not matching the example.

Using 'any' as a type assertion allows assigning an object with extra properties to Person without errors.