---
title: "Type Declarations for External Global Objects in TypeScript React"
date: 2024-03-26T14:51:52.000Z
author: Z.SHINCHVEN
tags: [TypeScript, React, Type Declarations]
canonical: https://atlassc.net/2024/03/27/type-declarations-for-external-global-objects-in-typescript-react
---
## Introduction

When working with TypeScript in React projects, you may encounter situations where you need to use external global objects that are not defined within your project. TypeScript requires type declarations for these global objects to provide type checking and intellisense support.

This blog post will guide you on how to declare types for external global objects that are not defined within your TypeScript React project. By creating a type declaration file, you can instruct TypeScript to recognize these global objects and use them seamlessly in your code.

## Solution

### 1. **Create a Type Declaration File (.d.ts)**

Create a new file with a `.d.ts` extension in your project directory. This file will contain the type declarations for your global object.

### 2. **Declare the Global Object**

Inside the `.d.ts` file, declare the global object using the `declare` keyword. If you want to access the object directly without using `window`, use the `declare var` syntax. For example:

```typescript
// globals.d.ts
declare var ap: {
  doSomething: (arg: string) => void;
};
   ```

### 3. **Use the Global Object in Your Code**

Once you have declared the global object, you can use it directly in your TypeScript files:

```typescript
function myFunction() {
  ap.doSomething("Hello, world!");
}
```

### 4. **Ensure TypeScript Recognizes Your Declaration**

Make sure your `tsconfig.json` file includes your `.d.ts` file. By default, TypeScript should automatically include all `.d.ts` files in your project.

## Benefits of Using Type Declarations

Using type declarations for external global objects provides several benefits:

* **Improved type checking:** TypeScript will check the types of your code and ensure that you are using the global object correctly.
* **Better code readability:** Type declarations make your code more readable and easier to understand.
* **Reduced errors:** By declaring the types of your global objects, you can reduce the number of errors in your code.

## Conclusion

By following these steps, you can use external global objects in your TypeScript React apps without encountering errors related to undefined objects. Remember to declare all the properties and methods you intend to use for complete type checking.