How To Declare Global Variables In TypeScript

Posted on by Christopher
How To Declare Global Variables In TypeScript

To declare global variables in TypeScript you can declare global variables in a module file. Check out the below article to know the specific step.

Declare global variables in TypeScript

Declare global variables in a module file

We do the following things in the TypeScript project:

  • First, create a file with the extension ‘.d.ts’.
  • Use the ‘declare global{}’ statement in that file. Here you can add types for required methods or properties.

Let’s take a look at a specific example below:

Open the ‘src’ folder, and create a subfolder named ‘types’. In ‘types’, create a ‘.d.ts‘ file. Let’s say, in this example, here is your file ‘main.d.ts‘:

declare global {
  var message: string;
  var age: number
  function greeting(person: string): string;
  function add(num1: number, num2: number): number;
}

export {};

We have just extended our global object with two properties, ‘message’ has the type of string and ‘age‘ has the type of number. Along with that, we have two functions: ‘greeting’ has a return value of a string and ‘getSalary’ returns a number.

In some specific cases, if you are not sure about the property’s type, use the ‘any‘ keyword like the following example:

declare global {
  var id: any;
  var message: string;
  var age: number;
  function greeting(person: string): string;
  function getSalary(num1: number, num2: number): number;
}

export {};

One more important thing is that the export statement must be used in the file ‘main.d.ts’ for the purpose of making it an external module.

You can now set values ​​for properties as well as access them.

In main.ts:

//set values
const message = 'Test message'
const age = 22

const greeting = function(person: string){
  return `Hello ${person}`
}

const getSalary = function (num1: number, num2: number) {
  return num1*num2*1.2;
}
 
// access properties
console.log(message)
console.log(age)
 
const result1 = greeting('James')
const result2 = getSalary(10,8) 
console.log(result1, typeof result1)
console.log(result2, typeof result2)

Output:

"Test message"
22
"Hello James", "string"
96, "number"

Declare global variables in a non-module file

This approach declares properties and functions directly without declaring an object. And another difference is that in this declaration method, we do not need to use the export statement.

In main.d.ts:

declare var message: string;
declare var age: number
declare function greeting(person: string): string;
declare function getSalary(num1: number, num2: number): number;

Of course, you can still set and access the properties and functions as the above methods:

//set values
const message = 'Test message'
const age = 22

const greeting = function(person: string){
  return `Hello ${person}`
}

const getSalary = function (num1: number, num2: number) {
  return num1*num2*1.2;
}
 
// access properties
console.log(message)
console.log(age)
 
const result1 = greeting('James')
const result2 = getSalary(10,8) 
console.log(result1, typeof result1)
console.log(result2, typeof result2)

Output:

"Test message"
22
"Hello James", "string"
96, "number"

Information to note

There are a few things you should keep in mind:

You must add the types and names for all the properties and functions that you plan to access.

Only use the ‘var‘ keyword to add typings to properties you plan to set and use in other files.

With both methods, when accessing properties/methods that have not been declared in file main.d.ts, you will get an error message. 

Summary

You have learned how to declare global variables in TypeScript. I hope the information in this article will help you in your project. Thank you for your reading!

Maybe you are interested:

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *