Check out the following function
export const tryAsyncAwait = async (fn: () => any) => {
try {
const data = await fn();
return [data, null];
} catch (error) {
return [null, error];
}
};
If I use this function as an example...
const getNum = (x: number) => x * 2
I want typescript to automatically deduce that the return type of tryAsyncAwait should be [number, null]
When aiming for the desired functionality, the function should possess a specific type signature:
export const tryAsyncAwait = async <F extends () => any>(
fn: F
): Promise<[ReturnType<F>, null]> => {
try {
const data = await fn();
return [data, null];
} catch (error) {
return [null, error];
}
};
However, due to an alternative return in the catch block, the type needs to be a union of the resolved and rejected value to maintain accuracy.
export const tryAsyncAwait = async <F extends () => any>(
fn: F
): Promise<[ReturnType<F>, null] | [null, unknown]> => {
try {
const data = await fn();
return [data, null];
} catch (error) {
return [null, error];
}
};
Furthermore, it's crucial to remember that the return type must be enveloped within a Promise since async is utilized in the function definition. By awaiting the call to fn, it implies that other async functions can be accepted as callbacks. The broad type signature () => any is inclusive enough to accommodate these scenarios.
Below is the display from my project's output window view image description here In the image, you can see checkboxes on the left and cards on the right. I want that when a checkbox is checked, only the corresponding data should be shown while the r ...
If I have an array of type Maybe<int>[] and want to extract only the values that are not None, what is the most efficient approach while ensuring TypeScript recognizes the output as int[]? It seems like declaring the result type as int[] is the way ...
In my project, I am attempting to compile a list of Profile objects and then extract specific elements from each object in the list. To accomplish this, I have defined a public interface named Profile, imported it into my component, and instantiated a new ...
I am attempting to integrate external components into Vue Typescript Class Components. Following the installation of the standard template, I made modifications to its <script> block based on this guide: import { Vue, Component, Prop } from "vue-pro ...
Below is the code snippet from my store.tsx file: let store = {}; const globalStore = {}; globalStore.set = (key: string, value: string) => { store = { ...store, [key]: value }; } globalStore.get = (key) => { return store[key]; } export d ...
When it comes to compiler optimization in other programming languages, a similar scenario would involve pulling out certain objects from the loop to avoid creating them each time: const arr = [1, 2, 3, 4, 5] arr.map(num => { const one_time = 5; / ...
Currently, I am facing a challenge in mocking a class that includes a static property. jest.mock("../../src/logger/index"); import { Logger } from "../../src/logger/index"; // .. const LoggerMock = Logger as jest.MockedClass<typeof ...
Within my angular project, there are 4 input fields where users need to enter information, along with a button labeled Set All which will populate them. https://i.sstatic.net/1GGh1.png I am wondering how I can organize these input fields and the button i ...
In my single page application project, I am utilizing Angular 8. Upon uploading my published code to the IIS server without using hash(#) in routing, I encounter a 404 error when attempting to refresh the page. Can anyone provide assistance on how to res ...
I am interested in creating a React component library where users can specify color variants. For instance, I want to use the following syntax: const customTheme = createCustomTheme({ button: { variants: { primary: 'primary ...
After updating the imports for rxjs operators in my project to follow the new recommended syntax, I encountered an issue with the "do" operator. While switchMap and debounceTime were updated successfully like this: import { switchMap, debounceTime } ...
Here's a question for you: Why does this code snippet work? const heroText = { height: 400, display: "flex", justifyContent: "center", } <Grid item sx={heroText}>Some text</Grid> On the other hand, why does adding flexDirection: "c ...
I am attempting to pass a component as a prop to another component in order to wrap the content of a material ui modal This is my attempt so far: import React, { Component } from 'react'; import withWidth, { isWidthDown } from '@material-u ...
I am trying to initialize a variable called foo, but my current code is not compiling successfully. let foo: (x: number) => {y:number,z: number} = (x) => {x+1, x+2}; This results in the following error: Left side of comma operator is unused and ha ...
Using angular2, nodejs, expressjs, and mongodb for development. I need all APIs to fetch data and display it on an HTML page. Below is the code snippet from my .ts file. view image description here All APIs have been tested and are s ...
Having trouble setting up testing for a components library. Despite trying various examples and similar threads, I have not been successful. I can confirm that my setupTests.ts file is being loaded correctly (verified through a console.log). Additionally, ...
Thank you in advance for your help. I am new to TypeScript and I have encountered an issue with a piece of code. I am attempting to wrap a union type into a Promise and return it, but I am unsure how to do it correctly. export interface Bar { foo: number ...
I am working with a nested object structured like this const data = [ { id: '1', description: 'desc 1', data : [ { id: '5', description: 'desc', number :1 }, { id: '4', description: 'descip& ...
Can anyone assist me in resolving why I am unable to start my project after fixing 3 high vulnerabilities? I ran npm audit to identify the vulnerabilities and then used npm install --save-dev @angular/<a href="/cdn-cgi/l/email-protection" class="__cf_em ...
Having a bit of trouble with my Typescript project. I'm trying to import the 'autobind-decorator' package, but I hit a roadblock. When compiling, I keep running into this error: cannot find declaration file for 'autobind-decorator&ap ...