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

Uploading Files with Angular 2 using AJAX and Multipart Requests

Similar to `util.inspect` in Node.js, Deno also has a function

How can I retrieve the `checked` state of an input in Vue 3 using Typescript?

What is the best way to globally incorporate tether or any other feature in my Meteor 1.3 TypeScript project?

How to set return types when converting an Array to a dynamic key Object in Typescript?

I am experiencing slow load times for my Angular 2 app when first-time users access it, and I am seeking assistance in optimizing its speed

How can one effectively outline the structure of a document within firestore?

Organize library files into a build directory using yarn workspaces and typescript

Is it feasible to have two interfaces in Typescript that reference each other?

Is it possible to lengthen a function in TypeScript?

Angular2: Unable to locate the 'environment' namespace

What steps should I take to resolve the issue of 'unable to locate the name 'OktaAuthService' error?

The error message "SyntaxError: Cannot use import statement outside a module" popped up while working with discord.js, typescript, heroku

Tips for fixing the error message "unable to access property 'property-name' of null"

Cucumber Wrangler

Having Trouble Adding Details to a New Cart for a User in Angular and MongoDB - What's Going On?

transform an array encoded in base64 format into a JSON object

What could be the reason for the Angular dropdown values not appearing?

Attempting to display two separate d3 line graphs within a single Ionic2 page

Problems with updating HTML/Typescript in Visual Studio and Chrome are causing frustration