Fastify-CLI项目添加自定义Socket.io事件类型遇TS错误求助

问题说明 #

出现TS2717错误是因为fastify-socket.io已为FastifyInstance的io属性声明默认类型，直接重写该属性会触发重复声明冲突，错误信息如下：

Subsequent property declarations must have the same type.  Property 'io' must be of type 
'Server<DefaultEventsMap, DefaultEventsMap, DefaultEventsMap, any>', but here has type 
'Server<ClientToServerEvents, ServerToClientEvents, DefaultEventsMap, any>'.ts(2717)

原代码：

// apps/server-socket/src/plugins/socket-io.ts

import { ClientToServerEvents, ServerToClientEvents } from "my-types"
import fp from "fastify-plugin"
import socketioServer from "fastify-socket.io"
import { Server } from "socket.io"

export default fp(async fastify => {
  fastify.register(socketioServer, {
    cors: { origin: process.env.WEB_URL, methods: ["GET", "POST"] },
  })
})

declare module "fastify" {
  export interface FastifyInstance {
    io: Server<ClientToServerEvents, ServerToClientEvents> // TS Error here
  }
}

解决方案 #

不要直接重写FastifyInstance的io属性，改为扩展fastify-socket.io提供的类型接口覆盖默认类型，避免冲突。修改后的代码如下：

// apps/server-socket/src/plugins/socket-io.ts

import { ClientToServerEvents, ServerToClientEvents } from "my-types"
import fp from "fastify-plugin"
import socketioServer from "@fastify/socket.io" // 推荐使用官方维护的@fastify/socket.io包
import { Server } from "socket.io"

// 扩展@fastify/socket.io的类型接口，自定义io的事件类型
declare module "@fastify/socket.io" {
  interface FastifySocketIO {
    io: Server<ClientToServerEvents, ServerToClientEvents>;
  }
}

export default fp(async fastify => {
  fastify.register(socketioServer, {
    cors: { origin: process.env.WEB_URL, methods: ["GET", "POST"] },
  })
})

补充提示 #

• 若仍在使用旧包fastify-socket.io，建议迁移至@fastify/socket.io，前者已被官方弃用，两者类型扩展逻辑一致。
• 该方式通过TypeScript模块合并机制扩展类型，不会与原有属性声明冲突，自动合并自定义类型与默认类型。

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