I need assistance with determining the return type of a generic function within a class.
For instance,
declare class Example {
open<T, R>(t1: T, t2: R): T | R;
}
type ExampleType<T, R> = (Example['open'])<T, R>;
type ExampleTypeOutput = ReturnType<ExampleType<number, number>>;
However, I encounter errors on the 4th non-blank line around ...])<T, R> indicating that a semi-colon is expected. I am unsure if this approach is feasible. Does anyone have any insights?
To tailor the specific instance illustrated, you have the option to manually define the desired type as follows:
type TestTypeManual<T, R> = (t1: T, t2: R) => T | R;
type TestTypeReturnManual = ReturnType<TestTypeManual<number, number>>; // number
However, if you aim to delegate this task to the compiler.
The TypeScript's type system does not possess enough complexity to explain the connection between a concrete type alias representing a generic function like
type GenFunc = <T>(x: T)=>Ttype GenAlias<T> = (x:T)=>TGenFunc using genFunc<string>("hello"), there exists no such type as GenFunc<string>. Check out this suggestion thread (microsoft/TypeScript#17574) that might introduce higher rank type manipulation in the future.
As of now, achieving this purely at the type level seems implausible.
If you are willing to explore some unconventional methods that may impact the generated JavaScript code, you could utilize the ability to infer generic functions introduced in TypeScript 3.4. Here is a potential approach. First, create a function declaration similar to:
// you could just declare this instead of implementing it, but whatever:
function magicThunk<A extends any[], R>(f: (...args: A) => R): () => (...args: A) => R {
return () => f;
}
The purpose of the magicThunk() function is to take a callback function f and return a new zero-argument function that returns f. Surprisingly, when you call magicThunk() with a generic function on TS3.4:
const genericIdentity = <T>(x: T) => x; // <T>(x: T) => T
const thunkIdentity = magicThunk(genericIdentity); // <T>() => (x: T) => T
The returned function also becomes generic, but the generic type parameters are shifted one level outward. Consequently, you can call the thunked generic function and specify its type parameters to obtain a non-generic function:
const stringIdentity = thunkIdentity<string>(); // (x: string) => string;
Thus, this allows you to "specify the type parameters of a generic function without calling it," which aligns with your objective.
Almost there... the final step involves creating a new generic class to introduce certain type parameters into scope without directly placing them on another function. Consider this implementation for your Test["open"] type:
class TransformTest<T, R> {
open = magicThunk(new Test().open)<T, R>()
}
Subsequently, the type of TransformTest<T, R>.open should reflect the desired outcome:
type TestType<T, R> = TransformTest<T, R>["open"]; // (t1: T, t2: R) => T | R
type TestTypeReturn = ReturnType<TestType<number, number>>; // number
This method produces the expected result. Note that there is no requirement to execute magicThunk() or instantiate TransformTest within your code. The compiler performs all necessary operations during design time, simulating the evaluation of emitted code types accordingly.
Hopefully, this explanation proves helpful. Best of luck!
I'm currently working on an Angular application integrated with Firebase for the purpose of uploading images to the database and retrieving them as well. upload-file.service.ts import {Injectable} from '@angular/core'; import {AngularFireD ...
In my app.component.html file, I have included the following template: <test [someInput]="data"></test> The 'data' variable is a JSON object property structured like this: let data = {hello: "ciao"} Below is the code from my test. ...
I recently encountered an issue with my NodeJS app that is built with typescript and global.d.ts file. The strange part is that everything works fine in my old application, but when I try to run the new one using ts-node-dev ts-main-file.ts, I encounter an ...
Can you validate types of one argument based on another argument in functions? Consider this example: interface Data { id?: number; name?: string; } let data : Data = {}; // I am unsure how to make the "value" argument strict function update(field : ...
My array looks like ['N300W150727', '123test123', '123test1234'] and I want to push it into a MongoDB array. However, when I use $push, it adds the array inside another array. async updateSn(updateSn: UpdateSN) { const { ...
I am struggling with updating an array in Ionic2 and Angular2. I have tried updating it on the front end but it's not working, even though it updates perfectly on the backend (ts) as confirmed by checking the console. I need assistance with this. Her ...
I'm facing a challenge with an enum that is widely used in my project. Having to import it into every file is becoming cumbersome. Is there a way to define the enum in the .d.ts file so that it automatically gets included when compiled to Javascript? ...
I have created a dashboard with a component called userInfo on the homepage. This component maps through all users and displays their information. Each user has a display button next to them, which leads to the userDisplay page where the selected user&apos ...
My goal is to create an interface with the dispatch function without using Redux. interface DispatchProps { dispatch: (action: { type: string }) => void; } export function addTwoToNumber({ dispatch }: DispatchProps) { dispatch({ type: '@addTwo ...
This question was originally posted by JOYBOY but was later deleted. The title of the question was NG01203: No value accessor for form control name: 'name' In my Angular 18 application, I am utilizing both standalone components and module-based ...
When I execute Webpack using the command node node_modules/webpack/bin/webpack. js --env. prod An error message is displayed below. However, when running in --env. dev mode, the command executes without any issues. Can't resolve './../$$_gen ...
I am facing a certain challenge in my code. I have an action defined as follows: export const updateSuccess = createAction('Success', props<{ someId: string }>()); In the reducer, I have an adapter set up like this: export const adapter: ...
I'm relatively new to TypeScript and I've been trying to replicate a pattern I used in JavaScript where I would expose functions through a single object within a module (like "services"). Despite my efforts, I'm facing some issues when attem ...
In my TypeScript code, I am currently in the process of transitioning from utilizing useState to useRef for capturing text input values. This change is recommended when no additional manipulation necessitating state or rerenders is required. While I have ...
My objective is to streamline the code by using the Angular translate pipe. Currently, I find myself using 8 curly brackets and repeating the word "translate" twice... there must be a more efficient approach. Here is my current code setup: <s ...
My current setup includes the following configurations: import path from 'path' import type {Configuration} from 'webpack' const config: Configuration = { mode: 'development', entry: path.join(__dirname, '../..&apos ...
As someone who is new to Angular and TypeScript, I am finding it challenging to add a 3rd party module or package to my Angular app. After spending hours searching online, I have yet to come across a simple guide for this process. The specific problem I a ...
I'm currently working with TypeScript version 3.4.5 and Material UI version 4.2. I have the following code snippet: interface MyItemProps { name: string; value: string; } function Item({ name, value, ...props }: ListItemProps<'li&apo ...
I need to define a Mapped type that specifies a field named status which can be either a string or the string value ready: This example works as expected: export type ValidServiceState = HasReady<{ status: "ready" }>; The following should ...
Let's consider a particular situation: I am in the process of creating typescript definitions for two commonJS modules, A and B. Module B has a dependency on module A, and to make things easier, B directly exports A as a property B.A so that users do ...