Consider this scenario:
type Example = {
x: string,
y: number
}
const a: Example = {
x: "x",
y: 1
}
const b: Example = {
x: "y",
y: 2
}
const issue = (keys: (keyof Example)[]) => {
keys.forEach(key => {
a[key] = b[key]
})
}
An error with code TS2322 has been encountered and it's proving difficult to troubleshoot. (or to explain in more detail).
Here is the complete error message:
Type 'string | number' is not assignable to type 'never'.The issue lies in how keyof dummy specifies 'a' | 'b', without properly distinguishing between them. TypeScript lacks the intelligence to understand that if a[key] represents a string, then b[key] will also represent a property containing a string. (It currently interprets b[key] as string | number, which cannot be assigned to a value that is strictly either a string or a number, but not both.)
To address this, you must utilize generics to correctly type the key and allow for the assignment:
const problem = <T extends keyof Dummy>(key: T) => {
a[key] = b[key];
}
If dealing with an array of keys instead, it may be beneficial to use Object.fromEntries to form a partial object beforehand, followed by employing Object.assign:
const problem = (keys: (keyof Dummy)[]) => {
const partial = Object.fromEntries(
keys.map(key => [key, b[key]])
);
Object.assign(a, partial);
}
My dilemma lies in my app setup which involves a Node.js runtime stack serving a ReactJs Typescript application. I have set some API URLs in the application settings, and attempted to access them in ReactJs components using process.env.REACT_APP_URL, only ...
Currently in the process of developing a Headless Shopify project using this starter: https://github.com/vercel/commerce. While testing the demo environment, I encountered some bugs that seem to be specific to iOS 14 or newer. The primary issue stems from ...
Searching for a similar type structure: type ArgsType<F extends Function> = ... which translates to ArgsType<(n: number, s: string)=>void> will result in [number, string] or {n: number, s: string} Following one of the provided solu ...
If you're familiar with Redux-Observable, I have a method that accepts an observable as input and returns another observable with the following type signature: function (action$: Observable<Action>): Observable<Action>; When this method r ...
How can I ensure that a spinner is only shown during an HTTP service call and dismissed when my component receives data? To address this issue, I implemented a cache service to store data fetched from the HTTP service for future use. However, I want to sh ...
I am looking for a way to transform my TypeScript files into JavaScript files smoothly. The conversion process goes well with the command: nodemon --watch assets/ts --exec tsc assets/ts/*.ts --outDir assets/js However, I have encountered an issue where im ...
We recently consolidated multiple Angular 16 projects into one NX mono repository using Angular 17. Everything is functioning properly, EXCEPT we have noticed a peculiar change in behavior with our models. Previously, unset properties were simply not displ ...
Is there a way to pass type information for a class, indicating to the compiler that the provided parameter is not an instance of a class but rather the definition of the class itself? import * as Routes from '../routes'; import * as Entities fr ...
With some experimenting on WebRTC, I found that the ondatachannel callback takes a function, but I'm wondering if it's possible to use a method of a Typescript class instead. Can someone please assist me with this? export class MainComponent imp ...
Operating on Windows 10 Enterprise, After investing several hours and experimenting on various VMs, Interesting Observation #1 Upon opening a .ts file in vscode, it appears to be recognized as TypeScript 2.3.4 as per the screenshot provided below: http ...
I have a list of essential items and I aim to generate a record based on the elements within that list. Each item in the required list will correspond to an empty array in the exist record. Essentially, I am looking to condense the following code into one ...
Is it possible to pass two arguments with ngFor? Here is an example that I would like to achieve: <mat-card *ngFor="let room of arr; let floor of floorArr"> <mat-card-content> <h3>Room Number: {{room}}</h3> <p>Floor ...
Currently in the process of developing a parser that generates an AST and then traversing it through different passes. The simplified AST structure is as follows: type LiteralExpr = { readonly kind: 'literal', readonly value: number, }; type ...
While I realize this may not be the typical scenario, please listen to my situation: I am using Strapi and creating components and collections. One of these collections needs to include code snippets (specifically typescript) that I have stored in a GitH ...
I am currently testing an observable feature from a service in Angular. This particular observable will output a boolean value based on the queryParam provided. For effective testing of this observable, it is essential to mock the queryParam value. Howev ...
What is the best way to disable all buttons in a menu when one of them is clicked? Here is my code: <div class="header-menu"> <button type="button"> <i class="fa fa-search" matTooltip="Filter"& ...
I need help adding a visitor counter to my website. I initially tried using the API from , but it seems that the server is currently down and I can no longer use it. I found another API at . How can I retrieve count data from this specific API endpoint ...
Currently, I have a functional component set up for the Signup page. My goal is to define props within this component so that I can pass the necessary values to it from another component. This is my current approach: export default function SignupPage({mod ...
Currently I am working with Angular 4.4.3 reactive forms to create custom validation for a group of controls within a form. As per the documentation on AbstractControl.setErrors, this method updates the errors property of the AbstractControl that it's ...
Exploring the functionality of the swagger plugin provided by nestjs, I am eager to try it out. While it works smoothly when defining a class like CreateUserDto, my goal is to incorporate types from a third-party library - specifically @adyen/api-library. ...