Improve typing for event emitters to Turbo Modules Specs for JS

[longility]

I like where this is going: https://reactnative.dev/docs/next/new-architecture-library-intro#turbomodules-define-specs-in-javascript as it is aligning with how I'm creating the RN modules. I would like to point out that if using typescript or flow, I can see a very common consistency between iOS and android that we want to create specs for are the types for the event emitters, which includes event type and the event (context to help with terminology referenced here addListener(eventType: string, listener: (event: any) => void, context?: Object): EmitterSubscription;.

Here is an example that we are doing right now. Not perfect and can be improved, but hopefully to get an idea.

import { NativeEventEmitter } from 'react-native';
import type { EmitterSubscription } from 'react-native';

import { getNativeFooBar } from './module';

type GenericEventEmitter<TEventType, TEvent = undefined> = {
  addListener: (
    eventType: TEventType,
    listener: (event: TEvent) => void,
    context?: Object
  ) => EmitterSubscription;
  removeAllListeners(eventType: TEventType): void;
};

type NativeFooBarInitializeFailedEvent = {
  errorReason:
    | 'InvalidArguments'
    | 'InvalidSdkKeyOrSecret'
    | 'AccountNotSupported'
    | 'SDKNotEnabledOnAccount'
    | 'UnknownError'
    | 'BusyService'
    | 'InitialStatus'
    | 'RequestOverTime'
    | 'NetworkIssue'
    | 'SDKVersionIncompatibleWithAccount'
    | 'UnsupportedDevice'
    | 'WrongJwtToken';
};

export type NativeFooBarEventEmitter = Omit<
  NativeEventEmitter,
  'addListener' | 'removeAllListeners'
> &
  GenericEventEmitter<'InitializeSucceeded'> &
  GenericEventEmitter<'InitializeFailed', NativeFooBarInitializeFailedEvent> &
  GenericEventEmitter<'AuthExpired'> &
  GenericEventEmitter<'UserLeft'> &
  GenericEventEmitter<'UserJoin'>;

// should not create and store as const in order to handle subscriptions and compatibility issues properly
export const createNativeFooBarEventEmitter = (): NativeFooBarEventEmitter | undefined => {
  const nativeModule = getNativeFooBar();

  return nativeModule ? new NativeEventEmitter(nativeModule) : undefined;
};

[cortinico]

Not perfect and can be improved, but hopefully to get an idea.

I'm not sure I got your point here. How would you change the event definition?

[longility]

If I understand you correctly, the 2nd generic type param "changes" the event definition from here GenericEventEmitter<'InitializeFailed', NativeFooBarInitializeFailedEvent>.

To where you get natural typing based on the eventType such as in this case, InitializeFailed.

[longility]

This may get into more advanced typescript that I'm less familiar without experimenting.

Thinking from a consumer and exploring to maybe spark better ideas...

I don't like this but this would work:

new NativeEventEmitter<
        GenericEventEmitter<'InitializeSucceeded'> &
          GenericEventEmitter<'InitializeFailed', NativeFooBarInitializeFailedEvent> &
          GenericEventEmitter<'AuthExpired'> &
          GenericEventEmitter<'UserLeft'> &
          GenericEventEmitter<'UserJoin'>
      >(nativeModule)

A little weird too but could also work...

type FooBarEvents = {
  'InitializeSucceeded': undefined,
  'InitializeFailed': NativeFooBarInitializeFailedEvent
}

new NativeEventEmitter<FooBarEvents>(nativeModule)