Using Array.map does not give TypeScript errors for undefined properties

Question

If I have an interface like this:

interface OptionsType {
  name: string;
}

Then when I try to use that interface with a property that is not defined, I get Type '{ value: string; disabled: boolean; }' is not assignable to type 'OptionsType'. Object literal may only specify known properties, and 'disabled' does not exist in type 'OptionsType'.

This is good, I want this error to occur when I make this mistake. My problem comes from when I use this in Array.map, it does not give me the error. How can I make it so that my usage of Array.map is properly typed?

Errors properly:

const optionsArr: OptionsType[] = [
  {
    value: 'hello',
    disabled: false, // error
  },
];

const options: OptionsType = {
  value: 'thing',
  disabled: true, // error
};

Does not error:

const optionsArrMapped: OptionsType[] = [1, 2].map(num => ({
  value: 'idk',
  disabled: true,
}));

// As an example, using `as` prevents the error from happening. I'm not less concerned about this case.
const optionsAs: OptionsType = {
  value: 'thing',
  disabled: true,
} as OptionsType;

Anton · Accepted Answer · 2020-04-08 23:32:57Z

1

You can specify a return type for map function using generics:

const optionsArrMapped: OptionsType[] = [1, 2].map<OptionsType>(num => ({
  value: 'idk',
  disabled: true,
}));

answered Apr 8, 2020 at 23:32

Anton

8616 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Mike Odie Over a year ago

Thanks, that looked like it was going to work. It does make sure that I'm returning all the required properties. But I'm still not seeing any errors when I add random properties to the returned object.

Anton Over a year ago

What version of TypeScript do you use?. Could you show your tsconfig.json file? I've checked with version 2.7. VSCode shows me errors when I add random properties or not all required properties.

Anton Over a year ago

Yes, I've checked. It doesn't show error me too. I'll have a look

Mike Odie Over a year ago

TypeScript 3.8.3 is on this project, here's the tsconfig without our paths.

{   "compilerOptions": {     "module": "amd",     "moduleResolution": "node",     "sourceMap": true,     "target": "es2017",     "jsx": "react",     "experimentalDecorators": true,     "allowSyntheticDefaultImports": true,     "resolveJsonModule": true, }

DLight Over a year ago

It seems it still does not error in TypeScript 5.2.2. TS playground

ZY L · Accepted Answer · 2023-09-30 06:04:01Z

1

The correct way to resolve this is to explicitly type the return value of Array.map():

const optionsArrMapped: OptionsType[] = [1, 2].map((num): OptionsType => ({
  value: 'idk',
  disabled: true,
}));

TS Playground

answered Sep 30, 2023 at 6:04

ZY L

111 bronze badge

Collectives™ on Stack Overflow

Using Array.map does not give TypeScript errors for undefined properties

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related