How to declare global types in TypeScript

A global type is a type that can access the global scope. It will be very helpful to you if you have some crucial data type and want to use it in all your project. So how to declare global types in TypeScript? Let’s go into detail.

Declare global types in TypeScript

Use declare global

We will declare global inside the global libraries. The global library is a module that can access all files in your project. With it, you can declare one global type. Global libraries have a name like this global.d.ts. The ‘d’ letter in its name means ‘declare’ that we should use this file to declare all things should use in the global scope. We can call all that thing name, not need to import.

Example:

declare global {
    type personDetail = {
        name: string,
        age: number,
        id: number,
        userName: string,
        email: string
    };

    type person = {
        userName: string,
        id: number
    };
}

export { };

Here I created global accessible type is personDetail and person type.

Then we can implement that type in another file:

// Implement personDetail type
const person1: personDetail = {
    name: "Joma",
    age: 25,
    id: 0,
    userName: "Janna",
    email: "[email protected]"
};

console.log(person1);

Output:

{
  name: 'Joma',
  age: 25,
  id: 0,
  userName: 'Janna',
  email: '[email protected]'
}

In the last line of the global.d.ts file, I use the export method without any value because the import or export statement can turn a file into a module. Only after we can execute the global scope. If not, I will get this error:

declare global {
    type personDetail = {
        name: string,
        age: number,
        id: number,
        userName: string,
        email: string
    }
  
    type person = {
        userName: string,
        id: number,
    }
 
}

The error:

Augmentations for the global scope can only be directly nested in external modules or ambient module declarations.

With declare global, you can also declare variables or methods globally.

You can access the method through the array.

Example:

const anArray = [1, 2, 3,4,5,6 ,7,8, 9]
anArray.get()

Use window interface

If you don’t want to use declare global, you can create an interface named Window and create a variable inside it.

Example:

interface Window {
    person:{
        logName():
    }
}

To access the type, we have to access the window object.

// Access through window object
window.person.logName()

You can read more about how to declare interface here.

Summary

In this article, I showed you how to declare global types in TypeScript. You can use declare global inside the global libraries to declare all global types on top of it. Hope it is helpful to you.

Maybe you are interested:

• Check the Type of a Variable in TypeScript
• Declare an Empty Array for a typed Variable in TypeScript
• How To Initialize Typed variable to Empty Object In TypeScript

Brent Johnson

Hello, guys! I hope that my knowledge in HTML, CSS, JavaScript, TypeScript, NodeJS, ReactJS, MongoDB, Python, MySQL, and npm computer languages may be of use to you. I’m Brent Johnson, a software developer.

---

Name of the university: HOU
Major: IT
Programming Languages: HTML, CSS, JavaScript, TypeScript, NodeJS, ReactJS, MongoDB, PyThon, MySQL, npm