exporting an enum from a typescript type definition file

Question

exporting an enum from a typescript type definition file

As I compile the type definitions for a library that I'm utilizing, I came across one function that identifies the mouse button clicked by an integer:

 //index.d.ts
 export as namespace myLib;
 // activates the library listening for a specific mouse button
 function activate(button : number ) : void

To enhance readability, I introduced an enum:

//index.d.ts
export as namespace myLib;
export enum MouseButton {
    LEFT = 1,
    MIDDLE = 2,
    RIGHT = 4
}

export function activate(button : MouseButton ) : void;

Upon importing and using this function, everything compiles successfully. However, during execution in the browser, the enum seems to be stripped away, resulting in the error message

Cannot read property 'LEFT' of undefined

.

In an attempt to resolve this issue, I restructured the files as follows:

//MouseButton.ts
export enum MouseButton {
    LEFT = 1,
    MIDDLE = 2,
    RIGHT = 4
}

//index.d.ts
export as namespace myLib;
import {MouseButton} from MouseButton;
export {MouseButton} from MouseButton;
export function activate(button : MouseButton ) : void;

Now, I can use

import {MouseButton} from "myLib/MouseButton"; import * as myLib from "myLib"

. Nonetheless, this solution necessitates two imports. Although referencing myLib.MouseButton still compiles, it does not run as intended.

Is there a way to import and reference the MouseButton enum through the myLib imported via import * as myLib? I am seeking an explanation not only on how to achieve this but also on why my initial solution failed or if such an approach is unfeasible. Any pointers to resources elucidating these issues would be highly appreciated.

PS: I also experimented with the syntax recommended here re-export Typescript enum from namespace?, yet it did not yield the desired outcome.

PPS: The module under consideration is a UMD module from the cornerstone project (https://github.com/cornerstonejs/cornerstone) incorporated into an angular 6 project.

typescript typescript-typings

Answer 1

Answer №1

(Adding onto t.animal's response)

Creating declaration files can be quite challenging, as explained in detail in the extensive documentation. Sometimes examining existing .d.ts files can provide assistance.

When it comes to enum, defining them as const enum is a straightforward and neat approach. This method is used for libraries like jquery, as demonstrated in @types/jquery/index.d.ts for Mouse and Key. The advantage of using const enum is that its members are compiled directly as values, unlike standard enums which are compiled as arrays; you can experiment with this distinction on the TypeScript Playground.

Answer 2

(Adding onto t.animal's response)

Creating declaration files can be quite challenging, as explained in detail in the extensive documentation. Sometimes examining existing .d.ts files can provide assistance.

When it comes to enum, defining them as const enum is a straightforward and neat approach. This method is used for libraries like jquery, as demonstrated in @types/jquery/index.d.ts for Mouse and Key. The advantage of using const enum is that its members are compiled directly as values, unlike standard enums which are compiled as arrays; you can experiment with this distinction on the TypeScript Playground.

Answer 3

Answer №2

Thanks to the helpful comment from Romain Denau, I was able to solve my issue. His suggestion pointed me in the right direction by highlighting how the TypeScript compiler generates code from an enum declaration. By declaring the enum as const, the compiler can replace the identifier with its corresponding value, essentially inline it and preventing any leakage of the enum into the production code. This approach has been very effective for me!

//index.d.ts
export as namespace myLib;

export const enum MouseButton {
    LEFT = 1,
    MIDDLE = 2,
    RIGHT = 4
}

export function activate(button : MouseButton ) : void;

Answer 4

Thanks to the helpful comment from Romain Denau, I was able to solve my issue. His suggestion pointed me in the right direction by highlighting how the TypeScript compiler generates code from an enum declaration. By declaring the enum as const, the compiler can replace the identifier with its corresponding value, essentially inline it and preventing any leakage of the enum into the production code. This approach has been very effective for me!

//index.d.ts
export as namespace myLib;

export const enum MouseButton {
    LEFT = 1,
    MIDDLE = 2,
    RIGHT = 4
}

export function activate(button : MouseButton ) : void;

Answer 5

Answer №3

After conducting some brief research on the subject, I came across a noteworthy point regarding exporting enums from a type definition file using export enum const. This method is considered to be suboptimal because it requires enabling the --isolatedModules flag, which might not be feasible in certain environments such as create-react-app, leading to potential complications.

Instead of that approach, I opted for a more conventional syntax in my shared.d.ts file:

  export enum EReviewStatus {
    PENDING = 'PENDING',
    SENT = 'SENT'
  }

Subsequently, I have a separate .js file that is imported into the main block of the package.json like so:

"main": "shared.js",

In this setup, leveraging CommonJS exports to ensure compatibility with both Node.js and the frontend, I include:

module.exports.EReviewStatus = {
  PENDING: 'PENDING',
  SENT: 'SENT'
}

This methodology has proven effective and is generally regarded as a better practice since it promotes clear separation between your code and type definitions.

Answer 6

After conducting some brief research on the subject, I came across a noteworthy point regarding exporting enums from a type definition file using export enum const. This method is considered to be suboptimal because it requires enabling the --isolatedModules flag, which might not be feasible in certain environments such as create-react-app, leading to potential complications.

Instead of that approach, I opted for a more conventional syntax in my shared.d.ts file:

  export enum EReviewStatus {
    PENDING = 'PENDING',
    SENT = 'SENT'
  }

Subsequently, I have a separate .js file that is imported into the main block of the package.json like so:

"main": "shared.js",

In this setup, leveraging CommonJS exports to ensure compatibility with both Node.js and the frontend, I include:

module.exports.EReviewStatus = {
  PENDING: 'PENDING',
  SENT: 'SENT'
}

This methodology has proven effective and is generally regarded as a better practice since it promotes clear separation between your code and type definitions.

Answer 7

Answer №4

In order to export an enum from a .d.ts file, you will need to create a separate file such as constants.ts and export the enum from there instead. This is because enums are treated more like variables rather than types or interfaces.
I hope this solution proves helpful! 😊😊😊😊

Answer 8

In order to export an enum from a .d.ts file, you will need to create a separate file such as constants.ts and export the enum from there instead. This is because enums are treated more like variables rather than types or interfaces.
I hope this solution proves helpful! 😊😊😊😊

Answer 9

Answer №5

I'm taking a similar approach as @TeemuK:

// Creating a constant for exporting
export const ReviewStatusEnum {
    PENDING = 'PENDING',
    SENT = 'SENT'
} as const

// Using inferred valid values for typing
export type ReviewStatusType = keyof typeof ReviewStatusEnum

By doing this, you can avoid duplicating your enum values.

Answer 10

I'm taking a similar approach as @TeemuK:

// Creating a constant for exporting
export const ReviewStatusEnum {
    PENDING = 'PENDING',
    SENT = 'SENT'
} as const

// Using inferred valid values for typing
export type ReviewStatusType = keyof typeof ReviewStatusEnum

By doing this, you can avoid duplicating your enum values.

exporting an enum from a typescript type definition file

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Only JSON objects with a boolean value of true will be returned

combineLatest will trigger only for the initial event

Obtain a union type using the `keyof typeof` syntax

Error: Unable to execute fields.map function while generating a dynamic sitemap using next-sitemap module

Incorporating dynamic dependency injection in Angular 2 through the use of @Input()

I am having trouble getting the guide for setting up a NextJS app with Typescript to function properly

How to dynamically assign a type based on a single choice from multiple options (props)

Using TypeScript along with the "this" parameter

String Compression - Number of Elements

An array becomes undefined once the previous array is removed

At what point do we employ providers within Angular 2?

Developer tools indicate React state property is set despite it always being undefined

Can the type definition be shared between React and AWS CDK when using Node.js?

Different results are being obtained when destructuring props in a component

What is the process for incorporating a third-party library into Angular 6?

What is the best method to retrieve the value of a cell in a different cell within the same row in an Angular Material Data-Table?

Unable to utilize `request.on` event listeners for terminating stream requests in NextJS

Getting Form Value in Component.ts with Angular 5

Encountered an issue loading resource: net::ERR_BLOCKED_BY_CLIENT while attempting to access NuxtJS API

What is the proper way to indicate the pointer to the current element within the array?