Open In App

Explain when to use “declare” keyword in TypeScript

Improve
Improve
Like Article
Like
Save
Share
Report

In TypeScript, the “declare” keyword is important in ambient declarations. These declarations allow us to integrate third-party JavaScript libraries seamlessly into our TypeScript codebase. Think of it as a bridge that connects TypeScript with existing JavaScript code. In this article, we’ll explore when and how to use the “declare” keyword effectively in TypeScript.

What Is the “declare” Keyword?

  • The “declare” keyword informs the TypeScript compiler that a variable or method exists in another file (typically a JavaScript file).
  • It’s similar to an “import” statement but doesn’t import anything; instead, it provides type information.

Use Cases for “declare” Keyword

  • Third-Party Libraries: When working with JavaScript libraries like jQuery, Node.js, or other external dependencies, we can use “declare” to access their methods and variables.
  • Legacy JavaScript Code: Suppose you have an existing JavaScript file with valuable variables or functions. By declaring them in TypeScript, you can leverage their functionality without rewriting everything.

The declare keyword in TypeScript is used for the Ambient declaration of variables or for methods. Ambient Declarations areThis article will show like an import keyword. Which tells the compiler that the source exists in another file. We use Ambient declarations in TypeScript for using the third-party libraries of JavaScript, jQuery, Node, etc. declare keywords directly integrate these libraries in our code and decrease the chance of error in our TypeScript code.

We use the declare keyword only in the Ambient file to use the libraries method and variables.

Syntax:

declare var Variable_Name;
declare module Name_of_Module{// Body of module };

Let’s understand with the help of the following example.

Example:

Now let’s take one example we have one file which contains some useful variables but the file is written in JavaScript. So we can say that we have to write some JavaScript code in TypeScript, It is so time-consuming that we have to write the same code in TypeScript But we have declared keywords that give the functionality to use that same variable at the end of the code. 

Let suppose we have third-party JavaScript code which has a variable that contains the value of some variable but we don’t not the value but with the help of declaring keyword we can use the value of the variable in our code.

Third-party Code:

Javascript
var pi_1 = 3.1415926535 ;
var pi_2 = 3.14159265358979323846 ;
var pi_3 = 3.141592653589793238462643383279;

We want to use this variable in our code so we can use them to declare the keyword with the same name and TypeScript will not throw an error. 

TypeScript Code:

Javascript
declare var pi_1 : any ;

console.log("Value of pi is :",pi_1)

Output:

 [LOG]: "Value of pi is :",  3.1415926535 

Now we can import both file in our HTML code and use them. 

Filename: index.html

html
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
</head>
<body>
    
    <!-- Javascript Library -->
    <script src=
"C:\Users\computers\Desktop\typescript\first1.js">
    </script>
    <script src=
"C:\Users\computers\Desktop\typescript\secons.js">
    </script>
</body>
</html>

Output:

OUTPUT OF CODE


Last Updated : 15 Mar, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads