How to add local module declaration to generated types?

[daviddelusenet]

Hi,

I'm using this tool in my project which is also using the react-table package. The types of this package are published separately to the DefinitelyTyped repo.

However, the types of the react-table aren't ready to use: you need to create your own react-table.d.ts file inside of your project where you specify all of the hooks you're using. Now my problem is that I can't get the dts-bundle-generator to add the react-table.d.ts file to my output causing the build to fail. This is what I'm seeing:

src/app/components/organisms/Table/Paginator/Paginator.tsx(46,22): error TS2339: Property 'pageIndex' does not exist on type 'TableState<{}>'.
src/app/components/organisms/Table/Paginator/Paginator.tsx(46,33): error TS2339: Property 'pageSize' does not exist on type 'TableState<{}>'.
src/app/components/organisms/Table/Paginator/Paginator.tsx(68,22): error TS2339: Property 'pageIndex' does not exist on type 'TableState<{}>'.
src/app/components/organisms/Table/Paginator/Paginator.tsx(68,33): error TS2339: Property 'pageSize' does not exist on type 'TableState<{}>'.
src/app/components/organisms/Table/Paginator/Paginator.tsx(83,13): error TS2339: Property 'pageIndex' does not exist on type 'TableState<{}>'.
src/app/components/organisms/Table/Paginator/Paginator.tsx(83,24): error TS2339: Property 'pageSize' does not exist on type 'TableState<{}>'.
src/app/components/organisms/Table/Paginator/Paginator.tsx(95,38): error TS2339: Property 'setPageSize' does not exist on type 'TableInstance<{}>'.
src/app/components/organisms/Table/Paginator/Paginator.tsx(117,38): error TS2339: Property 'gotoPage' does not exist on type 'TableInstance<{}>'.
src/app/components/organisms/Table/Paginator/Paginator.tsx(135,51): error TS2339: Property 'canPreviousPage' does not exist on type 'TableInstance<{}>'.
src/app/components/organisms/Table/Paginator/Paginator.tsx(136,53): error TS2339: Property 'gotoPage' does not exist on type 'TableInstance<{}>'.
src/app/components/organisms/Table/Paginator/Paginator.tsx(142,47): error TS2339: Property 'canPreviousPage' does not exist on type 'TableInstance<{}>'.
src/app/components/organisms/Table/Paginator/Paginator.tsx(143,49): error TS2339: Property 'previousPage' does not exist on type 'TableInstance<{}>'.
src/app/components/organisms/Table/Paginator/Paginator.tsx(148,47): error TS2339: Property 'canNextPage' does not exist on type 'TableInstance<{}>'.
src/app/components/organisms/Table/Paginator/Paginator.tsx(149,49): error TS2339: Property 'nextPage' does not exist on type 'TableInstance<{}>'.
src/app/components/organisms/Table/Paginator/Paginator.tsx(155,51): error TS2339: Property 'canNextPage' does not exist on type 'TableInstance<{}>'.
src/app/components/organisms/Table/Paginator/Paginator.tsx(156,53): error TS2339: Property 'gotoPage' does not exist on type 'TableInstance<{}>'.
src/app/components/organisms/Table/Paginator/Paginator.tsx(156,71): error TS2339: Property 'pageCount' does not exist on type 'TableInstance<{}>'.
src/app/components/organisms/Table/Table.tsx(44,91): error TS2339: Property 'page' does not exist on type 'TableInstance<{}>'.
src/app/components/organisms/Table/Table.tsx(69,13): error TS2322: Type 'boolean | ((instance: TableInstance<{}>) => boolean)' is not assignable to type 'boolean'.
  Type '(instance: TableInstance<{}>) => boolean' is not assignable to type 'boolean'.
src/app/components/organisms/Table/Table.tsx(96,60): error TS2339: Property 'hasCellPadding' does not exist on type 'ColumnInstance<{}>'.
src/app/components/organisms/Table/Table.tsx(99,70): error TS2339: Property 'getSortByToggleProps' does not exist on type 'ColumnInstance<{}>'.
src/app/components/organisms/Table/Table.tsx(100,55): error TS2339: Property 'canSort' does not exist on type 'ColumnInstance<{}>'.
src/app/components/organisms/Table/Table.tsx(106,67): error TS2339: Property 'isSorted' does not exist on type 'ColumnInstance<{}>'.
src/app/components/organisms/Table/Table.tsx(107,57): error TS2345: Argument of type 'ColumnInstance<{}>' is not assignable to parameter of type 'UseSortByColumnProps<object>'.
  Type 'ColumnInstance<{}>' is missing the following properties from type 'UseSortByColumnProps<object>': canSort, toggleSortBy, getSortByToggleProps, clearSortBy, and 3 more.
src/app/components/organisms/Table/Table.tsx(131,69): error TS2339: Property 'hasCellPadding' does not exist on type 'ColumnInstance<{}>'.
src/app/components/organisms/Table/Table.tsx(132,74): error TS2339: Property 'onClick' does not exist on type 'ColumnInstance<{}>'.
src/app/components/organisms/Table/Table.tsx(134,62): error TS2339: Property 'onClick' does not exist on type 'ColumnInstance<{}>'.
src/app/components/organisms/Table/Table.tsx(137,61): error TS2339: Property 'onClick' does not exist on type 'ColumnInstance<{}>'.

If I remove the react-table.d.ts file and run tsc to do a types check these are the exact errors I'm getting.

This are the contents of my tsconfig.json:

{
    "compilerOptions": {
        "allowJs": false,
        "allowSyntheticDefaultImports": true,
        "esModuleInterop": true,
        "forceConsistentCasingInFileNames": true,
        "jsx": "react",
        "module": "ES2015",
        "moduleResolution": "node",
        "noEmit": true,
        "noImplicitAny": true,
        "noUnusedLocals": true,
        "resolveJsonModule": true,
        "target": "ESNext",
        "types": [
            "node"
        ],
    },
    "include": [
        "src/@types/react-table.d.ts", // I just added this line to try to get it working
        "src/**/*",
        "src/.storybook/**/*"
    ]
}

Contents of dtsconfig.json:

{
    "compilationOptions": {
        "preferredConfigPath": "./tsconfig.dts.json"
    },
    "entries": [
        {
            "filePath": "./src/lib/index.ts",
            "outFile": "./index.d.ts",
            "libraries": {
                "allowedTypesLibraries": [
                    "react",
                    "styled-components"
                ],
                "importedLibraries": [
                    "moment",
                    "react-dates"
                ]
            },
            "output": {
                "sortNodes": true,
                "umdModuleName": "DexelsUIKit"
            }
        }
    ]
}

If you need any more information please let me know. Our team has been stuck for over a week now trying to figure out this issue and it's completely blocking our workflow since we can't publish new versions of our package anymore.

Thanks in advance!

[timocov]

Hi there,

these errors are caused because you don't provide the compiler information about which types you need to load in specific files to being compiled. I meant, that for the compiler it's enough to src/@types/react-table.d.ts as include value to get the project compiled, but dts-bundle-generator doesn't use that value at all, because it uses the only input filed you've specified. I can't tell you what approach are better, but I'd suggest you import that file (src/@types/react-table.d.ts) directly in every file uses it. You can do it, for example, via triple-slash directive: /// <reference path="path/to/src/@types/react-table.d.ts" />. Also, you can try to specify types compiler option (see https://www.typescriptlang.org/docs/handbook/tsconfig-json.html#types-typeroots-and-types). I'd say that if you'll try to compile, for instance, the only src/app/components/organisms/Table/Table.tsx file it won't be compiled due the same error, because the compiler don't know which files it needs to load additionally - that's why I'd suggest to use reference path way (also you could use <reference types="" />, but in this case you need to specify typesRoot as well).

So, to fix it try to add <reference path="../../../../../@types/react-table.d.ts" /> to src/app/components/organisms/Table/Paginator/Paginator.tsx, and <reference path="../../../../@types/react-table.d.ts" /> to src/app/components/organisms/Table/Table.tsx (I'm not sure about count of exits ../ but you can play with them 😂).

[daviddelusenet]

@timocov thanks for super quick response! I only needed to add <reference path="../../../../../@types/react-table.d.ts" / to my Table.tsx file and my builds started working again.

Since the project already contained a types.ts file which contains some types which are used throughout the project I decided to do the reference there.

Thank you so much! 😄

[timocov]

You're welcome! 🙂

[daviddelusenet]

@timocov I've a follow up question: because of your help my previous issue was resolved.

However, I noticed that inside my generated index.d.ts file the types for my own react-table.d.ts file aren't present. So the build passes but the types assigned to my Table component aren't correct.

How do I actually add my custom declare module types to my generated index.d.ts file?

[timocov]

So the build passes but the types assigned to my Table component aren't correct.

How that types are "injected" to the generated dts file? Via /// <reference types or import? Or just inlined? Maybe something else? 🙂

How do I actually add my custom declare module types to my generated index.d.ts file?

See at allowedTypesLibraries, importedLibraries and inlinedLibraries options. That options allows you control which libraries should be imports, which one should be added via /// <refenrece types directive and which one should be inlined into generated dts file.

[daviddelusenet]

They are imported like this:

import { Column, IdType, TableInstance, TableOptions, UseTableCellProps, UseTableColumnOptions, UseTableColumnProps, UseTableInstanceProps, UseTableOptions, UseTableRowProps } from 'react-table';

This however only imports the 'default' types from the react-table package and not my 'updated' types from my local react-table.d.ts file.

I've the following in my dtsconfig.json file:

"importedLibraries": [
    "moment",
    "react-dates",
    "react-table"
]

[timocov]

I'm not sure that this could be solved somehow. You can try to set inlinedLibraries to ['react-table'] and see the result, but I'm afraid that TypeScript itself might looking at @types/react-table instead for types when someone will use your generated declaration file (I'm not sure about that, just my guess, but I admit it might be true).

I don't know what a good solution for you is for this, possible make a PR in https://github.com/DefinitelyTyped/DefinitelyTyped with fixes? Maybe use declaration merging is better than write your own "package" with types for that library (declaration merge allows you "override" or "add" some types to libraries outside of your project - see https://www.typescriptlang.org/docs/handbook/declaration-merging.html). I'd say that I need to better understand your case...

[daviddelusenet]

Hi @timocov ,

I'll try to explain my situation better: the react-table types work in a way that you need to overwrite/extend their types when you use the react-table package.

This is because the react-table package is flexible in its usage, meaning you can add different hooks which will change the options and settings you have available. Because the available options/settings change based on your configuration the types also need to update to reflect these new options/settings.

This isn't being done automatically though: you need to do this yourself. This is why I added a react-table.d.ts file to my project. In this file I'm basically importing the types for the hooks my setup is using. That looks something like this:

export interface TableOptions<D extends object>
    extends UseExpandedOptions<D>,
    UseFiltersOptions<D>,
    UseGroupByOptions<D>,
    UsePaginationOptions<D>,
    UseRowSelectOptions<D>,
    UseSortByOptions<D> {}

The TableOptions interface in the official typings file looks like this:

export interface TableOptions<D extends object> extends UseTableOptions<D> {}

Since my own react-table.d.ts file doesn't get added to my library exports it means that every time I try to use my Table component it complains when I try to access one of the options/settings which aren't part of the export interface TableOptions<D extends object> extends UseTableOptions<D> {} type. These settings and options are actually there and work, TypeScript just doesn't know about them.

Let me know if you need any more information, will be happy to provide it!

[timocov]

@daviddelusenet sorry for the delay. Do you have any example of the project uses react-table library and provides typings? At the moment I think that you don't need to "extend" the react-table package but just provide typings for table within your package, but I'm not sure that understand everything correctly.

[daviddelusenet]

Hi @timocov , sorry for the delay.

Here you can read about the react-table types: https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react-table

So I've done exactly what it says there and that works great during development. However, these types don't get included in the build.

[daviddelusenet]

@timocov here you can read more about what I've done: TanStack/table#1591

So basically I've done this:

• Create a file react-table-config.d.ts using the example. This file expands the default types with all of the plugin extensions currently in the type definitions.
• Edit your local copy of react-table-config.d.ts and remove all of the interfaces that don't apply to your chosen set of plugins.

[daviddelusenet]

Fixed it by just turning on the inlineDeclareExternals option in my dtsconfig.json. 😅

[timocov]

@daviddelusenet Sorry for the delay - last days I was on a vacation so I can't even check out/play with that. If it works for you - awesome 🎉 🙂