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

What could be causing my date variable to reset unexpectedly within my map function?

Ways to transfer information from HTML form components to the Angular class

Utilizing Angular2 to scan barcodes

Array filtering functions similarly to marketplace filtering tools

You cannot assign type 'Node | null' to type 'Node' when attempting to loop through HTML elements in TypeScript

Steps to dynamically populate dropdown menus based on the selected options from other dropdown menus

What could be the reason for my Angular 2 app initializing twice?

Using Angular NgUpgrade to inject an AngularJS service into an Angular service results in an error message stating: Unhandled Promise rejection: Cannot read property 'get' of undefined; Zone:

Mocha has difficulty compiling Typescript code on Windows operating system

The absence of a semicolon following the interface declaration is the issue

The function screen.getByText is not available in this context

Angular 14: Deleting an item from a FormArray triggers unintended form submission due to Angular animation

Transform Typescript into compiled css files without using any additional tools

Retrieve information from a URL to transmit to a different page in NextJS using Typescript and AppRouter

What is the best way to get my Discord bot to respond in "Embed" format using TypeScript?

Utilize knex.js and TypeScript to create queries with specific conditions

Troubleshooting: Issues with APIGateway's Default Integration

Combine two elements in an array

How can I implement a feature in Angular where clicking the edit button loads a form (in a separate component) pre-populated with previous data, along with an update button for

Update the style dynamically in Angular using an ngFor directive and an array of data