What is the Declare Keyword in TypeScript?

In TypeScript, the declare keyword is used to declare a variable, function, class, or any other type without providing a concrete implementation. It is primarily used to inform TypeScript's type system about the type of a variable or object, commonly when working with third-party JavaScript libraries that do not provide TypeScript type definition files (.d.ts files).

Usage Scenarios and Examples

1. Declaring Global Variables

When working with global variables, such as third-party libraries loaded via <script> tags in an HTML page, TypeScript does not recognize these variables by default. At this point, you can use the declare keyword to specify their types.

typescript
// Assume there is a global variable MyLibrary loaded from an external script
declare var MyLibrary: any;

// Now you can safely use this variable in TypeScript
MyLibrary.doSomething();

2. Using Third-Party JavaScript Libraries

Suppose you are using a third-party library, such as lodash, and it lacks TypeScript type definitions. You can declare the required types yourself.

typescript
// Declare some methods from the lodash library
declare module 'lodash' {
    export function shuffle<T>(array: Array<T>): Array<T>;
}

// When using this method, TypeScript can correctly perform type checking
import * as _ from 'lodash';

let nums = [1, 2, 3, 4, 5];
let shuffled = _.shuffle(nums);

3. Declaring Modules or Files

When importing non-TypeScript files in your TypeScript project (such as CSS files or images), you need to inform TypeScript how to handle them.

typescript
// Declare a CSS module
declare module '*.css' {
    const content: {[className: string]: string};
    export default content;
}

// Now you can safely import CSS files and access their class names
import styles from './styles.css';
console.log(styles.container);  // Using the .container class from CSS

Using the declare keyword is an effective approach for TypeScript to handle non-TypeScript resources. It helps maintain type safety in the code and enables flexible use of existing JavaScript resources.