Issue with Typescript when attempting to create an array of objects with varying keys using the map method

Question

Issue with Typescript when attempting to create an array of objects with varying keys using the map method

My goal is to dynamically create an array of objects, each potentially containing different keys but always following the same format as defined on myType. However, Typescript throws an error when I attempt to do so. Below is a simplified example.

type myType = {
  [key: string]: number;
};

const doesNotComplain: myType[] = [{ a: 1 }, { b: 2 }];

const doesComplain: myType[] = [1, 0, 0, 0, 1, 0].map((e) => {
  if (e == 1) return { a: 1 };
  return { b: 2 };
});

The error specifically occurs with doesComplain.

Type '({ a: number; b?: undefined; } | { b: number; a?: undefined; })[]' is not assignable to type 'myType[]'.
  Type '{ a: number; b?: undefined; } | { b: number; a?: undefined; }' is not assignable to type 'myType'.
    Type '{ a: number; b?: undefined; }' is not assignable to type 'myType'.
      Property 'b' is incompatible with index signature.
        Type 'undefined' is not assignable to type 'number'.

Things I've attempted:

I have looked at solutions for similar issues, but none seem to fit my specific case.

One solution mentioned here requires a fixed amount of values in the array, which doesn't match what I need.

Other suggestions propose defining myType with number | undefined, but I prefer not to do this since I expect all keys to have defined values.

The only way I found to eliminate the error so far is to use // @ts-ignore above doesComplain, which defeats the purpose of using Typescript.

typescript

Answer 1

Answer №1

The simplest and most secure solution in this scenario is to avoid relying on TypeScript's inferred type for the value returned by the map callback. Instead, explicitly specify the return type of the callback like this:

const x: MyType[] = [1, 0, 0, 0, 1, 0].map(
  (e): MyType => e == 1 ? { a: 1 } : { b: 2 }
);

After adding the return type annotation, you don't need to annotate the variable x separately. The type MyType[] will be inferred automatically:

const x = [1, 0, 0, 0, 1, 0].map(
  (e): MyType => e == 1 ? { a: 1 } : { b: 2 }
);

Using annotations is preferred over type assertions because they provide better type safety. Annotations catch errors that type assertions might miss:

const x = [1, 0, 0, 0, 1, 0].map(
  (e): MyType => e == 1 ? { c: "oops" } : { b: 2 } 
);

const x = [1, 0, 0, 0, 1, 0].map(
  (e) => (e == 1 ? { c: "oops" } : { b: 2 }) as MyType
);

This issue originates from TypeScript's handling of object literal types, which was introduced in TypeScript 2.7.

It's unlikely that TypeScript will directly address this issue. However, you can work around it by explicitly annotating expected return types or by returning existing objects rather than fresh object literals.

Click here for a Playground link to view the code

Answer 2

The simplest and most secure solution in this scenario is to avoid relying on TypeScript's inferred type for the value returned by the map callback. Instead, explicitly specify the return type of the callback like this:

const x: MyType[] = [1, 0, 0, 0, 1, 0].map(
  (e): MyType => e == 1 ? { a: 1 } : { b: 2 }
);

After adding the return type annotation, you don't need to annotate the variable x separately. The type MyType[] will be inferred automatically:

const x = [1, 0, 0, 0, 1, 0].map(
  (e): MyType => e == 1 ? { a: 1 } : { b: 2 }
);

Using annotations is preferred over type assertions because they provide better type safety. Annotations catch errors that type assertions might miss:

const x = [1, 0, 0, 0, 1, 0].map(
  (e): MyType => e == 1 ? { c: "oops" } : { b: 2 } 
);

const x = [1, 0, 0, 0, 1, 0].map(
  (e) => (e == 1 ? { c: "oops" } : { b: 2 }) as MyType
);

This issue originates from TypeScript's handling of object literal types, which was introduced in TypeScript 2.7.

It's unlikely that TypeScript will directly address this issue. However, you can work around it by explicitly annotating expected return types or by returning existing objects rather than fresh object literals.

Click here for a Playground link to view the code

Answer 3

Answer №2

I recently encountered a similar issue and spent countless hours trying to comprehend the situation.

Firstly, let's examine your .map() outcome without specifying the variable.

const untypedMappedResult = [1, 0, 0, 0, 1, 0].map((e) => {
  return (e === 1) ? { x: 1 } : { y: 2 };
});

/*
const untypedMappedResult: ({
    x: number;
    y?: undefined;
} | {
    y: number;
    x?: undefined;
})[]
*/

As you can observe, the result is different from what you might anticipate. Both objects in the combination have two attributes.

To resolve this issue, simply insert a type assertion...

const typedMappedResult = [1, 0, 0, 0, 1, 0].map((e) => {
  return ((e === 1) ? { x: 1 } : { y: 2 }) as myType;
});

/*
const typedMappedResult: myType[]
*/

Note that I didn't need to specify the variable type; it was automatically inferred.

Sample Playground

Answer 4

I recently encountered a similar issue and spent countless hours trying to comprehend the situation.

Firstly, let's examine your .map() outcome without specifying the variable.

const untypedMappedResult = [1, 0, 0, 0, 1, 0].map((e) => {
  return (e === 1) ? { x: 1 } : { y: 2 };
});

/*
const untypedMappedResult: ({
    x: number;
    y?: undefined;
} | {
    y: number;
    x?: undefined;
})[]
*/

As you can observe, the result is different from what you might anticipate. Both objects in the combination have two attributes.

To resolve this issue, simply insert a type assertion...

const typedMappedResult = [1, 0, 0, 0, 1, 0].map((e) => {
  return ((e === 1) ? { x: 1 } : { y: 2 }) as myType;
});

/*
const typedMappedResult: myType[]
*/

Note that I didn't need to specify the variable type; it was automatically inferred.

Sample Playground

Issue with Typescript when attempting to create an array of objects with varying keys using the map method

Answer №1

Answer №2

Similar questions

Increase progress by pressing a button

Navigating the terrain of multiple checkboxes in React and gathering all the checked boxes

utilize TypeScript to iterate through an array in a JSON object

Utilizing raw queries in TypeORM with NestJS to enforce lowercase column names

Angular Lifecycle Hook - Data loading initializes after the view initialization is complete

Tips for finalizing a subscriber after a for loop finishes?

Testing Angular 11 methods using Jest unit tests within a .then block

Improving type definitions in Typescript 2.6 using module augmentation leads to error TS2339: Property '' is not found on type ''

Dev error occurs due to a change in Angular2 pipe causing the message "has changed after it was checked"

``Should one prioritize the use of Generics over Inheritance, or is there a better way

Struggling to fix TypeScript error related to Redux createSlice function

Encountering a console error while attempting to navigate to the 404 page on Angular

What is the process for configuring vue.config.js with typescript?

Provide an immutable parameter to a function that will not cause any changes

Loop through the array while handling a promise internally and ensure completion before proceeding

Utilizing declaration files in a TypeScript application to provide global exposure of types

Developing a Javascript object using Typescript

The compatibility issue between ComponentPropsWithRef and React Native on a pnpm monorepo is causing issues

Setting a default value for props in a functional component in NextJS using Typescript when not explicitly passed

Angular 13: Issue with displaying lazy loaded module containing multiple outlets in a component