React: how to use event.data in onBeforeInput handler without TypeScript error

Question

So the event received by an onBeforeInput handler is typed as React.FormEvent<HTMLInputElement>. This is quite a general type, and doesn't include the data property.

As far as I'm aware the events that onBeforeInput receives (nativeEvents being KeyboardEvent in Firefox, TextEvent in Chrome) will have the data property.

What's the right way to write a handler that uses event.data without TypeScript complaining that Property 'data' does not exist on type 'FormEvent<HTMLInputElement>'?

onBeforeInput={(e) => {
  handleInput(e.data);
  e.preventDefault();
}}

Answer 1

I just check the type definition and found this,

type of e is FormEvent<HTMLInputElement>,

Then the FormEvent is defined as,

interface FormEvent<T = Element> extends SyntheticEvent<T> {
}

The FormEvent is extended the SyntheticEvent, which defined as,

interface SyntheticEvent<T = Element, E = Event> extends BaseSyntheticEvent<E, EventTarget & T, EventTarget> {} 

And when I check the definition of BaseSyntheticEvent, I found this,

interface BaseSyntheticEvent<E = object, C = any, T = any> {
    nativeEvent: E;
    currentTarget: C;
    target: T;
    bubbles: boolean;
    cancelable: boolean;
    defaultPrevented: boolean;
    eventPhase: number;
    isTrusted: boolean;
    preventDefault(): void;
    isDefaultPrevented(): boolean;
    stopPropagation(): void;
    isPropagationStopped(): boolean;
    persist(): void;
    timeStamp: number;
    type: string;
}  

Here we don't have a property call data. Then I just saw that there is a type call, CompositionEvent which extends SyntheticEvent.

interface CompositionEvent<T = Element> extends SyntheticEvent<T, NativeCompositionEvent> {
    data: string;
}

And it has the field data;

So I did,

<input type="text" onBeforeInput={(e:SyntheticEvent) => { 
        let event = e as CompositionEvent; 
        console.log(event.data); 
}} /> 

Or,

interface CustomEvent extends SyntheticEvent {
  data ?: string
}
<input type="text" onBeforeInput={(event:CustomEvent) => { 
        console.log(event.data); 
}} />