declare Keyword in Typescript

by

Do you want to learn about the Typescript declare keyword? In this Typescript tutorial, I will explain how to use the declare keyword in Typescript with a few examples.

The declare keyword in TypeScript is used to tell the TypeScript compiler about the existence of a variable, function, class, or module that is defined elsewhere, such as in JavaScript libraries. It helps in providing type information for better interoperability and type safety, without having any impact on the generated JavaScript code during runtime. This enables TypeScript to understand and work with existing JavaScript code, ensuring a seamless integration.

What is the Typescript declare Keyword?

The declare keyword in TypeScript tells the TypeScript compiler that a specific variable, function, class, or even a whole module exists, even though it might not be defined within the TypeScript codebase. This is particularly useful when using existing JavaScript libraries in a TypeScript project.

Why use the declare keyword in Typescript?

Here are a few important reasons why we use the declare keyword in Typescript.

  • Interoperability: To use JavaScript libraries without TypeScript definitions.
  • Type Safety: Provides type information about external code to TypeScript.
  • No Runtime Impact: Only used by the TypeScript compiler for type checking, not included in the compiled JavaScript.

How to use the declare keyword in Typescript?

Now, let us see how to use the declare keyword in Typescript in various scenarios.

  1. Declaring Variables

When you want to use a global variable that’s not defined in TypeScript, you can declare it using the declare keyword.

declare var jQuery: (selector: string) => any;

jQuery('#my-element').show(); // Now TypeScript knows about jQuery

Example:

  1. Declaring Functions

If there’s a global function from a JavaScript library, you can declare it for type safety in Typescript.

Example:

declare function greet(name: string): void;

greet('Alice'); // TypeScript understands and checks the greet function
  1. Declaring Classes

When using JavaScript classes in TypeScript, you can declare them to ensure proper type-checking.

Example:

declare class Greeter {
    constructor(greeting: string);
    greet(): string;
}

const myGreeter = new Greeter('Hello, world!');
console.log(myGreeter.greet());
  1. Declaring Modules

If you’re importing a module that doesn’t have TypeScript definitions, use the declare module.

Example:

declare module 'my-js-library';

import * as MyJsLibrary from 'my-js-library';
MyJsLibrary.doSomething();
  1. Declaring Namespaces

Namespaces can be declared to group types, interfaces, classes, etc., under a single named scope. You can use the declare keyword to declare namespaces in Typescript.

Example:

declare namespace MyNamespace {
    interface MyInterface { /* ... */ }
    class MyClass { /* ... */ }
}

const instance: MyNamespace.MyClass = new MyNamespace.MyClass();

Best Practices to use Typescript declare keyword

  • Use with External Code: Only use declare for external JavaScript code, not for your own TypeScript code.
  • Prefer Type Definitions: If available, use existing type definitions from DefinitelyTyped (e.g., @types/library-name).
  • Keep it Minimal: Declare only what you need, avoiding large declare blocks.

Conclusion

In this Typescript tutorial, I have explained how to work with the declare keyword in Typescript. With examples, I have explained how to use the declare keyword in Typescript while declaring variables, classes, modules, namespaces, functions, etc.

You may also like:

>