Typescript: how do I most explicitly define a variable that can hold a function name or that function's return type?

Question

I'm refactoring/rebuilding an existing codebase, and came across the equivalent of this code:


class FeedbackBase {
    Variables = [{Value: 'doSomething'}];

    goToFeedback() {

        this.Variables?.forEach(variable => {
            if (variable.Value) {
                variable.Value = (this[variable.Value])();
            }
        });
    }

    doSomething(): string { return '123';}
}

The basic idea is that Variables[].Value might contain a function call defined on FeedbackBase. If it does, then run the function, and replace Variables[].Value with the return value.

Before this.Variables?.forEach, they were originally doing a deep copy of this.Variables, wiping out all of the typing and basically running the code on an 'any' object. When we keep the typing, Typescript complains about this[variable.Value]:

Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'FeedbackBase'. No index signature with a parameter of type 'string' was found on type 'FeedbackBase'.

Fair enough: all Typescript knows is that the contents of variable.Value are a string: it doesn't know whether it is a callable function on FeedbackBase.

My potential solution:

type BaseFunction = {
    doSomething(): string;
};

class FeedbackBase implements BaseFunction {
    Variables = [{Value: 'doSomething'}];

    goToFeedback() {
        this.Variables?.forEach(variable => {
            if (variable.Value) {
                variable.Value = this[variable.Value as keyof BaseFunction]();
            }
        })
    }

    doSomething(): string { return '123';}
}

Basically:

Within BaseFunction, explicitly define all of the functions that could be defined in variable.Value
FeedbackBase implements BaseFunction
Call the function as this[variable.Value as keyof BaseFunction] to tell Typescript that this should be treated as a function call, not as a string.

A nice feature of this approach is that when you say this[variable.Value as keyof BaseFunction], Typescript checks to make sure that this indeed has all of the functions defined in BaseFunction. (For example, if you change FeedbackBase.doSomething to FeedbackBase.doSomethings, an error appears at this[variable.Value as keyof BaseFunction]).

I think that, in this case, I'm forced to use as, because variable.Value could be keyof BaseFunction, or whatever is returned by the function call. Even if I get more specific about the return type, I can't think of a way to define variable.Value as definitely a function call before the transformation, and definitely a return type afterward, outside of just using as.

Is there a way to be more explicit?

I am a bit lost with this pattern. How does your FeedBackBase class receive its Variables array?, what kind of mistakes should Typescript gard you against? Should Variables be allowed to contain Properties which don't exist in the instance? I agree with Jack but that's just me on auto-pilot, I don't understand what I am reading — geoffrey
– geoffrey, Commented Jan 5, 2023 at 21:38
I simplified the code to hopefully illustrate the scenario more effectively. I'm happy to answer your questions, but if you have a chance, please have a look at the simplified code just to see whether you still need answers. — Joseph Zabinski
– Joseph Zabinski, Commented Jan 6, 2023 at 14:17
You should rethink your API. This is not really a good design, and this attempt at translating it to TS kinda proves it. If statically typing something is hard, it may be a code smell. Consider making a function that returns the transformed Variables array. — k.tten
– k.tten, Commented Jan 6, 2023 at 19:50

geoffrey · Accepted Answer · 2023-01-06 20:09:46Z

TS would not allow you to do that if it knew what you wanted to do, and I think it would be right in complaining. This is what this answer will attempt to demonstrate.

You don't need an interface to wire the types. You can statically work out the names of FeedbackBase non-void method names like so:

type NonVoidMethodNames<Class> = keyof {
    [K in keyof Class
        as ((...args: any[]) => void) extends Class[K] ? never
        : Class[K] extends (...args: any[]) => unknown ? K
        : never
    ]: K
}

type DoSomething = NonVoidMethodNames<FeedbackBase> // "doSomething"

If you assigned it to Variables like the following, you would not need your as when you call this[variable.Value]().

Variables: { Value: NonVoidMethodNames<FeedbackBase> }[] = [{ Value: 'doSomething' }];

TS would try to index this with "doSomething", realise it's a method, no problem, and work out the return type as string as expected

But of course we can't simply do that because now we're assigning string to variable.Value which we had defined to be "doSomething".

playground

In TS, you can't write the following and this is the situation you are in, only with indirections in-between.

let foo: string = 'a';
foo = 1;

You would also be inconvenienced if you wanted to widen Value to MethodName | ReturnType when the return type is string as it is the case here because string would swallow its subtypes.

Even ignoring the problem of when Variables is populated, the user has no way to know what values this field contains. This is a deal breaker in my opinion. I am not very savvy in OO but I would say this design is flawed and cannot be typed.

Jack · Accepted Answer · 2023-01-05 18:50:40Z

1

I don't know if this is the best TypeScript per say because it seems a bit convoluted, but I think your solution is fine in terms of typings. I would beware of one thing though.

I don't think the forEach does what you want it to. If a Value is not a function, you'll get a runtime error because you're not actually checking if Value is a function. Instead, you're checking if it exists.

this.Variables?.forEach((variable) => {
      if (
        variable.Value &&
        variable.Value in this &&
        typeof this[variable.Value as keyof BaseFunction] === "function"
      ) {
        variable.Value = this[variable.Value as keyof BaseFunction]()
      }
})

answered Jan 5, 2023 at 18:50

Jack

1,1261 gold badge14 silver badges37 bronze badges

1 Comment

Joseph Zabinski Over a year ago

Ah, great point. They do something similar in other files, but not in this one, thanks for catching that. variable.Value in this is also a very helpful check.

Collectives™ on Stack Overflow

Typescript: how do I most explicitly define a variable that can hold a function name or that function's return type?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related