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
.   .
``` 

CodePudding user response：

I think it doesn't matter where you place it if used like this

declare global{
//write any interface,type,etc
}
// in the end of the file
export {};

now you will be able to use anything from the file with out the need to import it

CodePudding user response：

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 package for you.