Including an Enum in an Interface causes a disruption in the Interface functionality

Question

Including an Enum in an Interface causes a disruption in the Interface functionality

Is there a way to include an enum in an interface while avoiding issues with using the interface elsewhere? (specifically in typescript 2.5) Let's take a look at some sample code:

allEnums.ts

export enum ButtonType {
    Top = 1,
    Bottom = 2
}

// other enums can be added here

buttonInterface.d.ts

import { ButtonType } from "allEnums";
interface ButtonInterface {
    buttonType: ButtonType
}

formInterface.d.ts

interface FormInterface { 
    buttons: ButtonInterface[]
}

The issue arises when trying to use the interface in formInterface.d.ts

Cannot find name 'ButtonInterface'

To resolve this, we can import the ButtonInterface into the FormInterface like so:

import { ButtonInterface } from "buttonInterface";

However, importing Interfaces may not be the best solution for this situation.

typescript enums interface

Answer 1

Answer №1

Starting from the release of TypeScript 2.9, it is now possible to import a type without having to import its containing module:

import("./buttonInterface").ButtonInterface

This feature can be utilized in your specific scenario, as long as you are working with TypeScript version 2.9 or higher. Additionally, you have the option to assign an alias to it:

type ButtonInterface = import('./buttonInterface').ButtonInterface;

interface FormInterface { 
    buttons: ButtonInterface[]
}

Your integrated development environment or text editor may not support this new functionality yet, so ensure to check for any errors by running tsc if you encounter issues within your editor.

Answer 2

Starting from the release of TypeScript 2.9, it is now possible to import a type without having to import its containing module:

import("./buttonInterface").ButtonInterface

This feature can be utilized in your specific scenario, as long as you are working with TypeScript version 2.9 or higher. Additionally, you have the option to assign an alias to it:

type ButtonInterface = import('./buttonInterface').ButtonInterface;

interface FormInterface { 
    buttons: ButtonInterface[]
}

Your integrated development environment or text editor may not support this new functionality yet, so ensure to check for any errors by running tsc if you encounter issues within your editor.

Answer 3

Answer №2

In my opinion, using enums as a type is a more organized approach, as it eliminates the need to write additional code for interfaces.

enumTypes.ts

export enum UserType {
    Admin = 1,
    User = 2
}

userInterface.d.ts

type UserType = import('enumTypes').UserType;
interface UserInterface {
    userType: UserType
}

profileInterface.d.ts

interface ProfileInterface { 
    users: UserInterface[]
}

Answer 4

In my opinion, using enums as a type is a more organized approach, as it eliminates the need to write additional code for interfaces.

enumTypes.ts

export enum UserType {
    Admin = 1,
    User = 2
}

userInterface.d.ts

type UserType = import('enumTypes').UserType;
interface UserInterface {
    userType: UserType
}

profileInterface.d.ts

interface ProfileInterface { 
    users: UserInterface[]
}

Including an Enum in an Interface causes a disruption in the Interface functionality

Answer №1

Answer №2

Similar questions

The value of Component variable is not defined

How can Angular be taught to parse an object wrapped in JavaScript JSON format?

Typescript encounters transpilation issues when the spread operator is omitted for undefined values {...undefined}

Is there a way to determine the type of an example without having to export it?

The returned type of intersected functions in Typescript does not match the inferred type

Passing specific props to child components based on their type in a React application using TypeScript

Achieving a similar functionality to Spring Security ACL in a Node.js AWS Lambda serverless environment

The sliding hamburger menu children fail to move in unison with the parent

Conventions for Encapsulating Private Properties in Typescript

Accessing Component Instance in Ionic 3 Modal Controller

What is the best way to make the current year the default selection in my Select control within Reactive Forms?

Unable to utilize ngForm when values are already predefined

Upon upgrading @types/angular, I encountered error TS2694 stating that the namespace 'angular' does not have an exported member 'xxx'

Is there a method to incorporate a click event for the confirm button in the ElMessageBox UI element?

Next.js (TypeScript) - Error: Property 'req' is not recognized on the type 'GetServerSideProps'

Angular: Ensuring Elements inside mat-stepper within mat-dialog Adjust to the Height of the Dialog

The functionality of Angular 6 Material Nested Tree is disrupted when attempting to use dynamic data

Is it possible to integrate nedb with NativeScript?

How to optimize and reduce bundle size in Webpack using tree-shaking, babel-loader, TypeScript tsconfig target configuration, @babel/preset-env with modules set to false, and setting side

Is it possible to use the `fill` method to assign a value of type 'number' to a variable of type 'never'?