Global types in typescript

TypescriptTypescript Typings

Typescript Problem Overview


Is there a way to make a file in your typescript file that defines globally accessible types?

I like typescript but find that when i want to be truly type safe I have to explicitly import types from all over the system. It's rather annoying.

Typescript Solutions


Solution 1 - Typescript

Yes this is possible. You can find all information here: https://www.typescriptlang.org/docs/handbook/declaration-files/templates/global-modifying-module-d-ts.html

The important part is this:

declare global {
    /*~ Here, declare things that go in the global namespace, or augment
     *~ existing declarations in the global namespace
     */
    interface String {
        fancyFormat(opts: StringFormatOptions): string;
    }
}

Solution 2 - Typescript

I found the accepted answer is not working (maybe it is some configuration that needs to be done?). So with some tinkering, I got it to work for me (maybe I also have some weird configuration option? Let me know if it doesn't work and I will remove this answer).

  1. Create a definition file in a suitable folder. I will be using types/global.d.ts
  2. Check your tsconfig.json and include "*": ["types/*.d.ts"] under paths. (You should also be able to directly address the created file if you care to).
  3. Put your global definitions directly into the root of the file NO declare global or similar.

Now you should be good to go to use the types declared in this file (tested with typescript 3.9.6 and 3.7.5).

Example file:

// global.d.ts
declare interface Foo {
	bar: string;
	fooBar: string;
}

What your tsconfig should look like:

[...]
"paths": {
	"*": ["types/*.d.ts"]
},
[...]

Solution 3 - Typescript

A little late but, you can add a file.d.ts anywhere in your project as I've noticed, and it will be picked up.

For example, in my project I wanted a:

Optional<T> = T | null;

And I didn't know where to add it, so I added a common.d.ts in a folder, and added:

declare type Optional<T> = T | null;

Now it's being picked up and no errors. Didn't even need to import it. This of course being tested in vscode, not sure if it will work in your editor.

(Depending on your file include/exclude rules of course, but most projects include all *.ts)

Solution 4 - Typescript

In addition to Sebastian Sebald's Answer

don't forget to

export {} 

which makes it actual module.

so like this.

this is working.

declare global {
    /*~ Here, declare things that go in the global namespace, or augment
     *~ existing declarations in the global namespace
     */
    interface String {
        fancyFormat(opts: StringFormatOptions): string;
    }
}
export {}

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionTalView Question on Stackoverflow
Solution 1 - TypescriptSebastian SebaldView Answer on Stackoverflow
Solution 2 - TypescriptEliasView Answer on Stackoverflow
Solution 3 - TypescriptRaidView Answer on Stackoverflow
Solution 4 - TypescriptbyyoungView Answer on Stackoverflow