Absolutely, achieving this is definitely possible. All the necessary details can be found at this link

The critical piece to pay attention to is shown below:

declare global {
    /*~ This section is for declaring elements that belong in the global scope or enhance
     *~ existing declarations in the global scope
     */
    interface String {
        fancyFormat(opts: StringFormatOptions): string;
    }
}

After discovering that the accepted answer wasn't working as expected, I decided to do some troubleshooting and managed to get it to work for my specific setup. It's possible that there may be a configuration issue that needs to be addressed. If you encounter any issues with this solution, please let me know and I will remove it.

1. To start, create a definition file in a convenient folder like types/global.d.ts
2. Next, check your tsconfig.json and add

   "*": ["types/*.d.ts"]

   under paths. You can also directly reference the created file if needed.
3. Ensure that your global definitions are placed directly into the root of the file, avoiding the use of declare global or similar syntax.

With these steps completed, you should now be able to utilize the types declared in this file (tested with typescript 3.9.6 and 3.7.5).

For example, your global definition file could look like:

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

Here is an example of how your tsconfig should appear:

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

Although it may be a bit belated, I discovered that you have the freedom to insert a file.d.ts anywhere within your project and it will automatically be recognized.

For instance, in my own project, I needed:

Optional<T> = T | null;

Unsure of where to place this declaration, I created a common.d.ts file in a directory and included the following:

declare type Optional<T> = T | null;

This solution is functioning perfectly without any errors, even without the need for an import statement. It's worth noting that I tested this in vscode, so results may vary in other editors.

(Keep in mind your specific file include/exclude rules, but most projects incorporate all *.ts files)

The solutions provided above can all coexist harmoniously and complement each other effectively. The key lies in the understanding that declaration files (non-modules) need to be somehow accessible to the project, as they do not have exports. Additionally, there exists a syntax that enables any module file (any file utilizing imports/exports, essentially anything within your src folder) to add ambient declarations.

Understanding Ambient Declarations (Non-Modules)

• These files must be included in the project (e.g., through tsconfig.json under "include")
• They should not include any import or export statements
• To import external types, a specific syntax is available

tsconfig.json

{
  "include": ["./src/global.d.ts"],
  // or use wildcard
  "include": ["**/*.d.ts"],
}

src/globals.d.ts

// Global types

type AnyObject<T = any> = Record<string, T>
type AnyFunction = (...args: any[]) => any

// Enhancing existing interfaces via interface merging

interface Window {
  console: AnyObject
}

// Importing external types

declare type BaseContract = import('ethers').BaseContract
declare type _MockContract = import('ethereum-waffle').MockContract
declare type Stub = import('ethereum-waffle').Stub
// Re-defining an existing interface to provide improved typings.
interface MockContract<T extends BaseContract = BaseContract> extends _MockContract {
  mock: {
    [key in keyof T['functions']]: Stub
  }
}

Javascript Modules

• Modules consist of files with import or export statements,
  essentially every file within your src folder.
• Any js (module) file can contribute ambient declarations.

src/app.ts

import React from 'react'

export default MyApp(props: AppProps) {
  return <div>Hi</div>
}

// Ambient declarations

declare global {
  interface Window {
    console: AnyObject
  }
}

To prevent confusion among colleagues, place this disclaimer at the beginning of your Ambient Declarations file

////// -----------------------------------------------------------------------------------------------------------------
/*//// -----------------------------------------------------------------------------------------------------------------

This file serves as an “Ambient declarations file”. The defined types here are globally accessible.
For more information, refer to https://stackoverflow.com/a/73389225/985454

Avoid using `import` and `export` directly in this file! It disrupts ambience.
To import external types in an ambient declarations file (this file), follow this format:

*//**
* @example
* declare type React = import('react')
*//*

To incorporate ambient declarations from any file, including non-ambient ones, use this approach:

*//**
* @example
* declare global {
*   interface Window {
*     ethereum: any
*   }
* }
*//*

/*//// -----------------------------------------------------------------------------------------------------------------
////// -----------------------------------------------------------------------------------------------------------------

// Your type definitions go here ...

Make sure to add this additional information to Sebastian Sebald's response:

Remember to include the following code snippet to turn it into a real module.

export {} 

This step will ensure that everything functions correctly.

Take note of how it should look:

declare global {
    /*~ Add any declarations or enhancements to the global namespace here */
    interface String {
        fancyFormat(opts: StringFormatOptions): string;
    }
}
export {}

When working with global variables in TypeScript, you may face two main challenges:

• Cannot find name 'variable-name', indicating that the variable is not accessible in the global scope.
• The global variable type being any, which means that the type hasn't been properly imported or defined.

Solution

1. To address this, start by declaring the type of the global variable:

// global-types.d.ts
import type { Foo } from "package-with-types";

declare global {
  type Bar = Foo;
}
export {};

💡 Remember, a declaration file is not a module by default, so you need to use export {} to make it a module, import types using import type, and then utilize declare global to define globally accessible types.

2. Next, declare the actual global variable:

// global.d.ts
// eslint-disable-next-line  @typescript-eslint/no-explicit-any
declare const eruda: any;
declare const bar: Bar;

3. This approach enables access to the global variable with proper type hints throughout the project.

References

• https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-9.html#import-types

It's funny how sometimes the solution to a problem is right in front of us, but we overlook it. I found myself stuck for hours trying to understand why my *.d.ts files weren't being recognized. It turns out that in my tsconfig.json, the include property was set up like this (the default from a project template I used):

{
  ...
  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue"
  ]
}

However, I had placed my whatever.d.ts file under types/ to keep my src/ directory organized. 🤦‍♂️ Therefore, the fix for me was simple and straightforward:

1. Add **/*.d.ts or types/*.d.ts to the include property.
2. Remove the include property entirely and rely on the default settings.