如何将T3栈聊天应用的Socket端点从JavaScript转为TypeScript？

完整TypeScript实现 #

import { Server, Socket } from "socket.io";
import type { NextApiRequest, NextApiResponse } from "next";

// 扩展http.Server类型，添加自定义的io属性
declare module "http" {
  interface Server {
    io?: Server;
  }
}

// 根据业务需求定义消息数据类型
type MessageData = {
  id: string;
  content: string;
  sender: string;
  timestamp: number;
};

// 定义用户 typing 状态的数据类型
type TypingData = {
  username: string;
  isTyping: boolean;
};

const SocketHandler = (req: NextApiRequest, res: NextApiResponse) => {
  if (res.socket.server.io) {
    console.log("Socket is already running");
  } else {
    console.log("Socket is initializing");
    const io = new Server(res.socket.server, {
      path: "/api/socket", // 匹配你的API路由路径
      addTrailingSlash: false,
    });
    res.socket.server.io = io;

    io.on("connection", (socket: Socket) => {
      socket.on("update-messages", (msg: MessageData) => {
        socket.broadcast.emit("update-messages", msg);
      });
      socket.on("user-typing", (msg: TypingData) => {
        socket.broadcast.emit("user-typing", msg);
      });
    });
  }
  res.end();
};

export default SocketHandler;

关键类型处理说明 #

• 扩展Server类型：通过declare module "http"扩展原生Server接口，添加可选的io属性，解决TS对res.socket.server.io的类型报错问题。
• 明确API路由类型：使用Next.js内置的NextApiRequest和NextApiResponse替代any，规范请求响应的类型。
• 自定义数据类型：为update-messages和user-typing事件的消息定义具体类型（MessageData、TypingData），替换隐式any，提升类型安全性和开发体验。
• Socket实例类型：为连接的socket指定Socket类型，明确其方法和属性的类型约束。
• Server配置优化：添加path配置确保客户端能正确连接到该Socket端点，需与你的API路由路径保持一致。

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