Please review this TypeScript code snippet (Version 3.8.3) on the playground:
interface TT { key: string };
let p1P: Promise<TT | void>;
let p2P: Promise<TT>;
(async () => {
const [p1, p2] = await Promise.all([p1P, p2P]);
// EXPECTED TYPES OF p1 and p2
// const p1: void | TT
// const p2: TT
// ACTUAL TYPES
// const p1: void | TT
// const p2: void | TT
});
Can you explain why the void type is being added to the p2 variable after the await keyword?
When utilizing the Promise.all function without explicitly defining the array type, TypeScript automatically infers it as a union of all its value types:
const arr = [promise1, promise2];
// is interpreted by Typescript as:
// const arr: Promise<void | T>[]
// This dynamic typing can be advantageous for modifying the array, such as:
// arr.push(promise3);
If you wish to specify that each index in the array only contains the respective value at that position, use as const. This will prevent widening the array items' type, ensuring the resolved values are correctly typed:
const [value1, value2] = await Promise.all([promise1, promise2] as const);
When using static HTML, it's quite simple to integrate Air Datepicker by following the documentation available at : <html> <head> <link href="dist/css/datepicker.min.css" rel="stylesheet" type="text/css"> <scr ...
As a newcomer to Angular, I decided to take on their tutorial with a few modifications. I have created an array as follows: export const HEROES: Hero[] = [ { id: 11, name: 'Mr. Nice' }, { id: 12, name: 'Narco' }, { id: 13, name: ...
Struggling to implement bootstrap's grid layout system in Angular2 with a list of objects. Any tips or guidance would be greatly appreciated! If I was using HandlebarsJS, I could achieve this layout with the following code: {{#for elements}} {{# ...
I am having trouble displaying my JSON data in my application. I have imported the HttpClientModule in app.module.ts, but I keep getting an error that says: "" ERROR Error: Cannot find a differ supporting object '[object Object]' of ty ...
I'm currently working on a function that has the capability to call multiple APIs while providing strong typing for each parameter: api - which represents the name of the API, route - the specific route within the 'api', and params - a JSON ...
Upon upgrading rxjs from version 6.6.6 to 7.4.0, an error surfaced in my combineLatest function. searchQuery = new FormControl(null); searchStatus = new FormControl<UserStatus>('ALL'); searchParams$ = combineLatest( this.searchQuery.valu ...
My current task involves testing an Angular (4.1) service that looks like this: @Injectable() export class JobService { private answerSource = new Subject<AnswerWrapper>(); answer$ = this.answerSource.asObservable(); answer(answer: AnswerWra ...
Here's an example of an enum: export enum Colors { RED = "RED COLOR", BLUE = "BLUE COLOR", GREEN = "GREEN COLOR" } Can you help me figure out how to retrieve the enum key based on a specific value? For instance, if I input "BLUE COLOR", ...
I am working on my first angular2 application with typescript. I have successfully fetched results using fetchApi but I am struggling to display them in the views. Can someone please guide me on how to present my data in the views? Thank you. App.componen ...
I recently came across an article on Firebase task functions published by Google, where it was mentioned that tasks should be dispatched in a first-in-first-out (FIFO) order. Despite trying different settings, the tasks are not being processed in the corre ...
I want to create a Union Type that is dependent on a nested property within my object. Take a look at the example provided below: type Foo = { abilities: { canManage: boolean } } type Bar = { abilities: { canManage: boolean ...
Currently, I'm enrolled in an online Angular course to brush up on my skills. However, during one of the initial classes, I encountered an error while declaring an interface. interface face{ name: string; address: string; } The error message ...
Currently, I am in the process of integrating a GTM snippet into my Angular project. However, I have noticed that when the page is hard reloaded, it pushes data but does not do so during normal navigation. I have already added the GTM snippet provided by ...
Currently, I am working on integrating storybook with antdv. However, when importing a tsx file that contains jsx within the button.stories.js file, I encountered an error stating "ReferenceError: React is not defined". You can view the error here. It is i ...
My journey with the Typescript language has just begun, and I am excited to dive deeper into it. Currently, I am working on a SPA-Wordpress project as a hobby using Vite (VueJS). However, I am facing some challenges with the syntax when transitioning from ...
I encountered an issue while attempting to establish a connection with the database using ormconfig.js and configuring .env files. The error message I received was: Error: connect ECONNREFUSED 127.0.0.1:3000 at TCPConnectWrap.afterConnect [as oncomplete] ( ...
After using eslint in vscode on Apple M1 Pro chips, I encountered an issue. I was able to execute eslint via the command line without any problems: > eslint app.js /playground/nodejs/eslint-demo/app.js 1:7 error 'a' is assigned a value ...
Looking for a way to pass additional data to another page when clicking on an item. I attempted to extend the father class to the child class, but it significantly slowed down the process due to the frequent class calls. This application is a dashboard w ...
I've hit a roadblock with a straightforward problem, and despite my best efforts, I haven't been able to find a solution online. Here's the code that I'm struggling with: const URL = 'http://(...)/scripts/Fiabilisation_Unique.php& ...
Whenever a new document is created from a model in Mongo, an ObjectId is automatically generated by the system and stored under the key "_id". If the _id: ObjectId is not explicitly defined in the model, it will still be generated. In such cases ...