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 ].

Practice

1. What does the TypeScript indexed access type Person['name'] represent?

easy

A. A function that returns the 'name' property

B. The type of the 'name' property in the Person type

C. An error because 'name' is not a valid type

D. A new property called 'name' added to Person

Solution

1. Step 1: Understand indexed access syntax

   The syntax Type['property'] extracts the type of the specified property from the given type.

2. Step 2: Apply to Person['name']

   This means Person['name'] is the type of the 'name' property inside the Person type.

3. Final Answer:

   The type of the 'name' property in the Person type -> Option B

4. Quick Check:

   Indexed access type = property type [OK]

Hint: Remember: Type['prop'] gives the type of that property [OK]

Common Mistakes:

• Thinking it creates a new property
• Confusing it with a function call
• Assuming it causes a syntax error

2. Which of the following is the correct syntax to get the type of property age from type Person using indexed access types?

easy

A. type AgeType = Person['age'];

B. type AgeType = Person.age;

C. type AgeType = Person("age");

D. type AgeType = Person<age>;

Solution

1. Step 1: Recall indexed access syntax

   The correct syntax uses square brackets with the property name as a string: Type['property'].

2. Step 2: Check each option

   type AgeType = Person['age']; matches this syntax exactly: Person['age']. Others use dot notation or parentheses which are invalid here.

3. Final Answer:

   type AgeType = Person['age']; -> Option A

4. Quick Check:

   Use square brackets with quotes for indexed access [OK]

Hint: Use square brackets and quotes for property names [OK]

Common Mistakes:

• Using dot notation instead of brackets
• Using parentheses like a function call
• Using angle brackets incorrectly

3. Given the type type Person = { name: string; age: number; }, what is the type of Person['age']?

medium

A. string

B. boolean

C. any

D. number

Solution

1. Step 1: Look at the Person type definition

   The property 'age' in Person is defined as a number.

2. Step 2: Indexed access extracts that type

   So Person['age'] is the type number.

3. Final Answer:

   number -> Option D

4. Quick Check:

   Person['age'] = number [OK]

Hint: Check the property type inside the original type [OK]

Common Mistakes:

• Confusing 'age' type with 'name' type
• Assuming default any type
• Mixing up string and number types

4. What is wrong with this TypeScript code?

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

medium

A. AgeType cannot be assigned

B. Person type is not defined

C. Missing quotes around 'age' in indexed access

D. No error, code is correct

Solution

1. Step 1: Identify the indexed access syntax error

   In Person[age], 'age' should be a string literal in quotes: Person['age'].

2. Step 2: Understand why quotes are needed

   Without quotes, TypeScript treats age as a variable, which is undefined here, causing an error.

3. Final Answer:

   Missing quotes around 'age' in indexed access -> Option C

4. Quick Check:

   Property names in indexed access need quotes [OK]

Hint: Always put property names in quotes inside brackets [OK]

Common Mistakes:

• Omitting quotes around property names
• Assuming dot notation works in type access
• Confusing variables with string literals

5. Given the type type Config = { options: { debug: boolean; verbose: boolean; }; version: string; }, which type correctly extracts the type of the debug property using indexed access types?

hard

A. Config['options']['debug']

B. Config.options.debug

C. Config['debug']

D. Config['options.debug']

Solution

1. Step 1: Understand nested indexed access

   The 'debug' property is inside 'options', so we first access 'options' then 'debug'.

2. Step 2: Apply chained indexed access syntax

   Use Config['options']['debug'] to get the type of 'debug'.

3. Step 3: Check other options

   Config.options.debug uses dot notation which is invalid in type access. Config['debug'] tries to access 'debug' directly on Config which doesn't exist. Config['options.debug'] treats 'options.debug' as a single property name which is incorrect.

4. Final Answer:

   Config['options']['debug'] -> Option A

5. Quick Check:

   Use chained brackets for nested properties [OK]

Hint: Chain brackets for nested property types [OK]

Common Mistakes:

• Using dot notation in type access
• Accessing nested property directly without parent
• Treating nested keys as single string