The element's type is implicitly set to 'any' as the expression of type 'string' is unable to index the 'PointDto' type

Comparing the values of x1, y1 and z1 in PointDto objects (point1 and point2)

Example :-
 point1 =>   PointDto: 
      {
        x1: "1.000000",
        y1: "1.0",
        z1: undefined
        pointIndex: 0,
      }
      
point2 =>   PointDto: 
      {
        x1: 1,
        y1: 1,
        z1: undefined
        pointIndex: 1,
      }   

const keys: any = {
  "x1": "x1",
  "y1": "y1",
  "z1": "z1"
}


const isEqual = (point1: PointDto, point2: PointDto) => {

  return keys.every((key :string) => (isNaN(point1[key]) ? point1[key] : +point1[key]) === point2[key]);

}

Encountered a typescript error while writing (point1[key]), any suggestions on how to address this issue?

'Element implicitly has an 'any' type because expression of type 'string' can't be used to index type PointDto. 

No index signature with a parameter of type 'string' was found on type PointDto.ts(7053)

typescriptecmascript-6

Answer №1

It appears that there is a syntax error in the code you provided. However, in order to avoid the error message mentioned below:

Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'PointDto'. No index signature with a parameter of type 'string' was found on type 'PointDto'.

You must specify to the ts compiler that key is a key within PointDto (using keyof). So instead of

(key :string) => isNaN(point1[key]) ? point1[key] : +point1[key]) === point2[key]);

Use the following code snippet:

(key :string) => {var k = key as keyof PointDto; (isNaN(point1[k]) ? point1[k] : +point1[k]) === point2[k]});

One more thing to note: keys is not an array and does not possess an every function.

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

The element type 'x' in JSX does not offer any construct or call signatures

I have recently imported an image and I am trying to use it within a function. The imported image is as follows: import Edit from 'src/assets/setting/advertising/edit.png'; This is the function in question: function getOptions(row) { ...

javascriptreactjstypescriptnext.js

What is the best way to eliminate a particular element from an array produced using the .map() function in

I am experiencing an issue with my EventCell.tsx component. When a user clicks on the component, an event is created by adding an element to the components state. Subsequently, a list of Event.tsx components is rendered using the .map() method. The problem ...

javascriptreactjsarraystypescriptvite

Quirky happenings in Typescript

TS Playground function foo(a: number, b: number) { return a + b; } type Foo1 = typeof foo extends (...args: unknown[]) => unknown ? true : false; // false type Foo2 = typeof foo extends (...args: any[]) => unknown ? true : false; // true What is ...

typescript

The TypeScript error code TS2339 is indicating that the 'modal' property is not recognized on the type 'JQuery'

I'm currently utilizing Typescript with AngularJS and have encountered an issue with modals when using the typed definition of jQuery library. The specific error message I am receiving is: 'error TS2339: Property 'modal' does not exist ...

jquerymodal-dialogtypescript

Is there a way to modify the style within a TS-File?

I've created a service to define different colors and now I want to set separate backgrounds for my columns. However, using the <th> tag doesn't work because both columns immediately get the same color. Here's my code: color-variatio ...

javascriptangulartypescriptmat-table

Adding existing tags to Select2 in Angular2 can be accomplished by following these steps:

HTML: <select data-placeholder="Skill List" style="width:100%;" class="chzn-select form-control" multiple="multiple"> <option *ngFor="#skill of allSkills" [ngValue]="skill">{{skill}} </option> </select> TS: allSkills = [& ...

javascriptangularjsangulartypescript

In Typescript Angular, how can I invoke a function on each element of an array as part of a sequence of Observables, and then return the total number of successful operations?

I am faced with the task of creating a parent record followed by multiple child records (order does not matter), and ending with a logging action. I am knowledgeable on how to chain single actions on an observable by mapping them together. For example: - ...

angulartypescriptrxjsfork-join

Retrieve information from an XML document

I have some XML content that looks like this: <Artificial name="Artifical name"> <Machine> <MachineEnvironment uri="environment" /> </Machine> <Mobile>taken phone, test when r1 100m ...

javascriptregextypescript

Determining the return type of a function by analyzing its parameters

Let's consider the following scenario: export function bar(bar?: string) { return bar ? { bar } : {}; } const B1 = bar(); const B2 = bar("z"); Upon compilation, the types inferred for both B1 and B2 are: { bar: string; } | { bar? ...

typescript

Ionic: Automatically empty input field upon page rendering

I have an input field on my HTML page below: <ion-input type="text" (input)="getid($event.target.value)" autofocus="true" id="get_ticket_id"></ion-input> I would like this input field to be cleared eve ...

angulartypescriptionic-framework

Invalid Argument: Cannot use an empty value with the AsyncPipe at invalidArgumentError

I'm facing an issue with extracting a string value from the Observable using the pipe and map operators. Despite my efforts, I always end up with an empty string as the result. I'm hoping that someone can assist me in understanding the cause of t ...

angulartypescript

Having trouble navigating using router.navigate in the nativescript-tab-navigation template?

I have everything properly configured in my routes and no errors are popping up. When the initial tab is loaded, I am attempting to automatically switch to the second tab based on whether the user is logged in or not. tabs-routing.module.ts file: import ...

angulartypescriptnativescript

A guide to validating a pair of fields within a single object using React hooks and the Yup library

{ label: 'Room', name: 'room', rule: yup.array(yup.object()).required(), renderer: (data: any) => { const { control, register, errors } = useFormContext(); return ( ...

javascriptreactjstypescriptyupreact-hook-form

Is there an easier method to utilize ES6's property shorthand when passing an object in TypeScript, without needing to prefix arguments with interface names?

When working with JavaScript, I often find myself writing functions like the one below to utilize ES6's property shorthand feature: function exampleFunction({param1, param2}) { console.log(param1 + " " + param2); } //Usage: const param1 = "param1" ...

javascripttypescript

Angular 2 Validation Customizer

Recently, I created a web API function that takes a username input from a text field and checks if it is already taken. The server response returns Y if the username is available and N if it's not. For validating the username, I implemented a Validat ...

formsangularvalidationtypescript

Ecommerce Template for Next.js

I am new to the world of web development and I have a project involving customizing a Next.js ecommerce template. Since I'm still learning programming, I would appreciate a simple summary of the steps I need to take in order to achieve this. The speci ...

typescriptnext.js

Having trouble rendering Next.JS dynamic pages using router.push()? Find out how to fix routing issues in your

The issue I am facing revolves around the visibility of the navbar component when using route.push(). It appears that the navbar is not showing up on the page, while the rest of the content including the footer is displayed. My goal is to navigate to a dy ...

htmltypescriptnext.jsroutes

Tips for extracting individual keys from an object and transferring them into a separate object

I have an array of objects containing all the form data. However, I need to format this data differently before sending it to the backend. Each object needs to be fetched separately and then pushed into another object as shown below. The current data looks ...

angulartypescript

Clicking on an Angular mat-checkbox requires two clicks to toggle between checked and unchecked states

My checkboxes are populating dynamically, but I am facing an issue when trying to unselect them. It takes two clicks to uncheck the checkbox. enter code here <mat-tree [dataSource]="dataSource" [treeControl]="treeControl"> ...

javascriptangulartypescriptangular-materialmaterial-design

Tips for concealing tick labels in d3 using TypeScript

When trying to hide tick labels by passing an empty string to the .tickFormat("") method, I encountered an issue with Typescript. The error message received was as follows: TS2769: No overload matches this call. Overload 1 of 3, '(format: null): Axi ...

javascriptreactjstypescriptd3.js