Indexed access types in Typescript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to access the type of the 'name' property from the Person interface.

Typescript

interface Person {
  name: string;
  age: number;
}
type NameType = Person[1];

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

A['name']

B.name

C[name]

D['Name']

Attempts:

3 left

💡 Hint

Common Mistakes

Using dot notation instead of square brackets.

Not using quotes around the property name.

In TypeScript, to get the type of a property using indexed access types, you use square brackets with the property name as a string literal, like Person['name'].

2fill in blank

medium

Complete the code to define a type that represents the type of the 'age' property in the Person interface.

Typescript

interface Person {
  name: string;
  age: number;
}
type AgeType = Person[1];

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

A['age']

B.age

C[age]

D['Age']

Attempts:

3 left

💡 Hint

Common Mistakes

Using dot notation instead of square brackets.

Using incorrect casing for the property name.

The correct syntax to get the type of the 'age' property is Person['age']. This uses indexed access types with the property name as a string literal.

3fill in blank

hard

Fix the error in the code to correctly get the type of the 'email' property from the User interface.

Typescript

interface User {
  email: string;
  id: number;
}
type EmailType = User[1];

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

A.email

B['email']

C[email]

Demail

Attempts:

3 left

💡 Hint

Common Mistakes

Using dot notation instead of square brackets.

Not using quotes around the property name.

The correct way to get the type of a property is using square brackets with the property name as a string literal: User['email'].

4fill in blank

hard

Fill both blanks to create a type that represents the type of the property given by the generic key K in the Data interface.

Typescript

interface Data {
  title: string;
  count: number;
}
type ValueType<K extends keyof Data> = Data[1]K[2];

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

A[

B]

C.

D()

Attempts:

3 left

💡 Hint

Common Mistakes

Using dot notation instead of square brackets.

Using parentheses instead of brackets.

To access a property type using a generic key, use square brackets around the key: Data[K].

5fill in blank

hard

Complete the code to create a type that extracts the type of the 'status' property from the Response interface and makes it optional.

Typescript

interface Response {
  status: string;
  data: object;
}
type OptionalStatus = Partial<{ [1]: Response['status'] }>;

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

Astatus

B[

C]

D.status

Attempts:

3 left

💡 Hint

Common Mistakes

Using dot notation instead of square brackets for the type.

Not using the property name as the key in the object.

The correct way is to create a partial type with the key 'status' and its type accessed by Response['status']. So the blanks are filled with status, [, and ].