TypeScript requires that the `includes` function must have the same type parameter for both input and

Question

TypeScript requires that the `includes` function must have the same type parameter for both input and

When working with TypeScript, I've encountered an interesting dilemma regarding the use of the Array.Prototype.includes function. It seems that this function requires me to pass in the same type as in the original array, but isn't the purpose of using includes to determine if a key of arbitrary string type exists in an array with a known type?

Let's consider the following code snippet:

type CONFIG_MODEL = {
  URL: string;
  Protocol: string;
  Port: number;
  Encrypted: boolean;
}

const ALLOWED_KEYS: (keyof CONFIG_MODEL)[] = ['URL', 'Protocol'];

function setup(configs: { [key: string]: string }) {
  Object.keys(configs).forEach(configKey => {
    if (ALLOWED_KEYS.includes(configKey)) {
      // do something
    }
  })
}

Link to TypeScript Playground

It turns out that TypeScript throws an error when trying to use includes, with the message:

Argument of type 'string' is not assignable to parameter of type 'keyof CONFIG_MODEL'

Any insights or suggestions would be greatly appreciated!

typescript

Answer 1

Answer №1

To enhance efficiency, consider looping through only the allowed keys instead of all object keys Here is an example:

type CONFIG_MODEL = {
  URL: string;
  Protocol: string;
  Port: number;
  Encrypted: boolean;
}

type AllowedKeys = Array<keyof CONFIG_MODEL>;

const ALLOWED_KEYS: AllowedKeys = ['URL', 'Protocol'];

const hasProperty=<Obj,Prop extends string>(obj:Obj,prop:Prop):obj is Obj & Record<Prop,string>=>
  Object.prototype.hasOwnProperty.call(obj,prop);

function setup(configs: { [key: string]: string }) {  
  ALLOWED_KEYS.forEach(elem=>{
    if(hasProperty(configs, elem)){
      // process the config
      const result = configs[elem] // valid
    }
  })
}

Answer 2

To enhance efficiency, consider looping through only the allowed keys instead of all object keys Here is an example:

type CONFIG_MODEL = {
  URL: string;
  Protocol: string;
  Port: number;
  Encrypted: boolean;
}

type AllowedKeys = Array<keyof CONFIG_MODEL>;

const ALLOWED_KEYS: AllowedKeys = ['URL', 'Protocol'];

const hasProperty=<Obj,Prop extends string>(obj:Obj,prop:Prop):obj is Obj & Record<Prop,string>=>
  Object.prototype.hasOwnProperty.call(obj,prop);

function setup(configs: { [key: string]: string }) {  
  ALLOWED_KEYS.forEach(elem=>{
    if(hasProperty(configs, elem)){
      // process the config
      const result = configs[elem] // valid
    }
  })
}

Answer 3

Answer №2

The as string[] conversion right before the .includes method in the code snippet below effectively handles the issue:

//type defined externally in original code
type ClassicalElement = 'earth' | 'water' | 'wind' | 'fire'; 
const classicalElements = ['earth', 'water', 'wind', 'fire'] as ClassicalElement[];
const isClassicalElement = function(
    possibleElement: string
): possibleElement is ClassicalElement {
    return (classicalElements as string[]).includes(possibleElement);
}

You can test this code snippet on TypeScript Playground using the following links: with and without encountering any errors.

Answer 4

The as string[] conversion right before the .includes method in the code snippet below effectively handles the issue:

//type defined externally in original code
type ClassicalElement = 'earth' | 'water' | 'wind' | 'fire'; 
const classicalElements = ['earth', 'water', 'wind', 'fire'] as ClassicalElement[];
const isClassicalElement = function(
    possibleElement: string
): possibleElement is ClassicalElement {
    return (classicalElements as string[]).includes(possibleElement);
}

You can test this code snippet on TypeScript Playground using the following links: with and without encountering any errors.

TypeScript requires that the `includes` function must have the same type parameter for both input and

Answer №1

Answer №2

Similar questions

What is the syntax for passing a generic type to an anonymous function in a TypeScript TSX file?

Troubleshooting Angular 2 with TypeScript: Issue with view not refreshing after variable is updated in response handler

The type of the element is implicitly set to 'any' because the expression 'keyof IMyObj' cannot be used to index the type

Interface of TypeScript Undetermined

Issue with Next.js: Router.push not causing page to refresh

How to bring in a class that was exported using `export = uuid` in Typescript

Implementing query parameters in a Deno controller

Issue: The TypeError reported is due to the absence of any definition for "_co.category.category_type"

Vue - Troubleshooting why components are not re-rendering after data updates with a method

Error in Typescript: The property 'a' is not defined in the type 'A'

Exploring the use of global variables in React

A guide on implementing typescript modules within a Node.js environment

The function is receiving an empty array of objects

Error: The value of "$tweetId" cannot be parsed as it is set to "undefined". Please ensure that string values are properly enclosed

Organize items within an array based on dual properties rather than a single one

Is there a way to deactivate a tab when it's active and reactivate it upon clicking another tab in Angular?

The KeyValuePair<string, Date> type in Typescript cannot be assigned to the KeyValuePair<number, string> type

Encountering the error "TypeError: Unable to access property 'controls' of undefined" when utilizing formArray in Reactive forms

Angular 4: Utilizing a class with a constructor to create an http Observable model

Utilizing a single component for various purposes with diverse tags in react