typescript - 当我知道 `this` 是动态的时，我可以强制将经典函数作为参数而不是 Typescript 的箭头函数吗？

Question

一些 API 想要接收必须与 this 交互的函数，因此箭头函数不能在那里工作，例如对于 knex 子查询。

是否可以向 Typescript 提示一个未绑定(bind) this 的函数是预期的？

Answer 1

长话短说:不幸的是，如果不需要大量额外的手动输入类方法，就无法强制执行此操作。

---

TypeScript 有 this parameters ，其中函数的调用签名有一个名为 this 的初始函数参数，它指定调用函数时所需的 this 上下文类型的约束。 this 参数是“假的”，因为您在调用该函数时实际上并未将其作为第一个参数传递。例如:

function sayMyName(this: { name: string }) {
  console.log("Hi, my name is " + this.name + ".");
}

sayMyName() 函数不接受任何参数，但它只能在绑定(bind)到 {name: string} 类型的对象时调用。这会在编译时捕获以下错误:

try {
  sayMyName(); // error, won't work unless bound
} catch (e) {
  console.log(e); // TypeError: this is undefined
}

并允许这样的事情:

sayMyName.bind({ name: "Harry Potter" })(); // okay
// Hi, my name is Harry Potter.

const hermione = {
  name: "Hermione Granger",
  speak: sayMyName
}
hermione.speak(); // okay
// Hi, my name is Hermione Granger.

---

所以解决这个问题的明显尝试是让你的传入函数指定它们的 this 上下文应该是 void，就像这样:

function callbackCaller(cb: (this: void) => void): void {
  cb(); // okay
}

这确实按照你想要的方式使用箭头/未绑定(bind)函数和 sayMyName:

const arrow = () => console.log("I am an arrow function");
callbackCaller(arrow); // okay
// I am an arrow function

const anonymous = function () { console.log("I am an anonymous function"); }
callbackCaller(anonymous); // okay
// I am an anonymous function

try {
  callbackCaller(sayMyName); // error, 'this' types are incompatible
} catch (e) {
  console.log(e); // TypeError: this is undefined
}

但是当你尝试使用类方法时，你遇到了一个问题:

class Weasley {
  constructor(private givenName: string) { }
  greet() {
    console.log("Hi, my name is " + this.givenName + " Weasley.");
  }
}

const ron = new Weasley("Ron");
ron.greet(); // Hi, my name is Ron Weasley.

try {
  callbackCaller(ron.greet); // oops, no compile error!!!
} catch (e) {
  console.log(e); // TypeError: this is undefined
}

TypeScript 完全没能捕捉到 ron.greet 有一个 this 类型的 Weasley 上下文，而是把它当作 >this 上下文是any 类型。最初，当实现 this 参数时，将有一个 --strictThis 编译器标志来处理这个问题，但它被删除了。有一个 open issue in Github建议添加它，但目前此功能还不是该语言的一部分。 (如果你想看到它被添加，你可能想去那个问题并给它一个 👍 或者描述你的用例，如果它比现有的更引人注目。)

解决方法是采用您关心的任何类方法并显式为它们指定this 参数。一个合理的类型是 polymorphic this type ，结果是这样的:

class Malfoy {
  constructor(private givenName: string) { }
  greet(this: this) { // <-- this parameter of type this
    console.log("It is I, " + this.givenName + " Malfoy.");
  }
}

这解决了问题:

const draco = new Malfoy("Draco");
draco.greet(); // It is I, Draco Malfoy.

try {
  callbackCaller(draco.greet); // error, won't work unless bound
} catch (e) {
  console.log(e); // TypeError: this is undefined
}

以要求人们用 this:this 来填充他们的类方法为代价。这对你来说可能是一个交易破坏者，因为你不可能要求别人这样做。我不知道。

---

您可能能够使用一些奇特的类型来强制 TypeScript 将 this 参数添加到类的所有方法中，如下所示:

type Thisify<T> = {
  [K in keyof T]: T[K] extends (...args: infer A) => infer R
  ? (this: Thisify<T>, ...args: A) => R : T[K]
}
const thisify = <T>(instance: T) => instance as Thisify<T>;

const reformedRon = thisify(ron);
reformedRon.greet(); // Hi, my name is Ron Weasley.
try {
  callbackCaller(reformedRon.greet); // error, won't work unless bound
} catch (e) {
  console.log(e); // TypeError: this is undefined
}

但同样，您可能没有机会在其他人的类实例被传递给您的callbackCaller() 函数之前thisify()。我认为如果没有 --strictThis，我们就会陷入困境。

---

好的，希望对您有所帮助。祝你好运!

Link to code