Indexed access types in Typescript - Mini Project: Build & Apply

Understanding Indexed Access Types in TypeScript

📖 Scenario: Imagine you have a list of products in an online store. Each product has details like name, price, and category. You want to create a new variable that holds the type of the product's price using TypeScript's indexed access types.

🎯 Goal: Learn how to use indexed access types in TypeScript to extract the type of a specific property from an object type.

📋 What You'll Learn

Create an interface called Product with properties name, price, and category.

Create a type alias called PriceType that uses indexed access types to get the type of the price property from Product.

Create a variable called productPrice of type PriceType and assign it a value.

Print the value of productPrice.

💡 Why This Matters

🌍 Real World

Indexed access types help you reuse types from existing objects without repeating type definitions. This keeps your code consistent and easier to maintain.

💼 Career

Understanding indexed access types is useful for TypeScript developers working on large codebases where types are shared and reused across different parts of an application.

1

Create the Product interface

Create an interface called Product with these exact properties and types: name as string, price as number, and category as string.

Typescript

# Your code here
// Create interface Product with name, price, and category properties

Hint

Use the interface keyword to define the structure of a product object.

2

Create the PriceType using indexed access type

Create a type alias called PriceType that uses indexed access types to get the type of the price property from the Product interface.

Typescript

interface Product {
    name: string;
    price: number;
    category: string;
}

# Your code here
// Create type alias PriceType using indexed access type for Product's price

Hint

Use type PriceType = Product["price"]; to get the type of the price property.

3

Create a variable with the PriceType

Create a variable called productPrice of type PriceType and assign it the value 29.99.

Typescript

interface Product {
    name: string;
    price: number;
    category: string;
}

type PriceType = Product["price"];

# Your code here
// Create variable productPrice of type PriceType and assign 29.99

Hint

Declare productPrice with the type PriceType and assign the number 29.99.

4

Print the productPrice value

Write a console.log statement to print the value of productPrice.

Typescript

interface Product {
    name: string;
    price: number;
    category: string;
}

type PriceType = Product["price"];

let productPrice: PriceType = 29.99;

# Your code here
// Print productPrice value

Hint

Use console.log(productPrice); to show the value in the console.

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