旧原型风格JavaScript中如何为this添加类型注解？

我太懂你遇到的这个痛点了——用旧的原型模式写JS，同时开启了TypeScript严格检查（尤其是noImplicitThis和checkJs）时，原型方法里的this总会被标记为隐式any，而class语法因为自带类型绑定就没这个麻烦。下面给你两种实用的解决办法：

方法一：用@this JSDoc注解原型方法 #

这是最直接高效的方式，给每个原型方法添加@this {构造函数名}的注解，明确告诉TypeScript这个方法里的this指向的是构造函数实例的类型。

修改后的代码如下：

/**
 * @constructor
 * @param {string} name
 */
function Animal(name) {
  this.name = name;
}

/**
 * @this {Animal}
 */
Animal.prototype.show = function show() {
  console.log(this.name);
};

var a = new Animal("bob");
a.show();

这样TypeScript就能准确识别this的类型，不会再抛出“'this' implicitly has type 'any'”的错误了。

方法二：提前定义类型别名（适合复杂场景） #

如果你的构造函数逻辑比较复杂，或者需要多次引用实例类型，可以用@typedef先定义一个类型别名，再在@this里引用：

/**
 * @typedef {Object} Animal
 * @property {string} name
 */

/**
 * @constructor
 * @param {string} name
 * @returns {Animal}
 */
function Animal(name) {
  /** @type {Animal} */
  const self = this;
  self.name = name;
}

/**
 * @this {Animal}
 */
Animal.prototype.show = function show() {
  console.log(this.name);
};

不过这种方式稍显繁琐，大多数情况下用第一种方法就足够解决问题。

至于为什么class语法没问题？因为class中的方法在TypeScript（或带类型检查的JS）中会自动继承类的实例类型，不需要额外注解；而原型模式下的函数是独立存在的，TypeScript无法自动推断this的指向，必须显式声明。

内容的提问来源于stack exchange，提问作者Emilio Platzer