为 TypeScript 中的 npm react 模块定义类型

Question

我正在尝试为一个名为react-input-autosize的React模块定义类型，以便在TypeScript项目中使用。该模块没有准备好的类型定义。

我添加了一个名为react-input-autosize的目录到typings/modules中。 然后我在新目录下添加了一个名为index.d.ts的文件。 我填充了这个新文件，根据我对导入模块结构的理解（这被TypeScript编译器接受）：

/// <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被认为是未定义的。

在同一项目中的非TypeScript文件中，import AutosizeInput from 'react-input-autosize';仍然可以工作，因此当未定义类型时，模块从npm正确导入。

- Giuseppe Maggiore

Answer 1

你的default导入：

import AutosizeInput from 'react-input-autosize';

将尝试导入default导出。但是模块react-input-autosize没有默认导出。您能否尝试使用以下内容：

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

并从您的导出中删除default：

export = AutosizeInput;

希望能有所帮助。

- Remo H. Jansen

---

根据您的建议，我得到了“错误TS2497：模块'react-input-autosize'解析为非模块实体，无法使用此结构导入”的错误提示。 - Giuseppe Maggiore

如果我将类AutosizeInput标记为export default，那么编译器不会抱怨，但我无法在React中实例化该类，因为该符号显然是空的。这意味着出于某种原因，我可以使类型正常工作，但导入时类无法在运行时加载... - Giuseppe Maggiore