Definitelytyped: React-Bootstrap. How to define `onSelect` handler?

[trbngr]

• [x ] I tried using the latest react-bootstrap/react-bootstrap.d.ts file in this repo and had problems.
• [x] I tried using the latest stable version of tsc. https://www.npmjs.com/package/typescript
• [ ] I have a question that is inappropriate for StackOverflow. (Please ask any appropriate questions there).
• [ ] I want to talk about xxxx/xxxx.d.ts.
  
  
  
  • The authors of that type definition are cc/ @....
  
  

I've tried this.

<DropdownButton
    onSelect={(eventKey: any, e: React.SyntheticEvent<{}>) => console.log('e', e)}
/>

Error:

error TS2322: Type '(eventKey: any, e: SyntheticEvent<{}>) => void' is not assignable to type 'SelectCallback & EventHandler<SyntheticEvent<DropdownButton>>'.

the only thing that doesn't throw an ERROR is

<DropdownButton
    onSelect={(e: any) => console.log('e', e)}
/>

but e is, rightfully, undefined. That's not the signature.

This is driving me nuts. Iv'e looked through the repo history and found where this SelectCallback was added, but there is no explanation and the tests simply use a no-arg callback.

Can somebody help?

[avranju]

Can you try the following?

<DropdownButton
    onSelect={(eventKey: any, e?: React.SyntheticEvent<{}>) => console.log('e', e)}
/>

Making the second parameter of the event handler optional seems to make the TypeScript compiler happy.

[balazsbotond]

@avranju thanks, this has solved the issue for me - but why does it work?

SelectCallback is defined like this:

interface SelectCallback extends React.EventHandler<any> {
    (eventKey: any, e: React.SyntheticEvent<{}>): void;
    /**
        @deprecated
        This signature is a hack so can still derive from HTMLProps.
        It does not reflect the underlying event and should not be used.
    */
    (e: React.MouseEvent<{}>): void;
}

The e parameter isn't optional here.

[alexandro81]

@balazsbotond Did you understand in the end why if the second parameter is optional it works?

[coolgk]

same error here, it's 2018, still no answers to this?

[xdimitarx]

its now 2020 and still no answers. The mystery remains.

[balazsbotond]

@xdimitarx @coolgk @alexandro81

I have good news: I've just tried and this issue seems to have been resolved (latest Typescript, latest @types/react-bootstrap):

<DropdownButton
  title="something"
  onSelect={(eventKey, e) => console.log("e", e)}
/>

If you want to state the parameter types explicitly, you need to write:

<DropdownButton
  title="something"
  onSelect={(eventKey: string | null, e: React.SyntheticEvent<unknown>) =>
    console.log("e", e)
  }
/>

The new SelectCallback definition is:

export declare type SelectCallback = (eventKey: string | null, e: React.SyntheticEvent<unknown>) => void;