react-boostrap-typeahead的自定义Typescript定义

时间:2016-08-24 13:48:08

标签: javascript reactjs typescript

我正在尝试为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.

我是这个整个打字稿定义的新手,所以任何帮助都会受到赞赏。

1 个答案:

答案 0 :(得分:3)

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

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

然后我会更改你的声明文件,专门从反应中提取。

自定义-分型/反应的自举-预输入

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')