Indexed access types in Typescript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of indexed access type usage

What is the type of result in the following TypeScript code?

Typescript

type Person = { name: string; age: number; };
let personName: Person['name'];
personName = "Alice";

const result = typeof personName;

A "undefined"

B "number"

C "object"

D "string"

💡 Hint

Look at the type of the 'name' property in the Person type.

The indexed access type Person['name'] extracts the type of the 'name' property, which is string. So typeof personName is 'string'.

🧠 Conceptual

intermediate

Understanding indexed access types with union keys

Given the type type Keys = 'a' | 'b'; and type Obj = { a: number; b: string; c: boolean; };, what is the type of Obj[Keys]?

A number | string

B number

C string

D number | string | boolean

💡 Hint

Indexed access with a union key produces a union of the property types.

Obj[Keys] means the type of properties 'a' or 'b' in Obj, which are number and string, so the result is number | string.

🔧 Debug

advanced

Why does this indexed access type cause an error?

Consider this code snippet:

type Data = { x: number; y: string };
type Key = 'x' | 'z';
type Value = Data[Key];

What error does this code produce?

A No error, Value is number | undefined.

B Syntax error: Unexpected token '['.

C Type error: Property 'z' does not exist on type 'Data'.

D Type error: Type 'Key' is not assignable to type 'string'.

💡 Hint

Check if all keys in 'Key' exist in 'Data'.

The key 'z' does not exist in Data, so accessing Data['z'] causes a type error.

❓ Predict Output

advanced

Output of nested indexed access types

What is the type of NestedValue in this code?

type Config = { settings: { theme: string; version: number } };
type NestedValue = Config['settings']['version'];

A string

B number

C { theme: string; version: number }

D unknown

💡 Hint

Indexed access can be chained to get nested property types.

Config['settings'] is { theme: string; version: number }, then accessing ['version'] gives number.

🚀 Application

expert

Using indexed access types to create a type-safe function

Given the type type User = { id: number; name: string; active: boolean };, which function signature correctly uses indexed access types to accept a key and return the corresponding value type?

A function getValue<K extends keyof User>(key: K): User[K];

B function getValue(key: string): User[key];

C function getValue<K>(key: K): User[K];

D function getValue(key: keyof User): any;

💡 Hint

Use a generic constrained to keys of User to get the correct value type.

Option A correctly constrains K to keys of User and returns User[K], ensuring type safety.

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