I usually used to do something like socket.username = username when not using typescript. But now i am and when i try to save it the same way it gives me the error
Property 'username' does not exist on type 'Socket'
I know this means i need to extend it, but i have tried it like so
interface Socket {
username: any
}
But it did not help and i also tried this,
interface SocketIO {
username: any
}
With no luck.
Just socket['username'] = username should do the trick.
If you want type safety and if you want to have autocompletion for the username property, you can extend the Socket interface.
interface ExtendedSocket extends Socket {
username: string;
}
Then you can cast the original Socket to your custom type:
const mySocket = <ExtendedSocket>socket;
mySocket.username = 'user1'; // won't throw errors and autocomplete will work
If you want to add extra information to the socket object, you can add this information to socket.data object which is declared with any in their declaration file
Below is a snippet from socket.d.ts file
/**
* Additional information that can be attached to the Socket instance and which will be used in the fetchSockets method
*/
data: any;
Simply update module declaration like so:
declare module 'socket.io' {
interface Socket {
username: string
}
}
Now you can use w/o any cast:
socket.username = 'Bob'
In newer versions of Socket.IO, you can include this in the generic types. This can then be found in socket.data.
import { Server } from 'socket.io';
// Each event type should be a callback
interface ListenEvents {} // Events listened to on the server
interface ServerEvents {} // Events sent by the server
interface InterEvents {} // Events both listened to and sent by the server
interface SocketData {
username: string;
}
const server = new Server<ListenEvents, ServerEvents, InterEvents, SocketData>(httpServer);
// ...
socket.data.username;
This seems to accept a socket.username="John":
declare global {
namespace SocketIO {
interface Socket {
username: any
}
}
}
But a nicer solution (IMHO) would be to extend the socket interface to your own socket:
interface ExtSocket extends SocketIO.Socket
{
username: string;
}
Then declare the socket itself as socket:ExtSocket; or use an ugly cast:
(socket as ExtSocket).username = "John";
I know this might come a bit late, but I wanted to share this here for anyone who might find it useful in the future.
import { Socket as OriginalSocket } from 'socket.io'
declare module 'socket.io' {
interface Socket extends OriginalSocket {
user: {
id: number
email: string
// Add any other user properties you need
}
}
}
