When working with TypeScript, we often create constant objects like the example below:
export const AppConstants = {
VAL1: 'val1',
VAL2: 'val2'
}
Now, the question arises - can we reference one individual property from another within the same object? For instance:
export const AppConstants = {
VAL1: 'val1',
VAL2: VAL1 + 'val2'
}
An alternative approach is to utilize a function for retrieving the property:
export const AppConstants = {
VALUE1: 'value1',
VALUE2: () => AppConstants.VALUE1 + 'value2'
}
To simplify things, creating a class is the best approach. This allows us to utilize this in a safe and predictable manner. Additionally, incorporating `const assertion` ensures that our values are strictly defined as literals, rather than just generic strings.
class AppConstants {
a = 'val1' as const
b = `${this.a}val2` as const
}
export const appConstants = new AppConstants();
let r1 = appConstants.a // 'val1'
let r2 = appConstants.b // 'val1val2'
Learn more about how as const works here
Discover the functionality of template literals here
Here are the steps you can take:
const Constants = {
VALUE1: 'value1',
}
Constants.VALUE2 = Constants.VALUE1 + 'value2';
console.log(Constants);Attempting to create JSDocs for a React component using destructuring assignment to access props: const PostComponent: React.FC<IPostComponent> = ({ title, body }) => { ... } The issue arises when trying to document multiple parameters in JSDocs ...
I am quite puzzled by a discovery I made and I am seeking to understand why TypeScript is displaying this behavior and what the underlying reason may be. Here is the code snippet: class A { constructor(public name : String, public x = 0, public y = 0) ...
Having trouble displaying data in the template using NestJS with mysql. Here is the code snippet from controller.ts: import { Controller, Get, Post, Put, Delete, Body, Param, Render, UsePipes, Logger, UseGuards} from '@nestjs/common'; import { P ...
I am currently developing a task management application using React, Redux, and TypeScript with hooks. While the code compiles without any errors, I am facing an issue where the app fails to run in the browser. The specific error message states: TypeEr ...
Take a look at this code snippet: <div #test (click)="onClick(test)" contenteditable="true"> This text can be edited by the user. </div> @ViewChild('test') el:ElementRef; constructor(private elementRef: ElementRef) {} ...
When working with nested populate queries in MikroORM with MySQL, I am faced with the challenge of selecting 100 fields while wanting to exclude around 20 fields. It would make more sense to leave out those 20 fields, similar to using db.find().select("- ...
Is there anyone out there who can confirm whether the google Calendar API (via the npm package googleapis) for node.js or browser supports types that can be utilized in TypeScript? This would allow for a more strongly typed approach in projects using node ...
My Angular application requires retrieving file contents from a REST API and generating a file on the client side. Due to limitations in writing files directly on the client, I found a workaround solution using this question. The workaround involves crea ...
I'm grappling with the concept of how TypeScript handles type checking when utilizing dynamic keys in object literals. Let's consider these two functions that produce a duplicate of an object: type Foo = { a: number; b: number; }; const INIT ...
My issue revolves around a button in my code that is supposed to trigger a function logging the user out. However, for some reason, the event associated with it doesn't seem to be functioning at all. Here's the relevant code snippet: TS File: imp ...
Currently, I am diving into AngularJS2 through a book from 2015 called ng-book2. However, the node package it relies on, tsc, for transpiling TypeScript to JavaScript on the go has been discontinued and deprecated: npm WARN deprecated [email protec ...
I have an input field on my HTML page below: <ion-input type="text" (input)="getid($event.target.value)" autofocus="true" id="get_ticket_id"></ion-input> I would like this input field to be cleared eve ...
Currently, I am utilizing mongoose v5.7.1 to connect to MongoDb in NodeJS and I need to retrieve the host and port of the Connection. However, TypeScript is throwing an error stating "Property 'host' does not exist on type 'Connection'. ...
My current project involves adding a booking.com embedded widget. Initially, when accessing the main page, everything works perfectly - the map and booking widget are visible for ordering. However, if you switch views without leaving the page or closing th ...
I am interested in creating a project with Typescript. The project is built on top of the Typescript compiler, so I am utilizing Typescript as a library, which I believe is a CommonJS library. Although the project is designed to run on Node (not in the bro ...
Our goal is to have a variable in our Vuex store that can only be accessed through the getter function. To do this, we must ensure that the variable is protected from external access outside of the store. What options are available to us? ...
I am struggling to understand why my InputAdornment is not positioned correctly. There doesn't seem to be any style in my code that would affect the location of the icon within the TextField (such as padding or flex properties). Currently, the calen ...
I'm currently working on a project where I need to drag a picture from the mat-sidenav and drop it into the mat-sidenav-content area with the copy function. My initial approach was to simply add the drag functionality to a div element in the sidenav, ...
Currently, I am in the process of testing a component that involves calling a service. My goal is to effectively stub or mock the service in order to control its return value and manipulate the component variables within the callback/success function of ...
My goal is to import data from an Excel file into my angular application. I have successfully retrieved the data from the Excel file, parsed it to extract the necessary columns, and stored it in an array within my service.ts file. I call the service from ...