What methods can be used to define an object in TypeScript?

I am defining a FormField type with the following properties:

export type FormField = {
  name: string;
  type: string;
  mandatory: boolean;
  options?: FormFieldOptionsType;
  visibleIfIndIsVisible?: number;
  ind?: number;
  value?: string;
  dateCreatedAt?: string;
  selectItemOtherArbitraryValueEnable?: boolean;
  regex?: string;
  defaultFormFieldOptionId?: string;
};

To assign a value, use the following function:

const saveFormField = (key: string, value: any) => {
    let formField: FormField = {
      name: reloadProps?.formField?.name ?? "",
      type: reloadProps?.formField?.type ?? "",
      mandatory: reloadProps?.formField?.mandatory ?? false,
      regex: reloadProps?.formField?.regex ?? "",
      selectItemOtherArbitraryValueEnable:
        reloadProps?.formField?.selectItemOtherArbitraryValueEnable,
    };
    formField[key] = value;

However, when running yarn build, an error is raised. Do you know why?

./pages/[lang]/formFieldOptions/[...eventId_formFieldId].tsx:134:5
Type error: Element implicitly has an 'any' type because expression of type 'any' can't be used to index type 'FormField'.

  132 |         reloadProps?.formField?.selectItemOtherArbitraryValueEnable,
  133 |     };
> 134 |     formField[key] = value;
      |     ^

Answer №1

To define the saveFormField method, use the following syntax:

const saveFormField = (field: keyof FormField, data: any) => { }

Answer №2

Consider utilizing

assignValueToFormField(key as keyof FormField, value);

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

"CKEDITOR" is not defined in the ng2-ckeditor script

After completing the following steps: ng2-ckeditor Installation - JSPM : jspm install ng2-ckeditor=github:chymz/ng2-ckeditor - NPM : npm install ng2-ckeditor Creation of ts file: import {Component} from 'angular2/core'; import {CKEditor} fro ...

Change the background image on your iPhone and Android device using the Appcelerator app

I'm looking for a way to change the wallpaper on both iPhone and Android devices from within my app. I've searched online, but couldn't find any solutions using Appcelerator's APIs. Can anyone help? ...

What is the best way to alternate $httpBackend when[method] declarations in unit tests to handle multiple requests?

When conducting my testing, I set up the model data and mock the response: beforeEach(function(){ var re = new RegExp(/^http\:\/\/.+?\/users-online\/(.+)$/); $httpBackend.whenGET(re).respond({id:12345, usersOnline:5000}); }) ...

Guide to adding sound effects to your Vue 3 app using the Composition API

I'm having trouble setting up a basic button click feature in Vue 3 Composition API to play a sound effect. In my setup function, I have imported an mp3 sound effect from the assets folder and passed it into a ref method with an HTMLAudioElement type, ...

The result of Coordinates.speed is consistently null

I'm working on a project that involves changing the speed of background particles based on the user's device speed (like when they are in a car or bus). I thought the Geolocation API would be a perfect fit, specifically the Coordinates.speed prop ...

The jQuery preventDefault() method is preventing the blur event handler from functioning

I am currently developing an interactive web application located at (user: [email protected], password: demo). This application allows users to drag items with images and text from the sidebar onto the workspace on the right, resize them, and make ed ...

What is the best way to make an inner div fixed once I reach the bottom of the page?

I'm facing a challenge with my nested div setup: I want the inner div to be absolutely positioned, but when scrolling to the bottom it should switch to fixed positioning. Currently, it's set up as a sidebar, but I'd like it to scroll along w ...

Struggling to retrieve integer values from a JSON object array

I'm currently working on a function to iterate through an array of objects retrieved from the server. When I console.log the response, this is the structure I see. https://i.sstatic.net/ErOps.png This is the JavaScript function I've created for ...

Changing an element in an array by using a specific input

With the usage of either JavaScript or Jquery, I possess an array that has been arranged in accordance with Start Date (coordinates): [{ elem: '<div id="task7">', startDate: 864, endDate: 999, order: 0 }, { elem: '<div id ...

Ensure that useEffect is triggered before the render process is finished, or consider using an alternate method to achieve

How can I trigger functions to execute when state changes without waiting for the render cycle to complete and without using up memory with useMemo or useCallback? Is there a way to achieve this similar to useEffect, but more direct and efficient? ...

Updating a webpage using Ajax in Django

I've been diving into Django and am eager to implement ajax functionality. I've looked up some examples, but seem to be facing a problem. I want to display all posts by clicking on a link with the site's name. Here's my view: def archi ...

What is the method for extracting a value that is being displayed beneath a text in a React component using Selenium?

Attached is a screenshot showcasing HTML tags: Our task is to display the 3 within react-text. Here's the code snippet I attempted: WebElement MyText = driver.findElement(By.xpath("(//div[@class='badge-number'])[6]")); JavascriptExecut ...

My goal is to display the information retrieved from my AJAX response within my jQuery data table

I am attempting to display my AJAX response in a jQuery data table. The structure of my table is as follows: <div style="margin: 20px;"> <table id="example" class="display" style="width:100%"> ...

Expand the <div> by clicking on it, then hover away to return it to its normal size

One interesting feature I have on my website is a <div> that expands when clicked, and returns to normal size with another click. However, I am looking for something a bit different... What I want is for the <div> (with the class name .topHead ...

Oops! The Vue star rating encountered an error because it couldn't read the length property of an undefined value at line 26 of listToStyles.js

Encountering an issue with the getRating function in Vue while using the Vue-star-rating package in Laravel. Unsure of what the problem may be. getRating(){ var pathArray = location.pathname.split('/'); v ...

Reduce the size of JSON data in AJAX calls by compressing or minifying it

While examining code on Facebook, specifically the headers of AJAX requests/responses, I noticed that they are compressed or minified similar to CSS or JavaScript. For example: { id: 1000, username: "testing" } gets turned into: {a:1000,b:"testing"} I a ...

Handling generic types by identifying implementation details

In the process of developing a tool, I am faced with the task of resolving generic types for the final output. It's worth mentioning that I am making use of the ts-morph library. To illustrate, let's consider the following source code where the ...

Prevent the propagation of a particular CSS class's inheritance

I need to make modifications to an existing HTML5 app that features two unique themes. Here's an example of the current structure: <body class="theme1 theme2"> <div id="div1">I'm satisfied with both themes</div> <di ...

Jest - experiencing intermittent test failures on initial run, yet succeeding on subsequent runs

Writing tests with jest and supertest npm on a node server has been a challenge for me. When I try to run all the tests together, some of them fail inexplicably: https://i.sstatic.net/TWDVp.png However, if I selectively run only the failed tests in the t ...

Leveraging Express.JS middleware exclusively for specific routes

In order to further my understanding of NodeJS, I am currently working on developing an API using ExpressJS that can respond to web requests. Currently, the program includes three routes: '/login', '/register', and '/changePassword ...