如何在 typescript 中的 object 文字中键入带有“this”的方法？

Question

const log = {
  counter: {
    a: 1,
    b: 2,
    c: 3,
  },
  increment(entry: keyof typeof this.counter){
    this.counter[entry]++;
  }
};

function incrementLog(entry:keyof typeof log.counter){
    log.counter[entry]++;
}

incrementLog('a'); // ok
incrementLog('d'); // error, must be 'a' | 'b' | 'c'
log.increment('a'); // ok
log.increment('d'); // no error

游乐场链接

我想强制increment方法的参数类型为keyof typeof log.counter ，即'a' | 'b' | 'c' 'a' | 'b' | 'c' 'a' | 'b' | 'c' 。 我可以在独立的 function 中实现它，但它在increment方法中不起作用： 'this' is not defined.

我还在方法定义上尝试log.counter而不是this.counter ，但这会创建一个“循环初始化程序”，它也不能按预期工作。

我希望不要手动输入log或手动输入counter ，因为当我对 object 进行更改时，我希望只在一个地方进行更改。

Answer 1

在 TypeScript 中编写面向对象的代码时，使用 class 语法比强制使用普通的 object 文字要容易得多：

class Log {
  counter = {
    a: 1,
    b: 2,
    c: 3
  };

  increment(entry: keyof Log['counter']) {
    this.counter[entry]++;
  }
}

const log = new Log();

function incrementLog(entry:keyof Log['counter']) {
  log.counter[entry]++;
}

incrementLog('a'); // ok
incrementLog('d'); // error
log.increment('a'); // ok
log.increment('d'); // error

Answer 2

在log之前定义counter 。 您不能在定义类型的表达式中间引用类型。 您可以轻松避免重复定义/初始化。

const counter = {
    a: 1,
    b: 2,
    c: 3,
};
const log = {
  counter,
  increment(entry: keyof typeof counter){
    this.counter[entry]++;
  }
};

function incrementLog(entry:keyof typeof log.counter){
    log.counter[entry]++;
}

incrementLog('a'); // ok
incrementLog('d'); // error, must be 'a' | 'b' | 'c'
log.increment('a'); // ok
log.increment('d'); // error, must be 'a' | 'b' | 'c'

Answer 3

您应该为log创建一个类型或接口：

interface Log<T extends {[key: string]: number}> {
    counter: T;
    increment(element: keyof T): void;
}