Conditional method availability based on generic type state

[vildanbina]

Acknowledgement

• I acknowledge that issues using this template may be closed without further explanation at the maintainer's discretion.

Comment

I'm working with TypeScript and have a base class, BaseClass, which uses a generic type IsManual to toggle its behavior. The class has a method manually() to update the _isManually state variable. Another method, callRequest(), changes its behavior based on this _isManually state.

Here's the relevant code:

type ManualValue = true | false;

export class Request {
    request() {
        return fetch('SOME_ROUTE');
    }

    foo() {
        return 1;
    }
}

export default class BaseClass<IsManual extends ManualValue = false> {
    _isManually: IsManual = false as IsManual;

    manually(): Omit<this, keyof BaseClass<any>> & BaseClass<true>;
    manually(value: true): Omit<this, keyof BaseClass<any>> & BaseClass<true>;
    manually(value: false): Omit<this, keyof BaseClass<any>> & BaseClass<false>;
    manually(value?: ManualValue): BaseClass<ManualValue> {
        if (value === undefined) {
            this._isManually = true as IsManual;
        } else {
            this._isManually = value as IsManual;
        }
        return this as BaseClass<IsManual>;
    } 
}

export class TestBaseClass extends BaseClass {
    callRequest(payload?: any) {
        const request = new Request();

        if (this._isManually) {
            return request;
        }

        return request.request();
    }
}

const t = new TestBaseClass();

t.manually().callRequest();

I expect that after calling t.manually().callRequest(), TypeScript would dynamically adjust method availability based on the value of _isManually. Specifically, I want to access methods from either the Request class or its request() method depending on the _isManually flag.

However, this is not happening as expected. How can I make TypeScript recognize the methods conditionally?

You can experiment with the code in this TypeScript Playground link

Further Attempts:

When I tried to chain the methods like this:

t.manually().callRequest().request();

I received a TypeScript error:

Property 'request' does not exist on type 'Request | Promise<Response>'.

This contradicts my expectations based on the _isManually flag, as I expected TypeScript to recognize that callRequest() would return an instance of the Request class and allow me to call its request() method.

I also attempted to use TypeScript's conditional types in the callRequest() method to directly depend on the _isManually property, like so:

export class TestBaseClass extends BaseClass {
    callRequest(payload?: any): this['_isManually'] extends true ? Request : Promise<Response> {
        const request = new Request();

        if (this._isManually) {
            return request as any;
        }

        return request.request() as any;
    }
}

I hoped that by doing this, the TypeScript compiler would understand the conditional return types and adjust the method suggestions accordingly.

Outcome:
Regardless of whether I called the manually() method or not, TypeScript did not adjust the available methods based on the _isManually flag. The issue remained unchanged: TypeScript did not recognize the methods I expected to be available.

[jcalz]

The only way this sort of thing would work is with #6223 (or #1213). This isn't Stack Overflow so I don't think anyone here is going to be spending much effort resolving this for you.

[typescript-bot]

This issue has been marked as "Question" and has seen no recent activity. It has been automatically closed for house-keeping purposes.