打字稿：通过这个+它的名字调用一个方法

Question

我正在将一个项目转换为 Typsescript。这是一段艰难的旅程，但我正在一步一步地到达那里。不过，有一件事一直让我难以捉摸。

我可以在 纯 Javascript 中做到这一点：

class Example {
  callThis(methodName) {
    if (typeof this[methodName] === "function"){
      this[methodName]();
    }
  }

  getSomeText() {
    return this.someText;
  }

  setSomeText(someText) {
    this.someText = someText;
  }

  myMethod() {
    console.log(this.getSomeText());
  }

  myOtherMethod() {
    //etc
  }

  //and more methods that can be called with callThis()
}

const aTest = new Example;
aTest.setSomeText("calling myMethod()");
aTest.callThis("myMethod");

这运行良好并输出“调用 myMethod()”。当我将其转换为 Typescript 时，callThis 方法出现错误。它告诉我：

元素隐含地具有“任何”类型，因为“字符串”类型的表达式不能用于索引类型“示例”。 在“示例”类型上找不到具有“字符串”类型参数的索引签名。

我怎样才能让 TypeScript 接受这个设置？稍后我将添加新的可调用方法，不仅仅是这个，所以我希望尽可能灵活。我已经创造了一些新的类型，但我在这个阶段还是个婴儿，所以请耐心等待。

这背后的整个想法是，该类用于从 HTML <template> 节点创建对话框，callThis 函数用于在节点添加到 DOM 后向其添加事件侦听器。

Answer 1

解决方案是重写调用此类的代码，从而避免动态调用方法。 在尝试了建议作为答案的代码后，我的收获是：不要尝试在 TypeScript 中动态调用方法，没有简单的方法。

Answer 2

为了将其转换为打字稿，您需要编写自定义类型保护：

const withoutParams = (fn: (...args: any) => any): fn is () => void =>
    fn.length === 0

const isFunction = (fn: any): fn is () => void =>
    typeof fn === 'function'

class Example {
    someText?: string;

    callThis<T,>(this: T, methodName: keyof T) {
        const x = this[methodName]
        if (isFunction(x) && withoutParams(x)) {
            x();
        }
    }

    getSomeText() {
        return this.someText;
    }

    setSomeText(someText: string) {
        this.someText = someText;
    }

    myMethod() {
        console.log(this.getSomeText());
    }

    myOtherMethod() {
    }

}

const aTest = new Example;
aTest.setSomeText("calling myMethod()");
aTest.callThis("myMethod");

如果你想调用this[methodName]，首先你需要向TS保证它是一个函数。然后你需要向 TS 保证这个函数没有参数。

另外，你需要告诉 TS 你可能有someText 属性

Playground

Answer 3

这样的东西对我有用。我不确定您将如何传递参数...

export class Example {
  private my_text = '';
  callThis(member: keyof Example): void {
    this[member](member);
  }
  getSomeText(): void {
    this.my_text = 'getSomeText';
  }

  setSomeText(): void {
    this.my_text = 'setSomeText';
  }
}

然后在 index.ts 中

import { Example } from './Example';

const lo_example = new Example();
lo_example.callThis('getSomeText');