Making Friends with External Libraries: Using export declare in TypeScript

declare: This keyword is a bit more specific. It tells the TypeScript compiler, "don't worry about creating code for this class itself. I know it exists somewhere else." Think of it as saying "trust me, this class is defined properly elsewhere, just focus on how I'm using it here."

There are a couple of reasons why you might use export declare together:

• External libraries: If you're using a library written in JavaScript (not TypeScript), you might use export declare to tell TypeScript about the classes and functions it provides. This way, the compiler can understand how to use them even though they aren't written in TypeScript itself.
• Separate definition files: In larger projects, you might have a separate file containing just class definitions. This file would use export declare to announce the classes to other parts of the code, but the actual code for the class methods would live elsewhere.

Imagine you're using a popular JavaScript library called MyLibrary that doesn't have built-in TypeScript definitions. You can use export declare to tell TypeScript about the classes it provides:

// In your TypeScript file

export declare class MyLibraryActions {
  static doSomething(arg: string): void;
}

This code says:

• There's a class called MyLibraryActions from the MyLibrary library.
• We want other parts of our code to be able to use it (hence export).
• We don't have the actual definition of the class methods (like doSomething), but we trust it exists in MyLibrary (hence declare).

Separate definition file:

For larger projects, you might separate class definitions from their implementation. Here's an example:

actions.d.ts (definition file):

export declare class UserActions {
  static login(username: string, password: string): void;
  static logout(): void;
}

actions.ts (implementation file):

export class UserActions {
  static login(username: string, password: string) {
    // Implementation logic for login
  }

  static logout() {
    // Implementation logic for logout
  }
}

In this case:

• actions.d.ts uses export declare to tell other parts of the code about the UserActions class and its methods.
• actions.ts contains the actual implementation of the methods.

1. Regular Export (No declare):

If the class definition and its implementation are in the same file, you can simply use the export keyword without declare. This is the most common approach for internal classes within your project.

export class MyClass {
  // Class methods and properties
}

1. Exporting an Instance:

In some cases, you might want to export a specific instance of a class instead of the class itself. You can achieve this by creating the instance and exporting it using a constant or variable.

class MyClass {
  // Class methods and properties
}

const myInstance = new MyClass();
export { myInstance };

1. Exporting from a Module:

If your classes are part of a larger module, you can export them using the export keyword within the module definition. This approach helps organize your code and keeps related classes together.

export module MyModule {
  export class MyClass {
    // Class methods and properties
  }
}