Why does TypeScript throw an error when searching for a string in an array with .includes?

Question

In the following example code, TypeScript throws a Argument of type 'string' is not assignable to parameter of type 'Item'. ts(2345) error.

type Item = 'foo' | 'bar' | 'baz'

const isInArray = (str: string) => {
  const arr: Item[] = ['foo', 'bar', 'baz']

  return arr.includes(str)
                      ^^^
}

I realise that I could remove the Item[] type from arr which would turn it into a string[] and prevent the error, however, in real-life where I ran into this, the array is the result of mapping through some array of objects which is typed, thus resulting in the array being typed accordingly.

I feel like this should work, since we know in advance what the values of the array are, but not necessarily what the input argument is.

I guess I'm missing something. Why is this error happening and how can I resolve it?

It appears as though you already know why it is happening... — Heretic Monkey
– Heretic Monkey, Commented Mar 26, 2020 at 20:01
What does confuse me though is the fact that Array#includes is typed as includes(item: T) rather than includes(item: any), which seems silly. — Rubydesic
– Rubydesic, Commented Mar 26, 2020 at 20:45

Evert · Accepted Answer · 2020-03-26 19:57:03Z

1

string is a broader type than Item, and when an array is typed with Item, you must also pass an Item.

You have a few options:

Change the argument to an Item, as inthedark122 suggested. This way your type system ensures that you can't even call isInArray without a sane type.
Use arr.includes(str as any). You're basically saying, 'I know what I'm doing'.
In your function, first check if str is an Item, maybe with a type guard function. If str is not an item, you don't even have to use .includes() because if str is something else, you already know that it's not going to appear in the array.

answered Mar 26, 2020 at 19:57

Evert

101k18 gold badges136 silver badges221 bronze badges

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

Comments

inthedark122 · Accepted Answer · 2020-03-26 19:53:21Z

0

Typescript want that str should also be Item const isInArray = (str: Item) => {

answered Mar 26, 2020 at 19:53

inthedark122

1044 bronze badges

Collectives™ on Stack Overflow

Why does TypeScript throw an error when searching for a string in an array with .includes?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related