Question

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

程序包本身是react-big-calendar，它不捆绑自己的类型，但是有@types/react-big-calendar为主程序包提供了类型，但没有为react-big-calendar/lib/addons/dragAndDrop“ sub-包装”本身。

以上内容使我能够import BigCalendar from 'react-big-calendar'工作，这很棒，而且我也想也import withDragAndDrop from 'react-big-calendar/lib/addons/dragAndDrop'工作，所以我想我只是declare module到那里去。

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

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

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

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

我正在寻找这样的东西：

declare module

因此，我应该能够像这样使用HOC：declare module 'react-big-calendar/lib/addons/dragAndDrop' { function withDragAndDrop(calendar: BigCalendar): typeof BigCalendar & { props: { extraProp1: string; // … extraPropN: string; } }; export = withDragAndDrop; }后跟const DragAndDropCalendar = withDragAndDrop(BigCalendar);。

所缺少的是，将类型拖入<DragAndDropCalendar originalProp={value} extraProp1={value} />文件中的方式不会使它变成破坏.d.ts语句的模块，从而剥夺了我的类型，使我陷入困境再次。

我在那里有什么选择？我尝试使用declare module，但返回require，但我不知道any是否是正确的工具。

Answer 1

我弄清楚了如何在键入中输入原始组件类型（在这种情况下为“ React Big Calendar”，但解决方案是通用的）（在本例中为RBC拖放插件）。

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 />

引入类型以在带有声明模块的.d.ts文件中使用，而不使其成为模块文件

1 个答案: