使用声明模块提取类型以在 .d.ts 文件中使用，而不使其成为模块文件答案

【问题标题】：Pulling in types for use in a .d.ts file with declare module without making it a module file使用声明模块提取类型以在 .d.ts 文件中使用，而不使其成为模块文件
【发布时间】：2019-07-12 17:03:21
【问题描述】：

我正在尝试为我的项目所依赖的 NPM 包（或更具体地说，包中的无类型目录）编写类型声明。

包本身是react-big-calendar，它不捆绑自己的类型，但是有@types/react-big-calendar 为主包提供类型，但不为react-big-calendar/lib/addons/dragAndDrop“子包”本身提供类型.

以上内容让我在import BigCalendar from 'react-big-calendar' 上工作，这很棒，我也想在import withDragAndDrop from 'react-big-calendar/lib/addons/dragAndDrop' 上工作，所以我想我会在declare module 那里工作。

我不能将declare module 语句放在任何 TSX 文件中，因为它必须在它自己的不是 ES 模块的文件中，但它也不能是导入 + 导出免费 TS 文件，因为我也在使用CRA 强制执行 isolatedModules，因此不允许非模块 TS/X 文件。

我可以而且应该将它放在.d.ts 文件中，如下所示：

declare module 'react-big-calendar/lib/addons/dragAndDrop' {
  function withDragAndDrop(calendar: any): any;
  export = withDragAndDrop;
}

这看起来不错，但在打字方面并没有太大的改进。我要输入的函数基本上需要一个 React 组件并返回它并带有一些额外的道具。但是，即使只是 type is 作为一个函数，它接受特定的BigCalendar 组件并返回它也是一个问题，因为我不能在d.ts 文件中使用import 语句（拉入组件类型）。如果我这样做，它会变成一个模块文件，这会破坏declare module 语句。

我正在寻找这样的东西：

declare module 'react-big-calendar/lib/addons/dragAndDrop' {
  function withDragAndDrop(calendar: BigCalendar): typeof BigCalendar & {
    props: {
      extraProp1: string;
      // …
      extraPropN: string;
    }
  };
  export = withDragAndDrop;
}

这样我应该能够像这样使用 HOC：const DragAndDropCalendar = withDragAndDrop(BigCalendar);，然后是 <DragAndDropCalendar originalProp={value} extraProp1={value} />。

缺少的是将类型拉入.d.ts 文件的方式不会将其变成一个模块，从而破坏declare module 语句，剥离我的类型，让我再次陷入困境。

我有哪些选择？我尝试使用require，但它返回any，我无法确定<reference 是否是正确的工具。

【问题讨论】：

标签： javascript reactjs typescript typescript-typings

【解决方案1】：

我想出了如何在类型（在这种情况下用于 RBC 拖放插件）中导入原始组件类型（在本例中为 React Big Calendar，但解决方案是通用的）。

withDragAndDrop.d.ts:

declare module 'react-big-calendar/lib/addons/dragAndDrop' {
    import BigCalendar, { BigCalendarProps, Event } from 'react-big-calendar';

    type withDragAndDropProps<TEvent> = {
        onEventDrop: (args: { event: TEvent, start: stringOrDate, end: stringOrDate, allDay: boolean }) => void;
        onEventResize: (args: { event: TEvent, start: stringOrDate, end: stringOrDate, allDay: boolean }) => void;
    };

    declare class DragAndDropCalendar<TEvent extends Event = Event, TResource extends object = object>
        extends React.Component<BigCalendarProps<TEvent, TResource> & withDragAndDropProps<TEvent>>, {}

    function withDragAndDrop(calendar: typeof BigCalendar): typeof DragAndDropCalendar;
    export = withDragAndDrop;
};

用法：

import withDragAndDrop from 'react-big-calendar/lib/addons/dragAndDrop';
import "react-big-calendar/lib/addons/dragAndDrop/styles.css";
const DragAndDropCalendar = withDragAndDrop(BigCalendar);

// TSX:
<DragAndDropCalendar<MyEvent>  … onEventDrop onEventResize />

【讨论】：