将JS模块转TS时，必须转为类才能继续使用this吗？

不用非得把模块改成类结构，TypeScript完全支持在类外通过明确指定this类型的方式解决你遇到的报错，以下是针对每种问题的具体解决方案：

1. 解决“'this' implicitly has type 'any'”和“Object is possibly 'undefined'”报错 #

TS要求所有this的使用必须有明确的类型，你可以在函数的参数列表最前面显式声明this的类型，告诉TS该函数执行时this的指向：

首先定义this的类型接口：

// 把模块中用到的this上的所有属性都定义在这里
interface ModuleThis {
  value: number;
  [key: string]: any; // 如果有不确定的属性，可以用索引签名
}

然后在使用this的函数中声明：

function updateValue(this: ModuleThis, newValue: number) {
  this.value = newValue; // 此时TS明确知道this的类型，不会报错
}

如果运行时this可能为undefined，可以把类型设为ModuleThis | undefined，然后在函数内做判断，或者用非空断言this!.value（需确保运行时this确实存在）：

function safeUpdate(this: ModuleThis | undefined, newValue: number) {
  if (this) {
    this.value = newValue;
  }
  // 或者用非空断言（谨慎使用）
  // this!.value = newValue;
}

2. 解决“An outer value of 'this' is shadowed by this container”报错 #

这个问题是因为内部函数（比如回调）的this遮蔽了外部的this，有三种常见解决方式：

• 使用箭头函数：箭头函数会继承外部作用域的this，不会创建自己的this：

  function outer(this: ModuleThis) {
    setTimeout(() => {
      this.value = 456; // 这里的this和outer的this一致
    }, 100);
  }
  

• 保存外部this到变量：把外部this赋值给变量（比如self），在内部函数中使用该变量：

  function outer(this: ModuleThis) {
    const self = this;
    setTimeout(function() {
      self.value = 456;
    }, 100);
  }
  

• 给内部函数指定this类型：如果必须用普通函数，给内部函数也声明this类型并绑定外部this：

  function outer(this: ModuleThis) {
    setTimeout(function(this: ModuleThis) {
      this.value = 456;
    }.bind(this), 100);
  }
  

3. 模块顶层this的处理 #

如果是在模块顶层直接使用this（比如JS中模块顶层this指向module.exports），可以在模块顶部声明this的类型：

interface ModuleExports {
  updateValue: typeof updateValue;
  value?: number;
}

// 告诉TS模块顶层的this类型
declare var this: ModuleExports;

// 直接使用this
this.value = 789;

// 导出函数
exports.updateValue = updateValue;

通过以上方式，你可以保留原有的非类模块结构，同时解决所有this相关的TypeScript类型报错。

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