为打字稿定义npm react模块的类型

Question

我正在尝试为一个typescript项目中使用的react模块定义类型react-input-autosize 。 该模块没有现成的类型。

我在类型typings/modules添加了一个目录react-input-autosize typings/modules 。 然后，我在新目录中添加了一个文件index.d.ts 。 我用对导入模块的结构的理解来填充新文件（该类型被打字稿编译器接受）：

/// <reference path="../../globals/react/index.d.ts" />
/// <reference path="../../globals/react-dom/index.d.ts" />

declare module 'react-input-autosize' {
  import * as React from "react"
  import * as ReactDOM from "react-dom"

  export interface AutosizeInputProps extends React.Props<any>{
      className?: string,     
      defaultValue?: any,     
      inputClassName?: string,
      inputStyle?: any, 
      minWidth?: number,
      onKeyDown?: (x:any) => void,
      onChange?: (x:any) => void,
      placeholder?: string,
      placeholderIsMinWidth?: boolean,
      style?: any,  
      value?: string,
      readOnly?: boolean,
      autoFocus?: boolean,
      type?: string
    }

  export class AutosizeInput extends React.Component<AutosizeInputProps, any> {
      constructor(props? : AutosizeInputProps, context? : any);

      greeting: string;
      showGreeting(): void;
  }

  export default AutosizeInput;
}

在这一点上，将模块导入项目已成功开始，这意味着我不再通过执行以下操作获得“找不到模块”错误：

import AutosizeInput from 'react-input-autosize';

不幸的是，实例化AutosizeInput类现在无法在运行时运行，因为AutosizeInput结果未定义。

在同一项目中的非打字稿文件中，然后import AutosizeInput from 'react-input-autosize'; 仍然可以使用，因此在未键入时可以从npm正确导入模块。

Answer 1

您default导入：

import AutosizeInput from 'react-input-autosize';

将尝试导入default导出。 但是模块react-input-autosize没有默认导出。 您可以尝试：

import * as AutosizeInput from 'react-input-autosize';

并从导出中删除default ：

export = AutosizeInput;

希望能帮助到你。