typescript - @类型/ react 表 : How to include configured types for users of my package?

Question

上下文:我们正在使用 React 和 TypeScript 开发一个 UI 组件库并使用 react-table对于我们的表组件。该库作为 npm 包发布，并在我们的其他项目中使用。

我已经按照 documentation of @types/react-table 中的描述配置了类型在名为 react-table-config.d.ts 的文件中.此外，我创建了一个新类型 CustomColumn .它基于 Column定义并扩展其功能以支持嵌套字符串访问器(以便 TypeScript 可以识别 foo.bar 是否是给定表数据的有效字符串访问器)。

目标:我想为我们的库用户提供这种改进的 TypeScript 支持。我特别希望他们能够使用 CustomColumn .

问题:当我在另一个项目中安装库包时，我无法访问我为 react-table 配置的类型.它们甚至不包含在包装中。

如果可能的话，我想避免为打字发布一个单独的包，尽管我认为这种方法可行。

到目前为止我尝试了什么:我很惊讶这并没有立即奏效，因为我们 successfully extend the Emotion-Theme with a similar mechanism of extending type declarations .为了让图书馆的用户可以使用自定义主题，我们简单地重命名为 emotion.d.ts至 emotion.ts .

我对 react-table-config.d.ts 进行了同样的尝试(=> react-table-config.ts ) 并遇到了很多 TypeScript 错误，因为虽然文档和当前的 TypeScript 礼仪建议使用 Record<,> ，在 DefinitelyTyped 的实际类型定义中，他们在泛型中使用对象。

解决了由此产生的类型冲突后，react-table-config.d.ts现在由转译器生成并包含在包中，但是当我在其他项目中使用它们时，我的自定义类型仍然没有被使用。

到目前为止我尝试过的其他事情:

• 适应compilerOptions.typeRoots在tsconfig.json组件库
• 适应compilerOptions.paths在tsconfig.json “使用”图书馆的
• 更改导入以尝试生成 react-table-config.d.ts环境模块，如所述in this answer
• 使用/// <reference path="../../@types/react-table-config.ts"/>在index.ts我(尝试)重新导出 Cell和 CustomColumn .

我真的很想知道为什么这不起作用，特别是因为情感的主题覆盖正在工作。我可以指出的区别是 Emotion 直接支持 TypeScript，因此没有针对这些类型的单独包。

如果有任何特定的代码可以提供帮助，我会尝试提供它(如果可能的话)——但由于这更像是一个系统性问题，我不想随意发布代码。

Answer 1

我通过在消费应用程序的 types 文件夹中创建一个 custom.d.ts 文件来修复它。在这个文件中，我引用了我的组件库中的自定义类型

/// <reference types="<component-library>/types/react-table" />

在我的组件库 types 文件夹中，我有 react-table.d.ts，其中包含所有类型覆盖。有点像

/* eslint-disable */
import { UseRowSelectInstanceProps, UseRowSelectRowProps, UseRowSelectState, UseTableColumnOptions } from 'react-table';

declare module 'react-table' {
    export interface ColumnInterface<D extends object = {}> extends UseTableColumnOptions<D> {
        collapse?: boolean;
        centerHeader?: boolean;
    }
    export interface TableInstance<D extends object = {}>
        extends Omit<TableOptions<D>, 'columns' | 'pageCount'>,
            UseTableInstanceProps<D>,
            UseRowSelectInstanceProps<D> {}

    export interface Row<D extends object = {}> extends UseTableRowProps<D>, UseRowSelectRowProps<D> {}

    export interface TableState<D extends object = {}> extends UseRowSelectState<D> {
        hiddenColumns?: Array<IdType<D>> | undefined;
    }
}