Have not been able to get this to work in Typescript

[donker]

I guess this is not really a bug, but I've tried for several hours in vain to get this component to load in a Typescript/React solution. It just refuses to import. If anyone has managed to do so I'd love to see an example.

Thanks

[ericgio]

Please be sure to read through the documentation and contribution guidelines before opening an issue.

Questions like this are more appropriate for a forum like StackOverflow since your question will remain open and potentially help others facing the same issue. Posting there also helps me keep the issues queue manageable and limited to bugs and feature requests. Feel free to post an issue on SO and x-post the link back here and I or others can try to help you.

Finally, providing examples of your code help others understand what you are doing and where you may be doing something wrong.

[marcomorain]

Hi @donker

I have been using this component with Typescript.

I added a file called Typeahead.d.ts to my project, with the following contents:

declare module 'react-bootstrap-typeahead' {

  interface TypeaheadProps {
    align?: 'justify' | 'left' | 'right'
    allowNew?: boolean
    defaultSelected?: Array<any>
    disabled?: boolean
    emptyLabel?: string
    labelKey?: string
    maxHeight?: number
    minLength?: number
    multiple?: boolean
    name?: string
    newSelectionPrefix?: string
    onBlur?: (e: Event) => any
    onChange?: (selected: Array<any>) => any
    onInputChange?: (input: string) => any
    options: Array<any>
    paginateResults?: number
    paginationText?: string
    placeholder?: string
    renderMenuItemChildren?: (props: TypeaheadProps, option: any, index: number) => any
    selected?: Array<any>
  }

  export var Typeahead: React.ClassicComponentClass<TypeaheadProps>

  export default Typeahead
}

And then imported like this:

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

• Marc