javascript - 在 Typescript 中为 `this` 关键字键入注释

Question

我有一个独立函数，旨在使用 Function.prototype.call 提供的上下文。

例如:

function foo () {
    return this.bar;
}

> foo.call({bar: "baz"})
baz

有没有办法在这种情况下为 this 关键字提供 Typescript 类型注释？

Answer 1

首先，你可以使用特殊的 this parameter用于识别您期望的对象类型的语法 this成为:

function foo (this: {bar: string}) {
    return this.bar; // no more error
}

如果你直接调用它会有帮助:

foo(); // error, this is undefined, not {bar: string}

var barHaver = { bar: "hello", doFoo: foo };
barHaver.doFoo(); // acceptable, since barHaver.bar is a string

var carHaver = { car: "hello", doFoo: foo };
carHaver.doFoo(); // unacceptable, carHaver.bar is undefined

---

TS3.2+ 更新

引入 TypeScript 3.2 the --strictBindCallApply compiler option强类型函数的 .call() 方法。如果你使用这个(或包含这个的the --strict suite of compiler features)，那么this参数也将强制执行 foo.call()按要求行事:

foo.call({ bar: "baz" }); // okay
foo.call({ baz: "quux" }); // error!

Playground link to code

---

TS3.2 之前的答案如下:

但是你想使用foo.call() .不幸的是 Function.prototype.call()在 TypeScript 中输入不会真正为您强制执行此限制:

foo.call({ bar: "baz" }); // okay, but
foo.call({ baz: "quux" }); // no error, too bad!

将更好的东西合并到 TypeScript 的 Function 中声明给我带来了问题，(丑陋的第一点；你需要将 foo 转换为某些东西)所以你可以尝试这样的事情:

interface ThisFunction<T extends {} = {}, R extends any = any, A extends any = any> {
  (this: T, ...args: A[]): R;
  call(thisArg: T, ...args: A[]): R;
}

A ThisFunction<T,R,A>是一个带有 this 的函数类型 T , R 类型的返回值, 和一个 A[] 类型的剩余参数. (丑陋的第二点:您不能以类型系统将强制执行的方式轻松指定不同类型的多个参数。)

然后你可以投 foo至 ThisFunction<{ bar: string }, string> , (丑陋的第三点:类型系统不会推断出 this 类型)然后最终使用 call() :

(<ThisFunction<{ bar: string }, string>>foo).call({ bar: "baz" }); // okay, and
(<ThisFunction<{ bar: string }, string>>foo).call({ baz: "quux" }); // error, hooray!