πŸ’‘ This page contain affiliate links. By making a purchase through them, we may earn a commission at no extra cost to you.

3+1 Ways to Declare Global Variables in TypeScript

Ferenc Almasi β€’ 2022 September 20 β€’ Read time 3 min read
  • twitter
  • facebook
TypeScript

To declare global variables in TypeScript, create a type definition file ending with .d.ts, and use the declare var syntax to declare global variables.

Copied to clipboard!
declare var app: {
    create(): void
}

// Now you can use without type errors:
app.create()
global.d.ts

As long as you create .d.ts files within your TypeScript project, TypeScript will automatically pick it up to use it as a type definition file.


Using "declare global"

If you would like to define all global variables within a single object, you can use the declare global syntax, where you need to define all global variables within a global type.

Copied to clipboard!
declare global {
    var app: {
        create(): void
    }
}

// Access global variables both with and without referencing the window
app.create()
window.app.create()
global.d.ts

If you run into the following error: "Augmentations for the global scope can only be directly nested in external modules or ambient module declarations.", you will be able to resolve it by adding export {} to the module.

Copied to clipboard!
export {}

declare global {
    var app: {
        create(): void
    }
}
global.d.ts

Extending the Window Interface

Another way to declare global variables in TypeScript is to extend the built-in Window interface. Instead of using the declare keyword, we need to define an interface called Window, and add our global types on top of it.

Copied to clipboard!
interface Window {
    app: {
        create(): void
    }
}

// βœ”οΈ Access through the window object
window.app.create()

// ❌ Cannot find name 'app'.
app.create()
global.d.ts

TypeScript will automatically merge this interface with the built-in Window interface so you will have both the existing and new types. However, this way you will only be able to access global variables through referencing window. If you try to simply write app.create, you may run into errors.

Looking to improve your skills? Master TypeScript from start to finish.
Master TypeScriptinfo Remove ads

+1: Using Type Assertion

Lastly, as a quick and easy solution, you can also use type assertion to use global variables in a type-safe way. However, be warned that this is not the recommended way to use global variables in TypeScript, you should only use it as a last resort or in exceptional cases.

Copied to clipboard!
// Prevent TypeScript to throw errors for global types
(window as any).app.create()

The downside of using type assertion is that you need to use it each time you are referencing a global variable. For a generic approach, you can use the any type, however, this will prevent proper type checking for your global variables. Both app and its create method are now typed as any.

  • twitter
  • facebook
TypeScript
Did you find this page helpful?
πŸ“š More Webtips
Mentoring

Rocket Launch Your Career

Speed up your learning progress with our mentorship program. Join as a mentee to unlock the full potential of Webtips and get a personalized learning experience by experts to master the following frontend technologies:

Courses

Recommended

This site uses cookies We use cookies to understand visitors and create a better experience for you. By clicking on "Accept", you accept its use. To find out more, please see our privacy policy.