javascript - react-bootstrap-typeahead 的自定义 Typescript 定义

Question

我正在尝试为 react-bootstrap-typeahead 创建自定义 Typescript 定义.到目前为止，这是我根据文档得出的结论:

// Custom made typings based on exampes: https://github.com/ericgio/react-bootstrap-typeahead

declare namespace ReactBootstrapTypeahead {
    import React = __React;

    // Input
    class ReactBootstrapTypeahead extends React.Component<ReactBootstrapTypeaheadProps, any> {

    }

    interface ReactBootstrapTypeaheadProps extends React.HTMLProps<ReactBootstrapTypeahead> {
        align?: string;
        allowNew?: boolean;
        defaultSelected?: any[];
        disabled?: boolean;
        emptyLabel?: string;
        labelKey?: string;
        maxHeight?: number;
        minLength?: number;
        multiple?: boolean;
        name?: string;
        newSelectionPrefix?: string;
        onBlur?(): any;
        onChange?(): any;
        onInputChange?(): any;
        options: any[];
        paginateResults?: number;
        paginationText?: string;
        placeholder?: string;
        renderMenuItemChildren?(): any;
    }
}

declare module 'react-bootstrap-typeahead' {
    export = ReactBootstrapTypeahead;
}

当我尝试使用该组件时出现了一些错误:

Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components).

Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

我是整个 Typescript 定义的新手，所以任何帮助将不胜感激。

Answer 1

当您为库编写声明文件时，强烈建议尝试将所有内容包装在模块化声明文件中而不是全局声明中。

我首先引入一个模块化的 react 声明文件(typings install react --save)。

然后我会更改您的声明文件以专门从 React 中提取类型。

自定义类型/react-bootstrap-typeahead

declare module 'react-bootstrap-typeahead' {
  import React = require('react')
  interface ReactBootstrapTypeaheadProps extends React.HTMLProps<ReactBootstrapTypeahead> {
    // ¯\_(ツ)_/¯
  }
  class ReactBootstrapTypeahead extends React.Component<ReactBootstrapTypeaheadProps, any> {
  }
  export = ReactBootstrapTypeahead
}

在你项目的任何地方，这应该编译得很好

 import ReactTypeahead = require('react-bootstrap-typeahead')