Optional chaining with types in Typescript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to safely access the property name of user.

Typescript

const userName = user[1].name;

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

A!

B.

C?.

D&&

Attempts:

3 left

💡 Hint

Common Mistakes

Using dot . directly causes errors if user is undefined.

Using ! asserts non-null but can cause runtime errors if wrong.

Using ?. allows safe access to name even if user is undefined or null.

2fill in blank

medium

Complete the code to safely call the method getAge on person.

Typescript

const age = person[1].getAge();

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

A?.

B&&

C.

D!

Attempts:

3 left

💡 Hint

Common Mistakes

Using ! forces non-null but can cause errors if person is null.

Using dot . directly causes runtime errors if person is undefined.

Using ?. calls getAge only if person is not null or undefined.

3fill in blank

hard

Fix the error in safely accessing city inside address of user.

Typescript

const city = user.address[1].city;

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

A.

B!

C&&

D?.

Attempts:

3 left

💡 Hint

Common Mistakes

Using dot . directly causes runtime errors if address is undefined.

Using ! asserts non-null but can cause errors if wrong.

Use ?. after address to avoid errors if address is undefined.

4fill in blank

hard

Fill both blanks to create a dictionary of user names with their city if available.

Typescript

const userCities = { [user.name]: user.address[1].city [2] 'Unknown' };

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

A?.

B||

C&&

D!

Attempts:

3 left

💡 Hint

Common Mistakes

Using ! incorrectly can cause runtime errors.

Using && instead of || will not provide a default value.

Use ?. to safely access city and || to provide a default value if city is undefined.

5fill in blank

hard

Fill all three blanks to safely access the nested property zipcode or return 'N/A'.

Typescript

const zip = user[1].address[2].zipcode [3] 'N/A';

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

A?.

C||

D!

Attempts:

3 left

💡 Hint

Common Mistakes

Using ! can cause errors if the property is missing.

Using dot . without optional chaining can cause runtime errors.

Use optional chaining twice to safely access nested properties and logical OR to provide a fallback value.