Using Typescript, what's the recommended way to extend socket.handshake.auth with the custom properties set on frontend?

[decipher-cs]

I am sending a username from my frontend socket.auth = { username: 'example_name' }

which I am receiving on the backend like this

interface SocketWithUsername extends Socket {
    username?: string
}

io.use((socket: SocketWithUsername, next) => {
    const username = socket.handshake.auth.username

    console.log('username is :', username)

    if (username === undefined) return next(new Error('invalid username'))

    socket.username = username

    next()
})

But this will require me to typecaste socket in multiple places. This makes the code smelly imo.

io.on('connection', (socket: SocketWithUsername) => {
    const users: { [key: string]: string }[] = []

    for (const [id, socket] of io.of('/').sockets) {
        users.push({
            userID: id,
            username: (<SocketWithUsername>socket).username ?? 'foobar'
        })
    }

    console.log(socket.id)
})

Now what I am asking is, is this the right and expected way to set properties on the socket or is there a better way that I missed while skimming the docs?

[decipher-cs]

I went with this:

declare module 'socket.io' {
    interface Socket {
        username?: string
    }
}