Error in TypeScript when type-checking a dynamic key within a record

When explicitly checking if a property is not a string using a variable key, Typescript throws an error saying

Property 'forEach' does not exist on type 'string'.

let params: Record<string, string | string[]>;
const key = 'test';

// This code snippet works
if (params && typeof params['test'] !== 'string') {
  params['test'].forEach((element: string) => {});
}

// However, this code snippet fails
if (params && typeof params[key] !== 'string') {
  // Error occurs with message: "Property 'forEach' does not exist on type 'string'."
  params[key].forEach((element: string) => {});
}

What is the correct way to type/check that a property is an array and run forEach on it?

Answer №1

The issue here is that the Typescript compiler struggles with these patterns because technically, you can modify the value of params[key] at any time. This is why typeguard fails in this scenario, at least in previous versions of Typescript. It's possible that there is a different solution available now.

To address this, you can store the value of params[key] in a variable and then perform the necessary checks:

let params: Record<string, string | string[]> = {}
const key = 'example';


const value = params[key]
if (typeof value !== 'string') {
  value.forEach((element: string) => {});
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Extract the Date portion from a DateTime object in ASP.NET MVC

I am currently facing an issue with a property in my Model [Display(Name = "День рождения")] [DataType(DataType.Date)] public System.DateTime Birthday { get; set; } When trying to save the value to the database using AJAX, it is also ...

The issue with the trigger function in jQuery is specifically affecting Chrome browser

When attempting to load a modal window using a link like , I am encountering issues in Chrome, Safari, and IE. However, Opera and FF are functioning properly. The modal window is being called as an iframe. Other buttons that are supposed to open the modal ...

Is it necessary to utilize Babel with Node.js?

I am aware that Node.js fully supports ES6 now, using version 7.2.1. Recently, I was advised by someone that the current ES6 implementation in Node.js may not be production ready and that I might need to use Babel for a more robust ES6 set-up. After visit ...

Attempting to replace the checkbox image resulted in no changes

<?php require 'includes/configs.inc.php'; ?> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title><?php $site_name ?></titl ...

The 'component' property is not found in the 'IntrinsicAttributes' type in this context

I am facing an issue with a component that is not compiling properly: export default function MobileNav({routes, currentRouteIndex, handlePressedRoutedIndex}: MobileNavProp) { ... return ( <React.Fragment> ... ...

A unique column in the Foundry system that utilizes function-backed technology to calculate the monthly usage of engines over a

In my dataset of ‘Engine Hours’, I have the following information: Engine# Date Recorded Hours ABC123 Jan 21, 2024 9,171 ABC123 Dec 13, 2023 9,009 ABC123 Oct 6, 2023 8,936 XYZ456 Jan 8, 2024 5,543 XYZ456 Nov 1, 2023 4,998 XYZ456 Oct 1 ...

Encasing newly inserted child components within my designated slot

If I have a component with a single slot and instead of simply rendering all its children, I want to wrap each element individually, the following approach can be taken: Vue.component('MyElement', { render: function(createElement){ for (l ...

Troubleshooting a Vue 2 component's prop receiving an incorrect value

I'm currently working on creating a menu that navigates between categories. When a category has a sub-category, it should return a boolean value indicating whether it has a sub-category or not. <template> <select><slot></slot ...

Guide on utilizing two separate collections to store different types of data for an application's users

I am looking to create a database collection similar to {username : "jack", password : "pass"} for storing doctors' login information. I believe I can achieve this during signup by implementing the following code: var Doctor = mongoose.model("doctor" ...

Switch out multiline text with javascript

Could someone assist me with this question? I am attempting to locate and replace specific code within a JavaScript file. The code is included in an AJAX response that contains a significant amount of HTML code. After retrieving the AJAX response, I stor ...

Choose all the checkboxes that use Knockout JS

Struggling with implementing a "select all" checkbox feature as a Junior developer on a complex project utilizing knockout.Js and Typescript. I can't seem to figure out how to select all existing checkboxes. Here is the HTML: <td> <inp ...

What sets apart custom events from postMessage?

If you want to send a message to another document, such as an iframe, there are two functions you can use - postMessage and createEvent. Consider the following: var event = document.createEvent('CustomEvent'); event.initCustomEvent("message", tr ...

Is there a way to retrieve the data instead of receiving an undefined result when making an asynchronous call?

subject in user.subjects = subjects below is undefined instead of being an array of subjects. Context: I am working with three database tables - users, subjects, and a relationship table between users and subjects known as users_subjects. The objective i ...

What is the reason for sending back an array with no elements in AJAX

I am facing a perplexing issue where my function is returning an empty array when it should contain values. This has me scratching my head, as initially the array 'storearray1' does contain values, but upon subsequent usage, it appears empty. I&a ...

The system is unable to locate the module at 'C:UsersSanjaiAppDataRoaming pm ode_modulesprotractorinprotractor'. This error originates from internal/modules/cjs/loader.js at line 960

After running "protractor conf.js" without any issues, I decided to install protractor globally using the command "npm install -g protractor". However, after installing protractor globally, I encountered the following error message: internal/modules/cjs/lo ...

Vue JSON Response Guide

Inquiry from a beginner. My goal is to display the name of a city using props. When I use {{ props.feed.location }} to fetch: { "latitude": 50.85, "longitude": 4.35, "name": "Brussels, Belgium", "id": 213633143 } However, when I attempt {{ props.feed.l ...

Combine React 17 with webpack 5 and babel-plugin-react-css-modules, enabling the use of CSS modules with stylename functionality

I am in the process of setting up a new React application using the latest technologies available, including React 17, Webpack 5, and other essential modules. My goal is to implement CSS modules utilizing the styleName concept with the help of babel-plugi ...

A blank canvas emerges upon utilizing the Angular-Bootstrap Carousel feature

This is my first experience using Angular with Bootstrap's carousel component, and I'm encountering a peculiar issue where a white slide appears before each transition (refer to the GIF below). Despite following the setup instructions on ng-boots ...

Vue main component fails to detect emitted events from child component

I am working on a website that will showcase multiple cards which expand when selected. Here is the code for the card component: <template> <v-card class="mx-auto" max-width="90%" min-height="6 ...

Error: Angular JS Service is undefined

I'm currently working on creating an array in my application that is universally accessible through services. Additionally, I have implemented ui-router in my application. In the app.js file, I define the service like this: myFamilyApp.service(&apos ...