JS单例模式代码转TS时出现this类型未知报错该如何处理

• 原代码使用箭头函数定义getInstance对象方法，箭头函数没有独立的this绑定，此处的this默认指向全局作用域，TS无法推断其类型，因此抛出this possibly be unknown错误。
• 没有为对象属性、方法参数和返回值定义明确的TS类型，TS无法完成类型校验。

简化写法（无需额外定义类型） #

适合小型项目或不需要复用类型的场景：

const singleton = {
  // 显式声明instance的类型，如果是存储socket.io实例则替换为对应的Server类型即可
  instance: null as string | null,
  // 替换为普通函数，显式声明this的类型为当前singleton对象的类型，this是TS虚拟参数，调用时无需传入
  getInstance(this: typeof singleton, server: string) {
    if (!this.instance) {
      this.instance = server;
    }
    return this.instance;
  }
}

let a = singleton.getInstance('Hello');
let b = singleton.getInstance('World');

console.log(a === b); // true
console.log(a); // Hello
console.log(b); // Hello

接口定义写法（支持类型复用） #

适合中大型项目，需要统一单例类型约束的场景：

// 可复用的单例类型定义，socket.io场景下替换string为import { Server } from "socket.io"后的Server类型即可
interface Singleton {
  instance: string | null;
  getInstance: (this: Singleton, server: string) => string;
}

const singleton: Singleton = {
  instance: null,
  getInstance(server) {
    if (!this.instance) {
      this.instance = server;
    }
    return this.instance;
  }
}

• 不要用箭头函数定义对象方法，否则this不会指向当前对象。
• 显式声明this的类型，让TS可以完成类型推断，避免unknown报错。
• 根据实际存储的实例类型调整类型定义，替换示例中的string类型即可适配socket.io场景。

内容的提问来源于stack exchange，提问作者Ali Naderi Parizi