typescript Parameter type dependency based on value is not functioning

Question

typescript Parameter type dependency based on value is not functioning

interface AddDataRequest{
    data:any
}
interface AddDataResponse{
    id:string
}
interface ITest{
    addData(json:AddDataRequest):Promise<AddDataResponse>
    removeData(json:AddDataResponse):Promise<boolean>
}
function testInterface<A extends keyof ITest>(action:A,req:Parameters<ITest[A]>[0],res:Awaited<ReturnType<ITest[A]>>){
    if(action === 'addData'){
        console.log(res.id); //TS2339: Property 'id' does not exist on type 'boolean | AddDateResponse'. Property 'id' does not exist on type 'false'.
    }
    else if(action==='removeData'){
        console.log(req.id); //TS2339: Property 'id' does not exist in the 'AddDateRequest | AddDateResponse' type. The property 'id' is not found in the 'AddDateRequest' type.
    }
}
testInterface('removeData', {id:'test123'},true); //But works here

I am attempting to establish a type dependency of function parameters from the first one. It functions correctly when calling the function but encounters errors within it. These errors are elaborated upon in the comments inside the code.

typescript interface dependencies typeerror

Answer 1

Answer №1

Dealing with the challenge of maintaining the correlation between function parameter types while narrowing one of them is a common issue.

One workaround is to group these interconnected parameters into a single object and specify the type of the object as a discriminated union representing various possibilities (achievable through a combination of a mapped type and indexed access type).

This approach allows TypeScript to effectively narrow the entire object based on the discriminant property (in this case, `action`).

// Creating a discriminated union:
type TTestFullUnion = {
    [kind in keyof ITest]: { 
        action: kind,
        req: Parameters<ITest[kind]>[0],
        res: Awaited<ReturnType<ITest[kind]>>
    }
}[keyof ITest] 

function testInterface2<ActionFull extends TTestFullUnion>(actionFull: ActionFull) {
    const { action, req, res } = actionFull;
    if (action === 'addData') {
        console.log(res.id); // Output will be AddDataResponse
    }
    else if (action === 'removeData') {
        console.log(req.id); // Output will be AddDataResponse
    }
}
testInterface2({
    action: 'removeData',
    req: { id: 'test123' },
    res: true
}); // Will work without any issues

However, implementing this solution may require slight modifications to your API design.

Try it out in TypeScript Playground

Answer 2

Dealing with the challenge of maintaining the correlation between function parameter types while narrowing one of them is a common issue.

One workaround is to group these interconnected parameters into a single object and specify the type of the object as a discriminated union representing various possibilities (achievable through a combination of a mapped type and indexed access type).

This approach allows TypeScript to effectively narrow the entire object based on the discriminant property (in this case, `action`).

// Creating a discriminated union:
type TTestFullUnion = {
    [kind in keyof ITest]: { 
        action: kind,
        req: Parameters<ITest[kind]>[0],
        res: Awaited<ReturnType<ITest[kind]>>
    }
}[keyof ITest] 

function testInterface2<ActionFull extends TTestFullUnion>(actionFull: ActionFull) {
    const { action, req, res } = actionFull;
    if (action === 'addData') {
        console.log(res.id); // Output will be AddDataResponse
    }
    else if (action === 'removeData') {
        console.log(req.id); // Output will be AddDataResponse
    }
}
testInterface2({
    action: 'removeData',
    req: { id: 'test123' },
    res: true
}); // Will work without any issues

However, implementing this solution may require slight modifications to your API design.

Try it out in TypeScript Playground

typescript Parameter type dependency based on value is not functioning

Answer №1

Similar questions

Data from HTML not being transferred by Angular Forms

Generating a d.ts file for images in Typescript using automation techniques

Having trouble persisting data with indexedDB

Having trouble executing the typescript build task: Command 'C:Program' is not valid as an internal or external command

The Child/Parent arguments in Typescript methods cannot be assigned

I'm looking for a way to implement a jQuery-style initialization pattern using TypeScript - how can I

Guide to updating component after closing MatDialog and updating data in database using Angular 6

Are there any methods to utilize Zod for validating that a number contains a maximum of two decimal places?

Restricting a generic parameter to a combination type in Typescript

Tips for syncing the state data stored in local storage across all tabs with Ngxs state management

Invoke a general function with corresponding generic parameters

I am facing difficulty in retrieving data from Firestore using Angular

What are the specific purposes of utilizing semantic versioning (semver) notation within the package.json file?

Storing the typeof result in a variable no longer aids TypeScript in type inference

What is a Mongoose Schema type in TypeScript and how can it be used as a custom

What is the method for transmitting a concealed attribute "dragable" to my component?

Require users to sign in immediately upon landing on the homepage in Next JS version 13 or 14

When utilizing *NgIf, the button will be shown without the accompanying text being displayed

The issue arises when attempting to use the search feature in Ionic because friend.toLowerCase is not a valid function

Creating adaptable rows and columns with Angular Material's data table feature