@types/react-table: How to include configured types for users of my package?

Question

Context: We are developing a UI-component library with React and TypeScript and use react-table for our table component. The library is published as an npm package and used in our other projects.

I have configured the types as described in the documentation of @types/react-table in a file called react-table-config.d.ts. Additionally, I have created a new type CustomColumn. It is based on the Column definition and extends its functionality to support nested string accessors (so that TypeScript can recognize whether foo.bar is a valid string accessor for the given table data).

Goal: I would like to provide this improved TypeScript support to our library users. I especially want them to be able to use the CustomColumn.

Problem: When I install the library package in another project, I lose access to my configured types for react-table. They are not even included in the package.

If possible, I would like to avoid having to publish a separate package for the typings, though I assume this approach would work.

What I've tried so far: I was surprised that this does not work off the bat, because we successfully extend the Emotion-Theme with a similar mechanism of extending type declarations. To make the custom theme available to users of the library, we simply renamed emotion.d.ts to emotion.ts.

I have tried the same with react-table-config.d.ts (=> react-table-config.ts) and ran into a lot of TypeScript errors because while the documentation and current TypeScript etiquette recommends the use of Record<,>, in the actual type definitions from DefinitelyTyped, they use objects in their generics.

After resolving the resulting Type conflicts, the react-table-config.d.ts is now generated by the transpiler and included in the package, but my custom types are still not utilized when I use them in the other project.

Other things I have tried so far:

• Adapting compilerOptions.typeRoots in the tsconfig.json of the component library
• Adapting compilerOptions.paths in the tsconfig.json of the "using" library
• Changing the imports in an attempt to make react-table-config.d.ts an ambient module, as described in this answer
• using /// <reference path="../../@types/react-table-config.ts"/> in the index.ts where I (try to) re-export Cell and CustomColumn.

I would really like to understand why this does not work, especially because the Theme overwrite for Emotion is working. The differences I could point out is that Emotion supports TypeScript off the bat, so there is no separate package for the types.

If there is any specific code that would be of help I will try to provide it (if possible) - but as this is more of a systemic issue I don't want to post code indiscriminately.

Answer 1

I fixed it by creating a custom.d.ts file in my types folder of consuming application. In this file I'm referencing the custom types in my component library

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

In my component library types folder I have react-table.d.ts which contains all the type overrides. Something like

/* 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;
    }
}