Typing emit and listen events with socket.io

[pdinius]

I'm trying to create two methods in my react client to use with socket.io. One for emitting events and one for listening. The goal is to export these two functions from a file where I'm setting up my socket logic so I don't actually have to expose the socket object itself. Here's the code I have currently:

https://codesandbox.io/s/heuristic-currying-ylwp66?file=/src/index.ts

import { io, Socket } from "socket.io-client";

interface ServerToClientEvents {
  eventA: (s: string) => void;
  eventB: (n: number) => void;
}

interface ClientToServerEvents {
  eventC: (b: boolean) => void;
  eventD: (a: Array<string>, cb: (s: string) => void) => void;
}

const socket: Socket<ServerToClientEvents, ClientToServerEvents> = io(
  "http://whatever"
);

// this works
const emit = <EventName extends keyof ClientToServerEvents>(
  event: EventName,
  ...args: Parameters<ClientToServerEvents[EventName]>
) => {
  socket.emit(event, ...args);
};

// why doesn't this work?
const listen = <EventName extends keyof ServerToClientEvents>(
  event: EventName,
  listener: ServerToClientEvents[EventName]
) => {
  socket.on(event, listener);
};

The emit function is fine and I've been using it in my components but the listen function, which seems like it should work on the same basis, gives a TS error on the socket.on(event, listener); line. The listener argument has a few TS errors but they're all generally this format:

Type '((s: string) => void) | ((n: number) => void)' is not assignable to type 'FallbackToUntypedListener<EventName extends "connect" | "connect_error" | "disconnect" ? SocketReservedEvents[EventName] : EventName extends "eventA" | "eventB" ? ServerToClientEvents[EventName] : never>'.

Does anyone know what causes the TS compiler to give this error?