Type Safety for Indexed Properties in TypeScript

Introduction

In TypeScript, you often need to define objects with keys and values of specific types. This is particularly useful when working with dynamic data structures where you want to ensure type safety across your codebase. In this tutorial, we will explore how to enforce the type of indexed members in a TypeScript object.

Understanding Indexed Objects

An indexed object allows you to use strings (or numbers) as keys and associate them with specific value types. This is akin to using dictionaries or maps in other languages but with added type safety provided by TypeScript.

Basic Indexed Object Definition

To define an object where all values are of a certain type, such as string, you can use index signatures. An index signature specifies that any key of a particular type (e.g., string) will map to a value of another specified type (e.g., string).

Here’s how you can declare an indexed object:

interface StringMap {
  [key: string]: string;
}

let myMap: StringMap = {};
myMap["a"] = "foo"; // Valid
myMap["b"] = "bar"; // Valid
myMap["c"] = false; // TypeScript Error: Type 'boolean' is not assignable to type 'string'.

In this example, StringMap is an interface where any key of type string maps to a value of type string.

Advanced Index Signatures

TypeScript also allows for more advanced use cases with index signatures. You can define interfaces that enforce both the types of keys and values.

Using Union Types as Keys

You might want to restrict the keys of your object to a specific set of strings using union types:

type DayOfTheWeek = "sunday" | "monday" | "tuesday" | "wednesday" | "thursday" | "friday" | "saturday";

interface ChoresMap {
  [DAY in DayOfTheWeek]: string;
}

const chores: ChoresMap = {
  sunday: "do the dishes",
  monday: "walk the dog",
  tuesday: "water the plants",
  wednesday: "take out the trash",
  thursday: "clean your room",
  friday: "mow the lawn"
  // TypeScript Error for missing 'saturday'
};

Generic Indexed Types

You can also define a generic indexed type that allows you to specify both keys and values:

type DayOfTheWeekMap<T> = { [DAY in DayOfTheWeek]: T };

const chores: DayOfTheWeekMap<string> = {
  sunday: "do the dishes",
  monday: "walk the dog",
  tuesday: "water the plants",
  wednesday: "take out the trash",
  thursday: "clean your room",
  friday: "mow the lawn",
  saturday: "relax"
};

const workDays: DayOfTheWeekMap<boolean> = {
  sunday: false,
  monday: true,
  tuesday: true,
  wednesday: true,
  thursday: true,
  friday: true,
  saturday: false
};

Using the Record Utility Type

TypeScript provides a built-in utility type called Record that simplifies creating types with index signatures. This is particularly useful for mapping from one type to another.

Basic Usage of Record

const record: Record<string, string> = {};
record["a"] = "value"; // Valid
record[1] = "numberKey"; // TypeScript Error

Specifying Keys with Union Types

You can further restrict keys using union types:

const specificKeysRecord: Record<'a' | 'b' | 'c', string> = {};
specificKeysRecord["a"] = "allowed";
// specificKeysRecord[4] = "not allowed"; // TypeScript Error

Mapping and Transforming Objects

Record is also handy for mapping or transforming objects:

function mapObject<K extends string, T, U>(obj: Record<K, T>, f: (x: T) => U): Record<K, U> {
  const result: Record<K, U> = {} as Record<K, U>;
  for (const key in obj) {
    if (obj.hasOwnProperty(key)) {
      result[key] = f(obj[key]);
    }
  }
  return result;
}

const names = { foo: "hello", bar: "world", baz: "bye" };
const lengths = mapObject(names, s => s.length); // { foo: number, bar: number, baz: number }

Conclusion

Enforcing the types of indexed members in TypeScript objects ensures robust and error-free code by leveraging index signatures, union types, and utility types like Record. These tools allow developers to create flexible yet type-safe data structures that can adapt to various use cases while maintaining strict type checking.