@types/react-table: Strategies for integrating customized types for consumers of my package?

Question

@types/react-table: Strategies for integrating customized types for consumers of my package?

Context: Our team is currently working on a UI component library using React and TypeScript, leveraging react-table for our table component. This library has been packaged as an npm module and is being utilized in various projects within our organization.

To enhance the TypeScript support for our library users, I have set up the types according to the instructions provided in the documentation of @types/react-table within a file named react-table-config.d.ts. Additionally, I have introduced a new type called CustomColumn, which builds upon the existing Column definition by enabling nested string accessors for improved data recognition by TypeScript (e.g., identifying foo.bar as a valid string accessor for the table data).

Goal: My primary aim is to provide this advanced TypeScript support to our library consumers, especially making it possible for them to utilize the CustomColumn.

Problem: However, upon installing the library package in another project, the configured types for react-table seem to be inaccessible as they are not included in the package at all.

I am exploring ways to avoid the need for a separate typings package, although that could potentially resolve the issue.

What I've tried so far: I found it surprising that this solution did not work immediately, considering we were able to extend the Emotion-Theme successfully through a similar extension mechanism for type declarations. To make the custom theme accessible to library users, we simply renamed emotion.d.ts to emotion.ts.

Similarly, I attempted a comparable method with react-table-config.d.ts (renamed to

react-table-config.ts</code), but encountered numerous TypeScript errors due to inconsistencies between the recommended usage of <code>Record<,>

and the object-centric generics used in the actual DefinitelyTyped type definitions.

Despite resolving these type conflicts and ensuring that react-table-config.d.ts is generated and included in the package via transpilation, my custom types remain underutilized when applied in the external project.

Other strategies I have tested include:

Adjusting compilerOptions.typeRoots in the tsconfig.json of the component library
Modifying compilerOptions.paths in the tsconfig.json of the dependent library
Altering imports in an effort to transform react-table-config.d.ts into an ambient module, following guidance from this response
Including
```
/// <reference path="../../@types/react-table-config.ts"/>
```
in the index.ts file where I attempt to export Cell and CustomColumn

I am eager to comprehend why this approach is ineffective, particularly given that the Theme override for Emotion functions as expected. One key difference I noted is that Emotion inherently supports TypeScript, eliminating the need for a separate typings package.

If providing specific code snippets would aid in troubleshooting, I am willing to share them if feasible. Nonetheless, since this issue appears systemic in nature, I prefer not to indiscriminately disclose code snippets.

typescript npm react-table definitelytyped

Answer 1

Answer №1

I managed to resolve the issue by setting up a new custom.d.ts file within the types directory of my application that consumes the component library. This file serves as a reference for the custom types used in the component library.

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

Within the types folder of my component library, I created a file named react-table.d.ts which includes all the necessary type overrides. It looks something like this:

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

Answer 2

I managed to resolve the issue by setting up a new custom.d.ts file within the types directory of my application that consumes the component library. This file serves as a reference for the custom types used in the component library.

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

Within the types folder of my component library, I created a file named react-table.d.ts which includes all the necessary type overrides. It looks something like this:

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

@types/react-table: Strategies for integrating customized types for consumers of my package?

Answer №1

Similar questions

What does ngModel look like without the use of square brackets and parenthesis?

The tracker error message reads: TRK0005 - CL.exe could not be found. The specified file cannot be located by the system

What could be the reason for the malfunctioning of the Yarn package manager installation?

Error Message in Excel Online Office Scripts: "The function namedRanges.findAsync is not recognized" occurs while executing script with Microsoft Flow

Is it considered a bad practice to simply paste a package name into Package.json?

What is the best way to click on a particular button without activating every button on the page?

Typescript Angular2 filtering tutorial

Unexpected behavior with AWS DynamoDB ScanInput ExpressionAttributeValue

What is the best way to utilize the constructor in a JavaScript object so that only the properties within `this` are utilized?

Working with Typescript to map and sort the key values of a new datasource object

NestJS: Specify the data type for @Body()

Effortlessly collapsing cards using Angular 2 and Bootstrap

What is the reason Nav cannot be directly used in the constructor instead of using @ViewChild(Nav) nav: Nav in Ionic?

Typescript - Stripping multiple characters from the start and end of a string/Retrieving attributes of a JSON list element

To save time and optimize your CI environment, steer clear of repeatedly installing all node_modules dependencies

When using npm link, the connected package fails to update

The yarn test execution encounters a failure due to a conflict in jasmine-ts and yargs

What is the significance of the .bin folder located within the node_modules directory? And, could you explain

Is there a way to display an array of data in separate mat-form-field components?

Resolved: An effective solution for troubleshooting ObjectID-related type problems in Mongoose