Issue arises when TypeScript attempts to verify the presence of an array element

Question

Issue arises when TypeScript attempts to verify the presence of an array element

I am facing an issue with the following array declaration:

// Using const as I require it to be a specific type elsewhere
const fruits = ["strawberry", "banana", "orange", "grapefruit"] as const;

When attempting to check if an unknown value (possibly from an HTTP controller) exists in the array, like this:

const input: string = SomeRandomService.getMyString();

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

This results in the error message regarding .includes(input):

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

I do not understand why this error occurs. The code seems valid to me, as my intention is to ensure that the value is indeed one of those present in the array. How can I resolve this issue without resorting to using input as any)?

typescript

Answer 1

Answer №1

You have the ability to convert your fruits into a ReadonlyArray<string>, which comes with the includes method by default but cannot be modified.

// Declared as a constant since it needs to be used 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

Answer 2

You have the ability to convert your fruits into a ReadonlyArray<string>, which comes with the includes method by default but cannot be modified.

// Declared as a constant since it needs to be used 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

Answer 3

Answer №2

One approach to streamline complex logic is by encapsulating it within 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

Answer 4

One approach to streamline complex logic is by encapsulating it within 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

Issue arises when TypeScript attempts to verify the presence of an array element

Answer №1

Answer №2

Similar questions

Challenges with Type Casting in TypeScript

Issues encountered when setting up a Context Provider in React using TypeScript

Fetching JSON data from a Node.js server and displaying it in an Angular 6 application

Transform the JSON object into a TypeScript array

Can the type of a prop be specified in the parent component before it is passed down to the children components that utilize the same prop?

Combining the values of a particular key with duplicate objects into a single object within an array of JSON objects using Angular and Typescript

Creating a component with @input for unit tests in Angular can be achieved through the following steps

Obtain the Enum's Name in TypeScript as a String

Cached images do not trigger the OnLoad event

Tips for creating a script that waits for a specific amount of time before moving on to the next execution block in Protractor

Guide to adding jquery with typings installation

Internationalization in Angular (i18n) and the powerful *ngFor directive

I'm encountering an issue where my query parameter is not being accepted by the tRPC query request

What methods are available to enhance the appearance of a string with TypeScript Angular in Python?

Definitions for TypeScript related to the restivus.d.ts file

Methods for invoking a JavaScript function from TypeScript within an Angular2 application

The deployment of the remix is unsuccessful in Vercel, even though it functions perfectly during development. The error message states that 'AbortController' is not

Encountering a challenge when attempting to upgrade to Angular 9: Issue with transitioning undecorated classes with DI migration

The global CSS styles in Angular are not being applied to other components as expected

I am experiencing an issue with my service provider when it comes to displaying multiple navigator stacks