This is the code for my class:
class Point{
coordinates: [number, number, number];
constructor(coordinates: [string, string, string]) {
this.coordinates = coordinates.map((coordinate) => {
return Math.round(parseFloat(coordinate) *100)/100;
})
}
}
The error message I'm seeing is:
`Property '0' is missing in number[]`
I am wondering what could be causing this issue. Can you help?
coordinates is defined as a tuple type in Typescript. Tuples inherit from arrays, and the methods available on tuples actually originate from Array<T>. While this setup is convenient, when these methods are called, they return arrays instead of tuples. So, if you apply the map method to a tuple with 3 elements, you might anticipate a tuple output with 3 elements, but it will actually be an array.
To address this, a simple solution is to use type assertion to inform the compiler that the result will be a tuple containing 3 numbers:
this.coordinates = coordinates.map((coordinate) => {
return Math.round(parseFloat(coordinate) * 100) / 100;
}) as [number, number, number];
Edit
An alternative approach involves extending the global interface of Array to accurately define the type of the result from the map operation:
interface Array<T> {
// Support for up to 3 tuple items, can be expanded
map<U>(this: [T], callbackfn: (value: T, index: number, array: T[]) => U, thisArg?: any): [U];
map<U>(this: [T, T], callbackfn: (value: T, index: number, array: T[]) => U, thisArg?: any): [U, U];
map<U>(this: [T, T, T], callbackfn: (value: T, index: number, array: T[]) => U, thisArg?: any): [U, U, U];
}
class Point {
coordinates: [number, number, number];
constructor(coordinates: [string, string, string]) {
// Now functions as intended
this.coordinates = coordinates.map((coordinate) => {
return Math.round(parseFloat(coordinate) * 100) / 100;
});
}
}
This GitHub issue contains a valuable discussion on this topic.
I am facing an issue with reusing a component called wrapper with different child components. I found some helpful resources such as this SO question and this article. However, these only address cases where the child component is known in advance. In my s ...
Over on the TypeScript's Decorator reference page, there is a code snippet showcasing how to override a constructor with a class decorator: function classDecorator<T extends {new(...args:any[]):{}}>(constructor:T) { return class extends con ...
Currently, I am utilizing the mongodb driver to establish a connection with mongo: public listUsers(filterSurname?:string):any { if (this.connected) { debug.log(this.db); var results; this.db.collection(' ...
Can someone help me troubleshoot why my code is not entering the on click function as expected? What am I missing here? let allDivsOnTheRightPane = rightPane.contents().find(".x-panel-body-noheader > div"); //adjust height of expanded divs after addi ...
In my component, I have a variable named "myVar" that determines which ng-template should be displayed. Let's consider the following example of a component template: <div *ngIf="myVar; then myVar; else nothing"></div> <ng-template #foo ...
After successfully logging in using a service in Angular, I am encountering an error while trying to hide the signin and signup links. The error message can be seen in this screenshot: https://i.stack.imgur.com/WcRYm.png Below is my service code snippet: ...
Issue with Generating PDF Using Angular 8, JSPDF, and JSPDF-AutoTable I am facing a challenge with exporting/generating a PDF based on an HTML grid. I need to make some DOM changes with CSS, remove toggle buttons, alter the header, etc. However, all the s ...
I am struggling to figure out how to access the image gallery from a Progressive Web App (PWA). The PWA allows me to take pictures and upload them on a desktop, but when it comes to a mobile device, I can only access the camera to take photos. I have tried ...
I am attempting to construct an object where the keys are derived from a string union type and the values are functions. The challenge lies in wanting the function typings to be determined dynamically from each function's implementation instead of bei ...
In the flow, I am able to create a dynamic literal type in this manner: const myVar = 'foo' type X = { [typeof myVar]: string } const myX: X = { foo: 1 } // will throw, because number const myX: X = { foo: 'bar' } // will not throw ...
Is it possible to retrieve the reflect-metadata from an instance of a class? The documentation provides examples that suggest it should be achievable, but when I attempt to do so, I receive undefined as a result. Strangely enough, when I request the metada ...
I am attempting to implement a feature in Angular that prevents double clicking on buttons using directives. Below is the pertinent code snippet from my template: <button (click)="onClickFunction()" appPreventDoubleClick>Add</button> And her ...
In the Angular 2 documentation, they provide examples that also use HTTP for communication. import { HTTP_PROVIDERS } from '@angular/http'; import { HeroService } from './hero.service'; @Component({ selector: 'my-toh&ap ...
While exploring the content metadata component of Alfresco ADF, I came across this typescript function that has left me puzzled: private saveNode({ changed: nodeBody }): Observable<Node> { return this.nodesApiService.updateNode(this.node.id, nodeB ...
Is there a better way to type the MUI Chip prop color when the actual value comes from an object? Using any doesn't seem like a good option. Additionally, is keyof typeof CHIP_COLORS the correct approach for typing? import { Chip, Stack } from "@ ...
If I have an array of JSON objects, how can I cast or assign the Report class to it? console.log('jsonBody ' + jsonBody); // Output: jsonBody [object Object],[object Object] console.log('jsonBody ' + JSON.stringify(jsonBody)); // Outpu ...
Here is my TypeScript function: function more(argv: {a: number, b?: string}): number{ console.log( b) return a } I am invoking the function this way: let arc = more({a: 5}) Unexpectedly, I see 10 in the console. I was anticipating undefined ...
Struggling with displaying images in my Ionic and Angular pokedex app. The JSON file data service pulls the image paths, but only displays the file path instead of the actual image. Any ideas on what might be causing this issue? Sample snippet from the JS ...
Currently, I am attempting to create a function where the return type is determined by a generic argument. Let me share a code snippet to illustrate: type ABCDE = 'a' | 'b'; function newFunc<U extends ABCDE>(input: U): U extends ...
I have implemented a select-box that includes options, labels, optgroups, and values. Is my approach correct or is there something wrong with the way I have defined my types? interface Option { label: string value: string selected?:boolean mainGrou ...