Property 'firstName' does not exist on type 'Option'. Property 'firstName' does not exist on type 'string'.

[NatashaBlong]

Version

react-bootstrap-typeahead - 6.1.1
I am also using Typescript for my application

Steps to reproduce

import { Typeahead } from 'react-bootstrap-typeahead';

export default function ExampleForm(): ReactElement {

// The example code is straight from the examples in GitHub

   return(
        <Typeahead
          labelKey={option => `${option.firstName} ${option.lastName}`}
          options={[
            {firstName: 'Art', lastName: 'Blakey'},
            {firstName: 'Jimmy', lastName: 'Cobb'},
            {firstName: 'Elvin', lastName: 'Jones'},
            {firstName: 'Max', lastName: 'Roach'},
            {firstName: 'Tony', lastName: 'Williams'},
          ]}
        />
   );
}

Expected Behavior

No Errors

Actual Behavior

.firstName and .lastName are underlined in the labelKey field, with the following errors:

Property 'firstName' does not exist on type 'Option'.
Property 'firstName' does not exist on type 'string'.

Property 'lastName' does not exist on type 'Option'.
Property 'lastName' does not exist on type 'string'.

The strange thing is that when i run the code in localhost, the typeahead displays and functions as expected.
However the above errors do cause compiling errors when testing.

[NatashaBlong]

The following solves my issue, but I think there should at least be an update to the documentation, if not an update to the source code, if the example is its intended use.

 import { Typeahead } from 'react-bootstrap-typeahead';
 
 interface Person {
  firstName: string,
  lastName: string
}

const people: Person[] = [
  { firstName: 'Art', lastName: 'Blakey' },
  { firstName: 'Jimmy', lastName: 'Cobb' },
  { firstName: 'Elvin', lastName: 'Jones' },
  { firstName: 'Max', lastName: 'Roach' },
  { firstName: 'Tony', lastName: 'Williams' },
];
 
  function resolveOptionKey(option: unknown): string {
    const person = option as Person;
    return `${option.firstName} ${option.lastName}`;
  }

export default function ExampleForm(): ReactElement {

   return(
        <Typeahead
          labelKey={resolveOptionKey}
          options={people}
        />
   );
}

[ericgio]

Hi @NatashaBlong, this looks like a duplicate of #704. It's a typing issue, so the component will still work as you mentioned. The workaround is more or less what you arrived at, which is to cast the type. Happy to accept a PR to the docs that might make this clearer; some of the docs were written before the conversion to TS and need updating.