TypeScript array inclusion check results in error [duplicate]

Question

I have this array:

// I have this as a const since I need it as a type elsewhere
const fruits = ["strawberry", "banana", "orange", "grapefruit"] as const;

Then I try to check if an unknown value (from like a HTTP controller) is present in the array (to prevent lots of x !== y statements), like below:

const input: string = SomeRandomService.getMyString();

if(!fruits.includes(input)) {
  throw new Error("Not present");
}

That results in the following error message on the .includes(input <-- this one):

TS2345: Argument of type 'string' is not assignable to parameter of type '"strawberry" | "banana" | "orange" | "grapefruit"'.

Why does this occur? This seems like valid code to me, because I actually want to do that check to prevent it from not being assignable like TypeScript suggests me to do.

What is the solution to bypass this? (Except doing input as any)

Nick Vu · Accepted Answer · 2022-04-06 17:30:32Z

1

You can cast your fruits to ReadonlyArray<string> which has includes by default but un-modifiable

// I have this as a const since I need it as a type elsewhere
const fruits = ["strawberry", "banana", "orange", "grapefruit"] as const;

const input: string = "testing";

if(!(fruits as ReadonlyArray<string>).includes(input)) {
  throw new Error("Not present");
}

Playground

answered Apr 6, 2022 at 17:30

Nick Vu

15.6k5 gold badges29 silver badges37 bronze badges

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

Comments

spender · Accepted Answer · 2022-04-06 17:30:53Z

1

There's no easy way to do this, but you can wrap all the messy logic into a type-guarding function:

const fruits = ["strawberry", "banana", "orange", "grapefruit"] as const;

const isFruit = (value: string): value is typeof fruits[number] => {
  return fruits.includes(value as typeof fruits[number])
}

const input: string = "something";

if (!isFruit(input)) {
  throw new Error("Not present");
}
// now input is typed "strawberry"|"banana"|"orange"|"grapefruit"

Playground Link

answered Apr 6, 2022 at 17:30

spender

121k36 gold badges245 silver badges369 bronze badges

Collectives™ on Stack Overflow

TypeScript array inclusion check results in error [duplicate]

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related