If you have written TypeScript code long enough, you've seen the declare keyword. But what does it do and why use it?
The declare keyword tells the TypeScript compiler that an object exists and can be used in the code.
This article explains declaring keywords and shows different use cases through code examples.
definition
In TypeScript, the declare keyword tells the compiler that an object exists (and can be referenced in the code). It declares the object to the TypeScript compiler. In short, it allows developers to use objects declared elsewhere.
The compiler does not compile this statement into JavaScript.
Developers may need to use the declaration keyword:
- Use global variables declared in another file.
- Use another file to generate a function, variable, or class.
- ETC。
Many times, the declare keyword is used in TypeScript declaration files ( . ).
Using the declaration keyword, you can declare:
- variables (const, let, var).
- Type or interface
- Class A
- An enum
- A function
- A module
- Namespace
When declaring a function or class, you declare only their structure, not their implementation.
Specific examples
You want to use Google Analytics scripts in your TypeScript code. To do this, you must include it in the HTML page.
You can include it like this:
<script async src="/gtag/js?id=TAG_ID"></script><script>
= || []; function gtag(){(arguments)};
gtag('js', new Date());
gtag('config', 'TAG_ID');</script>The dataLayer array is declared in HTML. The TypeScript compiler doesn't know it, so if you want to use it, you need to declare it.
Here is the declaration method:
declare const dataLayer: any[];
You can now use the dataLayer variable in your TypeScript code.
use
Typically, TypeScript code requires importing resources such as images or scalable vector graphics (SVG).
In these cases, you must create a declaration for each module.
For example, if we want to use PNG in our code, we can create a declaration like this:
declare module '*.png' { const src: string; export default src;}In this case, we use the wildcard module declaration, so we don't have to declare each image path separately.
How to declare global variables
Enter a variable name in the declaration file and type to declare the global variable.
Here is an example:
declare var CPT: number;
We can now use CPT variables in our code.
How to declare global functions
Write function definitions to the declaration file to declare global functions.
Here is an example:
declare function sayHello(hello: string): void;
Now we can use the sayHello function in our code.
How to declare a class
When declaring a class, you only need to write the class structure, not the implementation of each function.
Here is an example:
declare class Animal { constructor(name: string);
eat(): void;
sleep(): void;}We can now instantiate the Animal class in our code.
How to organize types and objects
To organize multiple types and objects, you can declare one of the following concepts:
- Namespace
- A module
Inside them, all types, objects, classes, etc. are declared.
Here is an example of a namespace declaration:
declare namespace AnimalLib { class Animal { constructor(name: string);
eat(): void;
sleep(): void;
}
type Animals = 'Fish' | 'Dog';}Here is an example of a module declaration:
declare module AnimalLib { class Animal { constructor(name: string);
eat(): void;
sleep(): void;
}
type Animals = 'Fish' | 'Dog';}Use declaration keywords to expand module
Developers can also use declaration keywords to expand modules.
For example, we can add new properties to existing interfaces contained within the module.
Here is an example:
import {
Palette as MuiPallete } from '@mui/material/styles/createPalette';
declare module '@mui/material/styles/createPalette' { interface Palette extends MuiPallete {
custom: {
prop1: string;
}
}}Here, we expand the Palette interface from the Material UI style module and add custom objects.
Add a declaration to the global scope using the declaration keyword
Developers can also use the declaration keyword to add declarations to the global scope.
For example, the following is how to add a new method to a String JavaScript object:
declare global { interface String {
toSmallString(): string;
}}
= (): string => { // implementation.
return '';};In this example, we add a new function called toSmallString to the String prototype.
The final thought
As you can see, the declare keyword is very useful when using variables created elsewhere.
Although this concept is not well known, to be a comprehensive TypeScript programmer and able to help your peers, it must be fully understood.
This is the end of this article about how to correctly use the Declare keyword in TypeScript. For more related TypeScript Declare content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!