Converting a constant array of objects in Typescript into a typed index lookup object

Question

Converting a constant array of objects in Typescript into a typed index lookup object

const vehicles = [
  { id: 'id1', name: 'bike' },
  { id: 'id2', name: 'scooter' },
  { id: 'id3', name: 'motorcycle' },
] as const;
type VehicleId = typeof vehicles[number]['id'];

const vehicleIndexes = vehicles.reduce((acc, vehicle, i) => ({ ...acc, [vehicle.id]: i }), {});
console.log(vehicleIndexes);

This piece of code is functioning correctly and displays

{ id1: 0, id2: 1, id3: 2 }

vehicleIndexes provides a map enabling the retrieval of each vehicle's index by their id, however, I desire for vehicleIndexes to be strictly typed. Upon modifying its type definition to { [K in VehicleId]: number }:

const vehicleIndexes: { [K in VehicleId]: number } = vehicles.reduce((acc, vehicle, i) => ({ ...acc, [vehicle.id]: i }), {});

An error occurs:

error TS2739: Type '{}' is missing the following properties from type '{ id1: number; id2: number; id3: number; }': id1, id2, id3

I prefer using a plain object over a Map, since an object with the type { [K in VehicleId]: number } ensures that the search for the index cannot fail for any VehicleId.

typescript

Answer 1

Answer №1

As far as I know, unless you explicitly cast to {[K in CarId]: number}, TypeScript does not have the capability to automatically detect that

cars.reduce((acc, car, i) => ({ ...acc, [car.id]: i }), {})

(or similar methods) will produce an object with CarId as the index.

Answer 2

As far as I know, unless you explicitly cast to {[K in CarId]: number}, TypeScript does not have the capability to automatically detect that

cars.reduce((acc, car, i) => ({ ...acc, [car.id]: i }), {})

(or similar methods) will produce an object with CarId as the index.

Answer 3

Answer №2

In my opinion, it is necessary to explicitly specify the accumulator value for the reduce method:

const vehicles = [
    { id: 'id1', type: 'car' },
    { id: 'id2', type: 'truck' },
    { id: 'id3', type: 'suv' },
] as const;
type VehicleId = typeof vehicles[number]['id'];

const vehicleIndexes = vehicles
    .reduce(
        (acc, vehicle, i) => (
            { ...acc, [vehicle.id]: i }
        ),
        {} as { [K in VehicleId]: number }
    );
console.log(vehicleIndexes);

Answer 4

In my opinion, it is necessary to explicitly specify the accumulator value for the reduce method:

const vehicles = [
    { id: 'id1', type: 'car' },
    { id: 'id2', type: 'truck' },
    { id: 'id3', type: 'suv' },
] as const;
type VehicleId = typeof vehicles[number]['id'];

const vehicleIndexes = vehicles
    .reduce(
        (acc, vehicle, i) => (
            { ...acc, [vehicle.id]: i }
        ),
        {} as { [K in VehicleId]: number }
    );
console.log(vehicleIndexes);

Answer 5

Answer №3

An effective way to ensure type safety in this scenario is to utilize the Partial type:

let carIndexes: Partial<{ [key in CarId]: number }> = {};
for (let i = 0; i < cars.length; ++i) {
  carIndexes[cars[i].id] = i;
  
  // The code below will not compile due to TS2339: Property 'OTHER_PROPERTY' does not exist on type 'Partial<{ id1: number; id2: number; id3: number; }>'
  // carIndexes.OTHER_PROPERTY = 0;
}

In contrast, using the reduce() function with an explicit cast, as suggested by other responses, provides little static type safety. For example, even if I mistakenly write the following, the code will still compile:

const carIndexes: { [K in CarId]: number } = cars.reduce(
  (acc, car, i) => ({ 
    ...acc,
    // This line should not be valid since there is no property "id" in typeof carIndexes
    id: i 
  }),
  {} as {[K in CarId]: number}
);

Answer 6

An effective way to ensure type safety in this scenario is to utilize the Partial type:

let carIndexes: Partial<{ [key in CarId]: number }> = {};
for (let i = 0; i < cars.length; ++i) {
  carIndexes[cars[i].id] = i;
  
  // The code below will not compile due to TS2339: Property 'OTHER_PROPERTY' does not exist on type 'Partial<{ id1: number; id2: number; id3: number; }>'
  // carIndexes.OTHER_PROPERTY = 0;
}

In contrast, using the reduce() function with an explicit cast, as suggested by other responses, provides little static type safety. For example, even if I mistakenly write the following, the code will still compile:

const carIndexes: { [K in CarId]: number } = cars.reduce(
  (acc, car, i) => ({ 
    ...acc,
    // This line should not be valid since there is no property "id" in typeof carIndexes
    id: i 
  }),
  {} as {[K in CarId]: number}
);

Converting a constant array of objects in Typescript into a typed index lookup object

Answer №1

Answer №2

Answer №3

Similar questions

Having trouble dynamically rendering a Component using Object.entries

What is the most effective method for merging two arrays in JavaScript?

Grouping Columns in an HTML Table using Angular 4

Optimizing an ASP.NET web application for seamless integration with Angular 2 and TypeScript

"Upon clicking the login button, I encountered an issue with redirecting to the destination

What is the best way to retrieve values from a multi-dimensional array?

Type guards do not work properly on a union of enum types in TypeScript

What is the most efficient way to execute useEffect when only one specific dependency changes among multiple dependencies?

Prevent data loss on webpage refresh by using Angular's local storage feature

What is the correct way to implement the Maybe functor in typing?

Issue with Redis cache time-to-live not adhering to set expiration

Retrieve parent route parameters from a dynamically loaded route component

The `sonarqube-scanner@^4.0.0` does not produce a non-zero exit code when a Quality Gate failure occurs

Revamping Angular Material Table - A guide to refreshing column headers in a pre-existing table

Converting a string value into an object in Javascript using a command that functions similarly to eval in Python

Locating a class variable using a string chosen from a DropDown menu

Angular 2: Obtaining the caret position in a contenteditable 'div'

Multiple consecutive requests within another (Angular)

Fixed-sized array containing union parameters

How to invoke a method in a nested Angular 2 component