NextJs13 + TypeScript + Socket.io でのWebSocket通信でレスポンスの型がわからない。

Question

前提

NextJs13 +TypeScript + Socket.io でWebSocket通信を試しています。
以下のURLを参考に実装～動作確認まで行うことができたのですが、
https://blog.logrocket.com/implementing-websocket-communication-next-js/

socketHandlerの引数にしているresの型がわからず、仕方なくanyにしています。

import type { NextApiRequest } from 'next'
import { Server } from 'Socket.IO'

export default function socketHandler(req: NextApiRequest, res: any) {
  if (res.socket.server.io) {
    console.log('Socket is already running')
  } else {
    console.log('Socket is initializing')
    const io = new Server(res.socket.server)
    res.socket.server.io = io

    io.on('connection', (socket) => {
      socket.on('input-change', (msg) => {
        socket.broadcast.emit('update-input', msg)
      })
    })
  }
  res.end()
}

実現したいこと

anyにせず正しい型を指定することは可能でしょうか？
また、TypeScriptを触り始めたのですが、nodejsのライブラリなどを使用していると、
ライブラリで扱っている型がわからず、
「とりあえず、anyにして回避する。」というケースが、
結構、発生しています。
何か調べ方などは、あるのでしょうか？

試したこと

試しに、
res: any を res: NextApiResponse に変更してみたところ
VS-Code上で
「プロパティ 'server' は型 'Socket' に存在しません。ts(2339)」
と表示されました。

ただ、npm run dev して、動作を確認してみても特に問題なく動作している様に見えるので、
VS-Code上だけの問題？なのかとも思います。
どちらにせよ、エラー表示のまま使用したり、「とりあえずany」は、
ダメな手法な気がしますので、なんとかならないものか？と思っています。

補足情報（FW/ツールのバージョンなど）

nodejs v16.18.0
nodejsパッケージは以下
"next": "13.0.2",
"react": "18.2.0",
"react-dom": "18.2.0",
"socket.io": "^4.5.3",
"socket.io-client": "^4.5.3",
"typescript": "4.8.4"

windows11 のVS-Code上で試しています。

Answer 1

javascript - Working with TypeScript, Next.js, and Socket.io - Stack Overflow が参考になるかと思います。ちなみにこのページは「Socket.IO res typescript nextjs」で検索してヒットしました。

NextApiResponseという型情報は、Socket.IOのレスポンスの型情報を含まないため、自分で拡張してあげる必要がありそうです。

---

「試したこと」にあるように、anyにしたとしてもTypeScriptの型情報はランタイムには直接影響はしないため、動作上は一見問題ないように見えます。しかし、anyを使っていると本来の型情報とは異なるプロパティを参照するなどした際にエラーになるため、あまり安全とは言えません。可能であれば、何かしらの教材でTypeScriptの型システムについてもう少し学習してみることをオススメします。

Comments

[katatema01]

解決の一助となりました。
ありがとうございます。

Answer 2

NextApiResponse、http、net、Socket.IO の各ソースコードを精査し、型拡張を行うことで、型安全を確保できました。
NextApiResponse に必要だったのは、Socket.IOのSocketではなく、netの方のSocketでした。
最終的にコードは以下の様になりました。

import type { NextApiRequest, NextApiResponse } from 'next'
import type { Server as HTTPServer } from 'http'
import type { Socket as NetSocket } from 'net'
import { Server as IOServer } from 'Socket.IO'

interface SocketServer extends HTTPServer {
  io?: IOServer | undefined
}

interface SocketWithIO extends NetSocket {
  server: SocketServer
}

interface NextApiResponseWithSocket extends NextApiResponse {
  socket: SocketWithIO
}

export default function socketHandler(req: NextApiRequest, res: NextApiResponseWithSocket ) {
  if (res.socket.server.io) {
    console.log('Socket is already running')
  } else {
    console.log('Socket is initializing')
    const io = new IOServer(res.socket.server)
    res.socket.server.io = io

    io.on('connection', (socket) => {
      socket.on('input-change', (msg) => {
        socket.broadcast.emit('update-input', msg)
      })
    })
  }
  res.end()
}

使用しているライブラリが動作の中で、どんなオブジェクトを生成しているのかなど、デバッガなどを利用しながら段階的にソースを追っていかないと、正しく型を拡張するのは、なかなか難しい様です。

npmなどのエコシステムがある一方で、型安全にするために多大な工数が掛かってしまうケースもあります。
最近は、型情報などもnpmで公開してくれているライブラリもありますが、今回の様にライブラリ同士の相互作用で、引数としている型の中に未定義の型が紛れ込み、自前で拡張しないといけないケースもある様です。

プロジェクトの規模や目的、効率などを総合的に判断して、anyも使用を考えていけば良いかと思いました。