Indexed access types in Typescript - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is an indexed access type in TypeScript?

An indexed access type lets you look up the type of a property in another type using square brackets, like TypeName[Key]. It extracts the type of that property.

beginner

How do you use indexed access types to get the type of a property 'name' from an interface Person?

You write Person['name']. This gives you the type of the 'name' property defined in Person.

intermediate

Can indexed access types use union types as keys? Give an example.

Yes. For example, if key is 'name' | 'age', then Person[key] is the union of the types of name and age properties.

intermediate

What happens if you use an indexed access type with a key that does not exist on the type?

TypeScript will give an error because the key is not assignable to the keys of the type. Indexed access types require valid keys.

intermediate

Explain how indexed access types help with type safety in functions.

They let you write functions that accept keys of an object and return the exact type of the property at that key, ensuring you don't mix types accidentally.

What does Person['age'] represent in TypeScript?

A The value of the 'age' property in Person

B An error because 'age' is a string

C A new object with only the 'age' property

D The type of the 'age' property in Person

Person['age'] extracts the type of the 'age' property from the Person type.

Can you use a union of keys in indexed access types like Person['name' | 'age']?

A Yes, it returns a union of the property types

B No, it causes a syntax error

C Yes, but only if the keys are numbers

D No, it returns the first key's type only

Using a union of keys returns a union of the types of those properties.

What error occurs if you use an invalid key in an indexed access type?

A No error, it returns <code>any</code>

B Type error: key not assignable to keys of the type

C Runtime error

D Syntax error

TypeScript enforces keys must exist on the type, otherwise it reports a type error.

Which of these is a valid use of indexed access types?

A type AgeType = Person['age'];

B let age: Person['age'] = 'twenty';

C Person['height'] = 180;

D type Name = Person.name;

Option A correctly extracts the type of 'age' property. Option B may be invalid if 'age' is not a string. Option C tries to assign a value to a type. Option D uses dot notation incorrectly for types.

How do indexed access types improve function definitions?

A By allowing functions to ignore types

B By making functions run faster

C By allowing functions to return the exact property type based on a key parameter

D By converting all types to strings

Indexed access types help functions be more precise about the types they return based on input keys.

Describe what indexed access types are and how they are used in TypeScript.

Think about how you get a property type from an object type.

Explain how indexed access types can help make your TypeScript code safer when working with object properties.

Consider how knowing exact property types prevents errors.

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