typescript Vue : using a dynamic string name for a method

Question

我的目标是根据变量值触发不同的函数。 VS Code 给我一条错误警告，指出:

'method' 隐式具有 'any' 类型，因为 'type1Func' 和 'type1Func' 是字符串，不能用作索引。我成功地在普通 Vue js 文件上使用了类似的技术，但我不知道如何在此 typescript 文件中解决此问题。

func handleListeningDevice(name: NewNameOption) {
  const method = !!name ? 'type1Func' : 'type2Func';
  
  this[method]({
    name: name ?? 'none',
  });
}

Answer 1

首先欢迎。

每当我使用 TypeScript 时，我都会牢记一件事，那就是您可以像使用 JS 一样(因为它是 JS，但有类型)，这有助于我对 TS 保持冷静。

错误消息说你不能使用 string 作为索引，那是因为在代码中 this[method] method 是索引，方法是一个字符串，但正如您已经知道的，您可以通过名称访问对象属性，换句话说，用字符串索引(因此代码将在纯 JS 中工作)

为了使其正常工作，您需要向 TS 提供更多信息，以便它停止提示。例如，你可以给它一个 any 类型给 method，这样你就告诉 TS 在运行时该类型将是可以使用的东西

 func handleListeningDevice(name: NewNameOption) {
  const method:any = !!name ? 'type1Func' : 'type2Func';

  this[method]({
   name: name ?? 'none',
  });
}

或者您也可以在使用方法时进行类型转换:

this[(method as any)]

或者为 this 进行类型转换以指示字符串可以是索引:

(this as {[key:string]:any})[method]

检查什么最适合你!