Specify Type of SendJsonMessage correctly

[hellow554]

Currently, we have this arrangement of types

react-use-websocket/src/lib/types.ts

Lines 62 to 69 in 0d9444d

	export type WebSocketHook<T = unknown, P = WebSocketEventMap['message'] | null> = {
	sendMessage: SendMessage,
	sendJsonMessage: SendJsonMessage,
	lastMessage: P,
	lastJsonMessage: T,
	readyState: ReadyState,
	getWebSocket: () => (WebSocketLike | null),
	}

The problem is, that we T is not forwarded to the sendJsonMessage member. If we try, we get an error: Type 'SendJsonMessage' is not generic., to fix that we can change

react-use-websocket/src/lib/types.ts

Line 52 in 0d9444d

export type SendJsonMessage = <T = unknown>(jsonMessage: T, keep?: boolean) => void;

from type SendJsonMessage = <T = unknown>(...) to type SendJsonMessage<T = unknown> = (...) (note the position of the = sign).

So my first question is:

1. Was this an oversight?
2. Would sendJsonMessage: SendJsonMessage<T> a proper fix, or should we allow different types for sendJsonMessage and lastJsonMessage, e.g.:

export type WebSocketHook<Ret = unknown, Send = Ret, P = WebSocketEventMap['message'] | null> = {
  sendMessage: SendMessage,
  sendJsonMessage: SendJsonMessage<Send>,
  lastMessage: P,
  lastJsonMessage: Ret,
  readyState: ReadyState,
  getWebSocket: () => (WebSocketLike | null),
}

(also update useWebSocket of course)

Here's a small playground I created to test this: Playground Link

[T3sT3ro]

IMO one type T for sendJsonMessage and lastJsonMessage would have very little use, because it would mean that your sent and received messages need to be of the same type, which is rarely the case. I think separate send and receive types are the way to go here.

Right now I am trying to narrow the type down to make sending more type-safe, but it is pretty verbose and I am struggling to come up with better alternatives:

import { WebSocketHook } from "react-use-websocket/dist/lib/types";

export type TypedWebSocketHook<TRecv = unknown, TSend = unknown> = Omit<WebSocketHook<TRecv>, "sendJsonMessage"> & {
  sendJsonMessage: (message: TSend, keep?: boolean) => void
};

// used as
type RecvMsg = "OK" | { data: number };
type SentMsg = "stop" | { some_test_param: number };
type SafeWebSocket = TypedWebSocketHook<RecvMsg, SentMessage>;

const { lastJsonMessage, sendJsonMessage, readyState } = useWebSocket(...) as TypeSafeWebSocket;

// and when passing to components
interface ComponentProps {
  sendJsonMessage: SafeWebSocket["sendJsonMessage"]
}

Without it we need to jump through weird hoops to ensure the outgoing message is of expected shape.