Socket.io@4.2.0+TS@4.4.3下如何扩展Client、Socket对象添加自定义字段

Socket.io v4 开始原生支持 TypeScript 类型扩展，你可以通过两种方式实现和 v2.x 相同的效果：

方式1：全局类型扩展（推荐通用场景） #

通过 TypeScript 接口合并能力，直接扩展 Socket.io 内置的全局类型，扩展后所有项目内的 Client 和 Socket 实例都会自动带上自定义字段的类型提示：

1. 在项目中新增类型声明文件，比如 src/types/socket.io.d.ts
2. 写入如下内容：

import "socket.io";

declare module "socket.io" {
  // 扩展Client类型
  interface Client {
    customField: string;
    // 可在这里添加更多Client自定义字段
  }

  // 如需扩展Socket自身的自定义字段，也可以在这里加
  interface Socket {
    socketCustomField?: number;
  }
}

3. 确认你的 tsconfig.json 的 include 配置包含了该声明文件，之后就可以直接在代码里使用自定义字段，不需要额外做类型继承：

io.on("connection", (socket) => {
  // 这里自动有类型提示，不会报类型错误
  console.log(socket.client.customField);
})

方式2：局部指定类型（适合多实例不同扩展字段场景） #

如果不希望污染全局类型，只想给特定的Socket实例使用自定义类型，可以通过Server实例的泛型参数指定：

import { Server, Client, Socket } from "socket.io";

// 自定义扩展类型
interface CustomClient extends Client {
  customField: string;
}
interface CustomSocket extends Socket {
  client: CustomClient;
  // 可添加Socket自定义字段
}

// 实例化Server时指定Socket类型，第四位泛型就是Socket实例的类型
const io = new Server<{}, {}, {}, CustomSocket>(3000);

io.on("connection", (socket) => {
  // 同样有正确的类型提示
  console.log(socket.client.customField);
})

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