How to configure custom global interfaces (.d.ts files) for TypeScript?

Question

I\'m currently working on a ReactJS project which uses Webpack2 and TypeScript. Everything works perfectly apart from one thing - I can\'t a find a way to move interfaces th

Answer 1

"Magically available interfaces" or global types is highly discouraged and should mostly be left to legacy. Also, you should not be using ambient declaration files (e.g. d.ts files) for code that you are writing. These are meant to stand-in the place of external non-typescript code (essentially filling in the typescript types into js code so that you can better integrate it with javascript).

For code you write you should be using plain .ts files to define your interfaces and types.

While global types are discouraged, the answer to your issue is that there are two types of .ts files in Typescript. These are called scripts and modules.

Anything in a script will be global. So if you define your interfaces in a script it will be available globally throughout your application (as long as the script is included in the compilation through either ///<reference path=""> tags or through files:[] or includes:[] or the default **/*.ts in your tsconfig.json.

The other file type is 'module', and anything in a module will be private to the module. If you export anything from a module it will be available to other modules if those other modules chose to import it.

What makes a .ts file a "script" or a "module"? Well.... if you use import/export anywhere in the file, that file becomes a "module". If there are no import/export statements then it is a global script.

My guess is you have inadvertently used import or export in your declarations and made it into a module, which turned all your interfaces to private within that module. If you want them to be global then you would make sure you are not using import/export statements within your file.