Exporting constants using abstract classes in TypeScript files

In my Typescript files, I've been exporting constant variables like this:

export const VALIDATION = {
  AMOUNT_MAX_VALUE: 100_000_000,
  AMOUNT_MIN_VALUE: 0,
  DESCRIPTION_MAX_LENGTH: 50,
};

My constant files only contain this one export without any accompanying class. Recently, a colleague suggested that it might be better to export these same constants using an abstract class like this:

export abstract class VALIDATION {
  public static readonly AMOUNT_MAX_VALUE = 100_000_000;
  public static readonly AMOUNT_MIN_VALUE = 0;
  public static readonly DESCRIPTION_MAX_LENGTH = 50;
};

The reasoning behind this suggestion is that it allows developers to easily see the values of the constant variables within VSCode.

Initially, I find this pattern of using an abstract class for exporting constant values unusual, and I haven't come across any resources discussing this approach elsewhere.

Would using an abstract class to export constant values result in any negative impact on the application during build or runtime?

Answer №1

Both options allow you to view the values, but in the first scenario, you have the ability to edit them.

export const VALIDATION = {
  AMOUNT_MAX_VALUE: 100_000_000,
  AMOUNT_MIN_VALUE: 0,
  DESCRIPTION_MAX_LENGTH: 50,
};

VALIDATION.AMOUNT_MIN_VALUE = 5; // This will work

On the other hand, when using a class with readonly flags, editing becomes restricted.

An alternative approach would be to utilize an enum.

export enum VALIDATION {
    AMOUNT_MAX_VALUE = 100_000_000,
    AMOUNT_MIN_VALUE = 0,
    DESCRIPTION_MAX_LENGTH = 50,
};

By using an object instead of a class, there can be some performance improvements.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

``Incorporating event and parameter as arguments for a function in an Angular application: a tutorial

I am trying to incorporate a checkbox in Angular where if it is enabled, the event.target.checked value is true, and if it is disabled, the event.target.checked value is false. When clicking the checkbox, I need to call a function where I want to pass the ...

Navigating through an Angular 2 service

I'm struggling to retrieve an array from a JSON API and then loop through it. I can't seem to grasp how it all fits together. Any guidance would be greatly appreciated. This is what my service looks like: import {Injectable} from '@angular ...

Exploring the world of Typescript class decorators and accessing its content from within

Greetings, I am searching for a method to define a class in TypeScript and retrieve its value from within the parent. abstract class Base{ fetchCollectionName(): string{ // code here to return child class attribute value } } @Collectio ...

Navigating the terrain of multiple checkboxes in React and gathering all the checked boxes

I am currently developing a filter component that allows for the selection of multiple checkboxes. My goal is to toggle the state of the checkboxes, store the checked ones in an array, and remove any unchecked checkboxes from the array. Despite my attemp ...

Share information by including the provider within the @component declaration in Angular

I am looking to explore a new method of passing data using providers directly within the component itself. For instance, I am curious if there is a way to pass a variable from one component to another without relying on routing or other traditional methods ...

I'm having trouble managing state properly in Safari because of issues with the useState hook

Encountering Safari compatibility issues when updating a component's state. Though aware of Safari's stricter mode compared to Chrome, the bug persists. The problem arises with the inputs: Whenever an option is selected from the dropdown, it cl ...

Error in TypeScript logEvent for Firebase Analytics

Currently utilizing firebase SDK version 8.0.2 and attempting to record a 'screen_view' event, encountering an error message stating: Error: Argument of type '"screen_view"' is not assignable to parameter of type '" ...

Regulation specifying a cap of 100.00 on decimal numbers entered into a text input field (Regex)

I have created a directive that restricts text input to only decimal numbers in the text field. Below is the code for the directive: import { HostListener, Directive, ElementRef } from '@angular/core'; @Directive({ exportAs: 'decimal ...

What is the best way to showcase a standalone JSON object within the template?

I have a detailed component that is designed to show the 5-day forecast for a specific city. I have successfully retrieved the data using the http.get(Url) method. However, I am unsure of how to bind this JSON data to my view. I am familiar with displayi ...

A guide to seamlessly uploading files to s3 using nextjs, node, and typescript

I've been struggling to successfully upload a basic image to s3 using ts/nextjs/node. Despite having all the necessary credentials and code in place, I'm still unable to get it working. Can someone please provide clear instructions on how to achi ...

Compelled to utilize unfamiliar types in TypeScript generics

When working with a Typescript React form builder, I encountered a situation where each component had different types for the value and onChange properties. To tackle this issue, I decided to utilize generics so that I could define the expected types for e ...

The superclass defines the type of the subclass

There is an abstract typescript class like this: abstract class Abstract { constructor (public parent?: Abstract) { } } Then, two subclasses are defined as follows: class Sub1 extends Abstract { } class Sub2 extends Abstract { } The issue aris ...

What is the proper way to implement a class decorator in TypeScript?

How can a class decorator be implemented to accept only specific classes? A attempted solution is as follows: class Component { age: number; } function registerComponent(name: string) { return <T extends Component>(constructor: T): T => { ...

The compiler is showing an error with code TS5023, indicating that the option 'strictTemplates' is not recognized

When trying to compile my Angular application (v10), I encountered the following error message. An unexpected issue has occurred: tsconfig.json:14:5 - error TS5023: Unknown compiler option 'strictTemplates'. 14 "strictTemplates": t ...

"Prevent further button clicks by disabling it after the initial click with ActionRowBuilder in Discord.Js

Encountering a puzzling issue where I am unable to disable a button after it has been clicked. The option to disable the button does not seem to appear. When attempting to deactivate the button, I utilize the following function: const row = new ActionRowBu ...

What could be causing the malfunction of getter/setter in a Vue TypeScript class component?

Recently delving into the world of vue.js, I find myself puzzled by the unexpected behavior of the code snippet below: <template> <page-layout> <h1>Hello, Invoicer here</h1> <form class="invoicer-form"> ...

Turf.js - Missing type declarations when importing into a Vue/Vite environment

Struggling with Turf.js's bbox functionality. Despite all my efforts, TypeScript type definitions remain elusive. I attempted the following steps: Included in package.json: "dependencies": { ... "@turf/turf": "6.5.0&q ...

What steps should I take to successfully compile my Typescript Webpack project without any errors?

Currently, I am attempting to convert only two .js files into .ts files within my webpack node.js project and then compile them (actions.ts and flux.ts). When I execute the command: webpack --progress --colors I encounter the following errors: 'use ...

Posting forms in NextJS can be optimized by utilizing onChange and keypress events for input fields

I am currently working on my first Edit/Update form within a newly created NextJs application as I am in the process of learning the framework. I seem to be facing an issue where the form constantly posts back to the server and causes the page to refresh ...

Sending an array from one page to another using Angular 2

I am currently working on a weather application using Angular. As a beginner in Angular, I am facing an issue with sending data to the second page to display the weather information of the selected city. Can someone please help me identify where the proble ...