typescript 如何在class中 返回this[key]?

Question

class Obj {
  constructor() {}
  a() {}
  b() {}
  c() {}
  plugins: Record<string, Function> = {
    d() {},
    e() {},
  };
  useFunc(name: string) {
    return this[name] || this.plugins[name];
  }
}
const theObj = new Obj();

结果报错:

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

Answer 1

试试

useFunc(name: string) {
  return (this as any)[name] || this.plugins[name];
}

Answer 2

原因是 mediaType 的类型未知，ts 在类型检测的时候发现不了需要确保name是Obj的key
添加这个name as keyof Obj, 将其设置一下

class Obj {
  constructor() {}
  a() {}
  b() {}
  c() {}
  plugins: Record<string, Function> = {
    d() {},
    e() {},
  };
  useFunc(name: string) {
    return this[name as keyof Obj] || this.plugins[name];
  }
}




const theObj = new Obj();
console.log(theObj.useFunc('a'))

Answer 3

useFunc 参数类型应为 (keyof typeof this) | (keyof typeof this.plugins) ，或者也可以在取值的时候用 as 断言键的类型。

Answer 4

把 useFunc 的参数 name 类型改为 keyof Obj。

TypeScript: TS Playground

Answer 5