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.