Tips for bringing in an enum from TypeScript?

Question

Tips for bringing in an enum from TypeScript?

I am working with a module defined in TypeScript that looks like this:

declare module MyTypes {

    export enum MyEnum {
        GOOD = 'Good',
        BAD = 'Bad',
        UNKNOWN = '-'
    }

   export interface MyType1 {
      myType1:string
   }

}

export default MyTypes;

In another file, I import it using the following code:

import MyTypes from '/my-types'
import MyType1 = MyTypes.MyType1
import MyEnum = MyTypes.MyEnum

However, when referencing MyEnum.GOOD in the code, Chrome throws an exception saying that MyTypes is not defined. What would be the correct way to import enums from modules in TypeScript?

typescript

Answer 1

Answer №1

When utilizing the declare keyword in TypeScript, it does not generate any JavaScript code; instead, it indicates that the code already exists. Interfaces function smoothly because they are removed at runtime. Conversely, enums have tangible string values such as "Good."

If you want everything to function correctly, simply delete the declare keyword.

module MyTypes {

    export enum MyEnum {
        GOOD = 'Good',
        BAD = 'Bad',
        UNKNOWN = '-'
    }

   export interface MyType1 {
      myType1:string
   }

}

export default MyTypes;

Just so you know, your JavaScript enum would appear like this:

export var MyEnum;
(function (MyEnum) {
    MyEnum["GOOD"] = "Good";
    MyEnum["BAD"] = "Bad";
    MyEnum["UNKNOWN"] = "-";
})(MyEnum || (MyEnum = {}));

Answer 2

When utilizing the declare keyword in TypeScript, it does not generate any JavaScript code; instead, it indicates that the code already exists. Interfaces function smoothly because they are removed at runtime. Conversely, enums have tangible string values such as "Good."

If you want everything to function correctly, simply delete the declare keyword.

module MyTypes {

    export enum MyEnum {
        GOOD = 'Good',
        BAD = 'Bad',
        UNKNOWN = '-'
    }

   export interface MyType1 {
      myType1:string
   }

}

export default MyTypes;

Just so you know, your JavaScript enum would appear like this:

export var MyEnum;
(function (MyEnum) {
    MyEnum["GOOD"] = "Good";
    MyEnum["BAD"] = "Bad";
    MyEnum["UNKNOWN"] = "-";
})(MyEnum || (MyEnum = {}));

Tips for bringing in an enum from TypeScript?

Answer №1

Similar questions

The dynamic concatenation of Tailwind classes is failing to have any effect, even though the full class name is being

What is the best way to set the first option in a mat-select to be

Ensuring correct association of values to avoid redundancies

Error message stating: rxjs and firebase encountered a TypeError when attempting to add property 0 because the object is not

React hooks causing dynamic object to be erroneously converted into NaN values

What is the best way to assign a value to a class variable within a method by referencing the 'this' keyword?

Reassigning Key Names and Types Based on Conditions

The 'payload' property is not found within the 'Actions' type

TypeScript error TS6053: Unable to locate file '.ts'

incomplete constructor for a generic class

What is the best way to have Vue i18n fetch translations from a .json file during Unit Testing?

Replacing text with new content when text is stored in a separate file

React Typescript is causing issues with the paths not functioning properly

Warning message regarding unhandled promise rejection in NestJS websockets

Listening for Angular 2 router events

Vue is encountering difficulties resolving the index.vue file located in the parent directory

NX combined with Nest.js and TypeORM, further enhanced with Webpack and Migrations

What is the method for deducing the names that have been announced in a related array attribute

Incorporating a unique variant with Tailwind called "

Unlinked Typescript blob file name