我正在将一个项目转换成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");
这个函数运行良好,并输出“calling myMethod()"。当我将它转换为Typescript时,我在callThis
方法上得到一个错误。它告诉我:
元素隐式具有“any”类型,因为类型“string”的表达式不能用于索引类型“Example”。在类型“Example”上找不到参数类型为“string”的索引签名。
我怎样才能让TypeScript接受这个设置呢?我稍后会添加新的可调用方法,不仅仅是这个,所以我希望尽可能灵活。我已经创建了一些新类型,但在这个阶段我还是个婴儿,所以请耐心等待。
这背后的整体想法是,类别是用来从HTML <template>
节点建立对话方块,而callThis
函式则是用来在节点加入DOM之后,将事件侦听程式加入其中。
4条答案
按热度按时间pepwfjgg1#
解决方案是重写调用该类的代码,从而避免动态调用方法。在尝试了建议的代码之后,我的收获是:不要尝试在TypeScript中动态调用方法,没有简单的方法可以做到这一点。
6psbrbz92#
我不确定这个答案是否有用,但我上过这样的课
我有一段代码根据结构定义调用它
我知道这不是严格意义上的“类型正确”,但它确实有效。无论如何,我尝试了一堆类型友好的方法。我惊讶地发现,各种类型正确的方法都有similar performance。
下面是我的无意义的例子。抱歉命名不好。
当然,每个浏览器都有自己的优势。而且,哪个方法获胜取决于每个类调用函数的次数,至少在这些测试中是这样。例如,在Chrome 107中,如果每个类调用函数1000次,那么按名称排序的函数获胜。如果每个类调用函数的次数比原来的多16次,非typescript友好的方法获胜,但是第二个方法,命名函数的对象,并没有那么慢,~10%,当然,如果函数不仅仅是加法和乘法,那么10%会更低。对于较小的使用,非箭头函数的解决方案会变得更慢,因为它必须为每个类示例创建新的闭包,这是有道理的,但它还没有坏到我会担心它。
另外,我测试的是JavaScript,而不是 typescript 。我不知道 typescript 的翻译是否会增加额外的开销。
ewm0tg9j3#
为了将其转换为 typescript ,您需要编写自定义的打字保护:
如果你想调用
this[methodName]
,首先你需要向TS保证它是一个函数,然后你需要向TS保证这个函数没有参数。另外,您需要告诉TS您可能有
someText
属性Playground
x33g5p2x4#
这样的东西对我很有效。我不知道你要怎么传递参数...
然后在index.ts中