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

The options passed to createReadStream in TypeScript do not accept {start: 90, end: 99}

Using Typescript in a definition file requires classes and interfaces to be included in the compiled .js file

Using a Typescript typeguard to validate function parameters of type any[]

Bring in a collection of classes of various types from one TypeScript file to another

Getting a JSON value and saving it to a variable in Angular 4

Exporting ExpressJS from a TypeScript wrapper in NodeJS

Encapsulating functions with multiple definitions in Typescript

Error: The token 'export' in d3zoom is causing a syntax issue

Find all Mondays occurring within a specified date range using Moment.js

Angular 5's data display glitch

Dynamic Object properties are not included in type inference for Object.fromEntries()

Tips for accessing an item from a separate TypeScript document (knockout.js)

Trigger functions on a universal component from the nested component

Group data by two fields with distinct values in MongoDB

Encountering a problem with the Material UI Autocomplete component when trying to implement

Using a single Material Autocomplete input to handle two values within Angular

What is the step-by-step process for implementing tooltips in Ant Design Menu after version 4.20.0?

What steps can I take to ensure my dynamic route functions correctly in NextJs?

The POST requests on Next JS Mock API endpoints include parameters passed in the req.body

Utilize a combination of generic parameters as the keys for objects in TypeScript