typescript - @types/react-table: Como incluir tipos configurados para usuários do meu pacote?

Contexto: Estamos desenvolvendo uma biblioteca de componentes de UI com React e TypeScript e usamos react-table para o nosso componente de tabela. A biblioteca é publicada como um pacote npm e utilizada em nossos outros projetos.

Eu configurei os tipos conforme descrito na documentação do @types/react-table em um arquivo chamado react-table-config.d.ts. Além disso, criei um novo tipo CustomColumn. Ele é baseado na definição de Column e estende sua funcionalidade para suportar accessores de string aninhados (para que o TypeScript possa reconhecer se foo.bar é um accessor de string válido para os dados da tabela fornecida).

Objetivo: Eu gostaria de fornecer este suporte aprimorado de TypeScript aos usuários da nossa biblioteca. Eu especialmente quero que eles possam usar o CustomColumn.

Problema: Quando eu instalo o pacote da biblioteca em outro projeto, perco o acesso aos meus tipos configurados para react-table. Eles nem estão incluídos no pacote.

Se possível, eu gostaria de evitar ter que publicar um pacote separado para os tipos, embora eu suponha que essa abordagem funcionaria.

O que eu tentei até agora: Fiquei surpreso que isso não funcione de imediato, porque nós estendemos com sucesso o Emotion-Theme com um mecanismo semelhante de extensão de declarações de tipo. Para tornar o tema personalizado disponível para os usuários da biblioteca, simplesmente renomeamos emotion.d.ts para emotion.ts.

Eu tentei o mesmo com react-table-config.d.ts (=> react-table-config.ts) e encontrei muitos erros de TypeScript porque, embora a documentação e a etiqueta atual do TypeScript recomendem o uso de Record<,>, nas definições de tipo reais do DefinitelyTyped, eles usam objetos em seus genéricos.

Após resolver os conflitos de tipos resultantes, o react-table-config.d.ts agora é gerado pelo transpilador e incluído no pacote, mas meus tipos personalizados ainda não são utilizados quando os uso no outro projeto.

Outras coisas que eu tentei até agora:

• Adaptando compilerOptions.typeRoots no tsconfig.json da biblioteca de componentes
• Adaptando compilerOptions.paths no tsconfig.json da biblioteca "usando"
• Alterando as importações na tentativa de tornar react-table-config.d.ts um módulo ambiente, conforme descrito nesta resposta
• usando /// <reference path="../../@types/react-table-config.ts"/> no index.ts onde eu (tento) reexportar Cell e CustomColumn.

Eu realmente gostaria de entender por que isso não funciona, especialmente porque a sobrescrição de Tema para o Emotion está funcionando. As diferenças que eu poderia apontar são que o Emotion suporta TypeScript desde o início, então não há um pacote separado para os tipos.

Se houver algum código específico que possa ser útil, tentarei fornecê-lo (se possível) - mas como isso é mais um problema sistêmico, não quero postar código indiscriminadamente.

Resposta #1

Eu consertei criando um arquivo custom.d.ts na minha pasta types da aplicação consumidora. Neste arquivo, estou referenciando os tipos personalizados na minha biblioteca de componentes

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

Na pasta types da minha biblioteca de componentes, eu tenho react-table.d.ts, que contém todas as substituições de tipos. Algo como

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