Search code examples
reactjstypescriptscopenext.js.d.ts

What is the scope of .d.ts files


So I am using react-table in a Typescript Next.js projects. This package consists of modules (like sorting, pagination, etc...) that aren't included by default but must be enabled in the main useTable hook. By default the types are set up in a way that doesn't include properties related to the modules.

I am following the following instructions: https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react-table

Where it says to create a react-table-config.d.ts file and place it somewhere in my source directory and then modify it to only include the modules I need.

However while I might need some modules in one component, I might not need it in another. So I was wondering whether such files have a global scope or if it is possible to have two such files for two seperate components.

So for example if I have the following directory structure:

src
|
|-- components
|   |
|   |-- sorted-table
|   |   |
|   |   |-- index.tsx
|   |   |
|   |   |-- react-table-config.d.ts
|   |
|   |-- paginated-table
|   |   |
|   |   |-- index.tsx
.   .   |
.   .   |-- react-table-config.d.ts
.   .
``` 

Solution

  • You just need one d.ts file for each package defined in your package.json.

    However while I might need some modules in one component, I might not need it in another. So I was wondering whether such files have a global scope or if it is possible to have two such files for two seperate components.

    Yes, it has global scope and it's not possible to have two d.ts for the same package in one project. You can put it anywhere in your project, as long as it's inside tsconfig files or include.

    TypeScript will look for all d.ts files specified under tsconfig.json files, include, exclude and map declare to the correct packages for you.