What structural typing means in Typescript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a type with a property 'name' of type string.

Typescript

type Person = { name: [1] };

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

Astring

Bnumber

Cboolean

Dany

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'number' or 'boolean' instead of 'string' for the 'name' property.

The property 'name' should be of type string to match the expected structure.

2fill in blank

medium

Complete the code to assign an object to a variable of type Person.

Typescript

const user: Person = { name: [1] };

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

A42

Btrue

Cnull

D'Alice'

Attempts:

3 left

💡 Hint

Common Mistakes

Using a number or boolean value instead of a string.

The 'name' property must be a string, so 'Alice' is the correct value.

3fill in blank

hard

Fix the error by completing the code to check if an object matches the Person type structurally.

Typescript

function isPerson(obj: any): obj is Person { return typeof obj.name === [1]; }

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

A'string'

B'number'

C'boolean'

D'object'

Attempts:

3 left

💡 Hint

Common Mistakes

Checking for 'number' or 'boolean' instead of 'string'.

To confirm the object has a 'name' property of type string, check if typeof obj.name === 'string'.

4fill in blank

hard

Fill both blanks to create a function that accepts any object with a 'name' property of type string.

Typescript

function greet([1]: { [2]: string }) { return `Hello, $[1]!`; }

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

Aname

Bage

Cusername

Did

Attempts:

3 left

💡 Hint

Common Mistakes

Using different names for the destructured variable and the type property.

The function destructures the parameter to get the 'name' property, so both blanks should be 'name'.

5fill in blank

hard

Fill all three blanks to create a structural type and assign an object matching it.

Typescript

type [1] = { [2]: number }; const item: [1] = { [2]: 5 };

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

AProduct

Bprice

Cquantity

DItem

Attempts:

3 left

💡 Hint

Common Mistakes

Using different names for the type or property in the object.

The type is named 'Item', it has a 'quantity' property of type number, and the object uses the same type and property.