Looking to create an array of types based on object properties:
type T = {
a: number | string;
b: string | number;
c: number;
d: boolean;
};
Desired Output:
[number | string, string | number, number, boolean]
Intending to use this as a type for spreading arguments in a function:
function fun(...args: values from T) {
const [a, b, c, d] = args;
}
fun("a", "b", 8, true);
It seems impossible to determine the order of the array args. When trying to spread the args into an array and assigning it a type of Array<T[keyof T]>, TypeScript will merge all the types together as it cannot accurately narrow down the type for each individual item in the array. You can check out this behavior on the playground.
function fun(...args: Array<T[keyof T]>) {
const [a, b, c, d] = args;
}
https://i.stack.imgur.com/Kao7a.png
The inferred types show that args is essentially evaluated as
<number | string | boolean>[]To address this issue, you can explicitly specify a fixed number of arguments by passing all 4 arguments as a single object. Check out the modified code on the playground.
function fun({ ...args }: T) {
const { a, b, c, d } = args;
}
fun({
a: 'a',
b: 'b',
c: 8,
d: true
});
By deconstructing the args object, you will get the correct typings:
JavaScript does not guarantee the ordering of object properties, making it difficult for TypeScript to determine how named properties correspond to ordered values.
How do you anticipate this example functioning? What should the order of the arguments be? It's rather ambiguous.
interface HasID {
id: number
}
interface Message extends HasID {
message: string
}
In my opinion, a less dynamic approach might be more reliable, like explicitly extracting each property for every argument:
type T = {
a: number | string;
b: string | number;
c: number;
d: boolean;
};
function fun(a: T['a'], b: T['b'], c: T['c'], d: T['d']) {
var obj: T = { a, b, c, d }
}
fun("a", "b", 8, true);
One potential solution is to utilize Object.values(objectName) in order to transform your object into an array format.
After updating my global angular-cli version to 8, I encountered an error in IE11 when building my project in production mode. Interestingly, the project works fine in Chrome. The error message for the production version is as follows: I also checked th ...
I am currently developing a class system using Typescript. The main structure consists of an abstract class called Component, which includes a static method called create(). This method is utilized on child classes to generate specific instances. abstract ...
Trying to create a dynamic row table with input fields in all cells. The loaded data is static, and I'm facing issues adding more data in the view. However, the functionality to add and delete rows is working fine. I have experimented with ngModel and ...
Is there a way to declare a Prop using vue-property-decorator in a class-based component without the need to initialize it? Currently, I'm facing a dilemma: If I don't provide an initializer, TypeScript throws an error during compilation: ...
I'm attempting to generate an MD5 hash from the content of an uploaded file. I am trying to set a global declaration to be used within functions, but I encounter an error when trying to utilize it: The error message states - Variable 'hasher&apos ...
In the documentation for Chart.js, I found a reference to an onClick function that is triggered whenever a click event occurs on the chart. The code snippet provided looks like this: options: { onClick: this.Function } Function(event, array){ ... } ...
Looking to extract language information from a filename? Check out this simple construct: The structure of my language.ts model is as follows: export interface Language { language?: string; region?: string; } The function designed for parsing the fi ...
Our redux-saga generator has multiple yield statements that return different results. I am struggling with typing them correctly. Here's an illustration: const addBusiness = function* addBusiness(action: AddBusinessActionReturnType): Generator< ...
Recently, I made the switch to EndeavourOS, which is based on Archlinux. I completed all my installations without any issues and attempted to create a new NestJs project after installing NVM, Node's latest version, and the NestJs/cli. However, when I ...
When attempting to connect to a Redis instance hosted on redislab, an error message is received indicating Redis ready ReplyError: NOAUTH Authentication required. const pubClient = createClient({ url: `${config.redisLabHost}:${config.redisLabPort}` }); pub ...
Currently, I am working on developing a horse race command for my discord bot using TypeScript. The code is functioning properly; however, there is an issue with updating an embed that displays the race and the participants. To ensure the update works co ...
I am facing an issue with a foreach loop in my code. I have a new temp array created within the loop, followed by a nested foreach loop. However, when trying to access the temp array inside the nested loop, I encounter a "variable not available" error. le ...
Feedback is welcomed on the efficiency of the following JavaScript/TypeScript solutions: function whatever(param) { if (param === x) { doStuff(); } } or function whatever(param) { if (param !== x) { return false; } doStuff(); } The se ...
Is it possible to listen to an event triggered in AngularJS using regular JS (outside of Angular)? I have a scenario where an event is being emitted using RxJS in Angular 2. Can I observe that event from pure JS? Here's some example pseudo code: imp ...
Currently, I am facing a challenge in performing addition on currency prices stored as an array of objects. The issue arises from the fact that the currency type can vary among 3 different types within the array of objects. The main hurdle I encounter is ...
After executing the ninth command to install debank-open-api, I encountered an error while running the code in my index.js file. To install debank-open-api, I used the following command: npm install debank-open-api --save Upon running the following code ...
Incorporating the NestJS framework into my project and utilizing Cash Manager to connect with Redis cache. Successfully connected with Redis, however encountering an error when attempting to use methods like set/get which shows 'set is not a function& ...
My current scenario is as follows: abstract class A implements OnInit{ ngOnInit() { this.method(); } private method() { // carrying out tasks } } class B extends class A implements OnInit { ngOnInit() { thi ...
Context Attempting to utilize a SVG component in React Native with the xlinkHref property within an Image tag. The SVG file was converted into a React Native Component (TSX) using the tool provided at . While simple SVG icons have been successfully used be ...
I'm looking to filter a list of entity ids using query builder in an efficient way. Here's the code snippet I have: await this._productRepo .createQueryBuilder('Product') .where('Product.id IN (:...ids)', { ids: [1, 2, 3, 4] ...