Exporting declarations and different export types within a TypeScript ambient module

Question

Exporting declarations and different export types within a TypeScript ambient module

I am currently working on adding specific types for the config module in our application. The config module is generated dynamically from a JSON file, making it challenging to type. Since it is a node module, I am utilizing an ambient module for the typings.

// config.d.ts
declare module 'config' {
  interface AppConfig {
    name: string;
    app_specific_thing: string;
  }
  const config: AppConfig;
  export = config;
}

My goal is to also export AppConfig so that I can use it as a type like this:

import * as config from 'config';

const appConfig: config.AppConfig;

My Attempts

When attempting to export AppConfig directly within the config module, I encountered this error:

TS2309: An export assignment cannot be used in a module with other exported elements.
Moving AppConfig to another file (e.g. ./app_config) and importing it into config.d.ts resulted in this error:

TS2439: Import or export declaration in an ambient module declaration cannot reference module through relative module name.
Placing the AppConfig export outside of the config module in the same file led to this error:

TS2665: Invalid module name in augmentation. Module 'config' resolves to an untyped module at $PROJ/config/lib/config.js, which cannot be augmented.

This issue resembles a situation discussed in this Stackoverflow thread, where the main requirement is to have the ability to import AppConfig as a type directly in other TypeScript files.

typescript typescript-typings

Answer 1

Answer №1

If you're feeling lost in the world of Typescript, one concept that may add to the confusion is declaration merging.

Declaration merging involves the compiler combining two separate declarations with the same name into a single definition. In this example, we have two declarations of config.

// config.d.ts
declare module 'config' {

  // This nested namespace 'config' will merge with the enclosing 
  // declared namespace 'config'.
  // https://www.typescriptlang.org/docs/handbook/declaration-merging.html
  namespace config {
    interface AppConfig {
      name: string;
      app_specific_thing: string;
      my_enum: FakeEnum;
    }

    interface MyInterface {}

    // See side note below
    type FakeEnum = 'A' | 'B' | 'C';
  }

  const config: AppConfig;
  export = config;
}

You can import and use these declarations like this:

import * as config from 'config';
import { FakeEnum, MyInterface } from 'config';

It's worth noting that you cannot use enums with an ambient module (like declare module 'config') because enums compile to a JS object which cannot be added to a module you don't control. To get around this limitation, you can mimic an enum using a union type:

type FakeEnum = 'A' | 'B' | 'C';

Answer 2

If you're feeling lost in the world of Typescript, one concept that may add to the confusion is declaration merging.

Declaration merging involves the compiler combining two separate declarations with the same name into a single definition. In this example, we have two declarations of config.

// config.d.ts
declare module 'config' {

  // This nested namespace 'config' will merge with the enclosing 
  // declared namespace 'config'.
  // https://www.typescriptlang.org/docs/handbook/declaration-merging.html
  namespace config {
    interface AppConfig {
      name: string;
      app_specific_thing: string;
      my_enum: FakeEnum;
    }

    interface MyInterface {}

    // See side note below
    type FakeEnum = 'A' | 'B' | 'C';
  }

  const config: AppConfig;
  export = config;
}

You can import and use these declarations like this:

import * as config from 'config';
import { FakeEnum, MyInterface } from 'config';

It's worth noting that you cannot use enums with an ambient module (like declare module 'config') because enums compile to a JS object which cannot be added to a module you don't control. To get around this limitation, you can mimic an enum using a union type:

type FakeEnum = 'A' | 'B' | 'C';

Exporting declarations and different export types within a TypeScript ambient module

My Attempts

Answer №1

Similar questions

What is the best way to show TypeScript code using "<code>" tags within an Angular application?

Creating TypeScript versions of `delegate` pattern JavaScript code

Encountering Issue: Unable to locate control with the given name in Angular when generating Dynamic Form with FormGroup

disappearing of vue event on single file component HTML element

Can one mimic a TypeScript decorator?

Determine in React whether a JSX Element is a descendant of a specific class

Angularjs 2 Error: Unable to access the 'infos' property of an undefined object using the Http Client

Nestjs RabbitMq Microservices

Module 'csstype' not found

Typescript support on Emacs

Issue in Typescript: The method `clear` or `send` is not recognized in type `unknown` within Protractor framework

Shifting successive elements in an array alternates

Is there a way to monitor user engagement within my app without depending on external analytics platforms?

Guide to upgrading ag-grid-community from 20.1.0 to 24.1.0

I am having trouble accessing my JSON data via HTTP get request in Angular 2 when using TypeScript

next.js users may encounter a problem with react-table not rendering correctly

Accessing an Excel file in TypeScript using the .xlsx format

Exploring NextJS with Typescript

Issue encountered while trying to determine the Angular version due to errors in the development packages

Function 'Once' in Typescript with Generics