Improve TypeScript types for custom events. (#29)

* Improve TypeScript types for custom events.

* Improve ResolvedEvent for custom events.

* Simplify ResolvedEvent and rename to EventSourceEvent, add beter typing for removeAllEventListeners and dispatch.

* Update docs.

Author: wojciechkrol

README.md

@@ -139,17 +139,19 @@ If you use Redux you can get the actual value directly from the store instance.
 
 ```typescript
 // full example: https://snack.expo.dev/@quiknull/react-native-sse-redux-example
+type CustomEvents = "ping";
+
 const Example: React.FC = () => {
-    const userName = useSelector((state: RootState) => state.user.name);
+    const name = useSelector((state: RootState) => state.user.name);
 
-    const pingHandler: EventSourceListener = useCallback(
+    const pingHandler: EventSourceListener<CustomEvents, 'ping'> = useCallback(
         (event) => {
             // In Event Source Listeners in connection with redux
             // you should read state directly from store object.
-            console.log("User name from component selector: ", userName); // bad
+            console.log("User name from component selector: ", name); // bad
             console.log("User name directly from store: ", store.getState().user.name); // good
         },
-        [userName]
+        []
     );
 
     useEffect(() => {
@@ -160,7 +162,7 @@ const Example: React.FC = () => {
             "https://example.com/my-private-topic"
         );
 
-        const es = new EventSource(url, {
+        const es = new EventSource<CustomEvents>(url, {
             headers: {
                 Authorization: {
                     toString: function () {
@@ -201,7 +203,7 @@ const options: EventSourceOptions = {
 Using EventSource you can handle custom events invoked by the server:
 
 ```typescript
-import EventSource from "react-native-sse";
+import EventSource, { EventSourceListener, EventSourceEvent } from "react-native-sse";
 
 type MyCustomEvents = "ping" | "clientConnected" | "clientDisconnected";
 
@@ -226,6 +228,57 @@ es.addEventListener("clientDisconnected", (event) => {
 });
 ```
 
+Using one listener for all events:
+
+```typescript
+import EventSource, { EventSourceListener } from "react-native-sse";
+
+type MyCustomEvents = "ping" | "clientConnected" | "clientDisconnected";
+
+const es = new EventSource<MyCustomEvents>(
+  "https://your-sse-server.com/.well-known/hub"
+);
+
+const listener: EventSourceListener<MyCustomEvents> = (event) => {
+  if (event.type === 'open') {
+    // connection opened
+  } else if (event.type === 'message') {
+    // ...
+  } else if (event.type === 'ping') {
+    // ...
+  }
+}
+es.addEventListener('open', listener);
+es.addEventListener('message', listener);
+es.addEventListener('ping', listener);
+```
+
+Using generic type for one event:
+
+```typescript
+import EventSource, { EventSourceListener, EventSourceEvent } from "react-native-sse";
+
+type MyCustomEvents = "ping" | "clientConnected" | "clientDisconnected";
+
+const es = new EventSource<MyCustomEvents>(
+  "https://your-sse-server.com/.well-known/hub"
+);
+
+const pingListener: EventSourceListener<MyCustomEvents, 'ping'> = (event) => {
+  // ...
+}
+// or
+const pingListener = (event: EventSourceEvent<'ping', MyCustomEvents>) => {
+  // ...
+}
+
+es.addEventListener('ping', pingListener);
+```
+
+`MyCustomEvents` in `EventSourceEvent` is optional, but it's recommended to use it in order to have better type checking.
+
+---
+
 Custom events always emit result with following interface:
 
 ```typescript

index.d.ts

@@ -1,8 +1,5 @@
-export type EventType = 'open' | 'message' | 'error' | 'close';
-
-export interface BaseEvent {
-  type: string;
-}
+export type BuiltInEventType = 'open' | 'message' | 'error' | 'close';
+export type EventType<E extends string = never> = E | BuiltInEventType;
 
 export interface MessageEvent {
   type: 'message';
@@ -54,20 +51,26 @@ export interface EventSourceOptions {
   pollingInterval?: number;
 }
 
-export type EventSourceEvent = MessageEvent | OpenEvent | CloseEvent | TimeoutEvent | ErrorEvent | ExceptionEvent;
+type BuiltInEventMap = {
+  'message': MessageEvent,
+  'open': OpenEvent,
+  'close': CloseEvent,
+  'error': ErrorEvent | TimeoutEvent | ExceptionEvent,
+};
 
-export type EventSourceListener<E extends string = never> = (
-  event: CustomEvent<E> | EventSourceEvent
+export type EventSourceEvent<E extends T, T extends string = any> = E extends BuiltInEventType ? BuiltInEventMap[E] : CustomEvent<E>;
+export type EventSourceListener<E extends string = never, T extends EventType<E> = EventType<E>> = (
+  event: EventSourceEvent<T>
 ) => void;
 
 declare class EventSource<E extends string = never> {
   constructor(url: URL | string, options?: EventSourceOptions);
   open(): void;
   close(): void;
-  addEventListener(type: E | EventType, listener: EventSourceListener<E>): void;
-  removeEventListener(type: E | EventType, listener: EventSourceListener<E>): void;
-  removeAllEventListeners(type?: E | EventType): void;
-  dispatch(type: E | EventType, data: E | EventSourceEvent): void;
+  addEventListener<T extends EventType<E>>(type: T, listener: EventSourceListener<E, T>): void;
+  removeEventListener<T extends EventType<E>>(type: T, listener: EventSourceListener<E, T>): void;
+  removeAllEventListeners<T extends EventType<E>>(type?: T): void;
+  dispatch<T extends EventType<E>>(type: T, data: EventSourceEvent<T>): void;
 }
 
 export default EventSource;