Imagine you're working in an Angular component and receiving a parameter from its parent.
export class SomethingComponent implements OnChanges {
@Input() delay: number;
}
Would it be considered good practice, acceptable, or beneficial to designate it as private or readonly?
export class SomethingComponent implements OnChanges {
@Input() private readonly delay: number;
}
What exactly sets them apart technically?
From a technical perspective, it is important to understand that in Javascript, access modifiers like private and readonly do not exist at runtime. These are features present in Typescript to assist developers.
Here's an example of how Typescript handles access modifiers:
class Car {
private ownerName: string;
readonly vehicleIdNumber: string;
mileage: number;
}
let car = new Car();
//typescript compilation error:
// Property 'ownerName' is private and only accessible within class 'Car'.
car.ownerName = "test";
//typescript compilation error:
// Cannot assign to 'vehicleIdNumber' because it is a read-only property.
car.vehicleIdNumber = "543798";
//No error here!
car.mileage = 10000;
When this code is converted to Javascript, the access modifiers disappear and you can use those attributes freely. Here's what the resulting Javascript code would be:
class Car {
}
let car = new Car();
car.ownerName = "test";
car.vehicleIdNumber = "543798";
car.mileage = 10000;
In terms of Angular, using private or readonly on an @Input() property may not be practical.
Private members should typically only be accessed within the class they are declared in. Trying to access them outside the class violates this rule when dealing with components.
Readonly members are usually not meant to be modified after construction, but in Angular, @Input() properties are set after construction yet before ngOnInit().
Using the private keyword serves as a declaration of intent during compilation, indicating that a variable or method is meant to be encapsulated and not accessed by other classes or components at runtime. While this may not provide any inherent security benefits, it can help developers understand the intended usage of the code.
Therefore, marking something as private is acceptable as long as it effectively communicates the intended restrictions to other programmers accessing the code from different parts of the application.
In the realm of UI libraries, I find myself facing a dilemma. Upon importing SCSS styles into my components (such as a button), I noticed that if I instantiate the component button twice in the client app (which has my UI library as a dependency), the SCSS ...
I have a form with several cascading drop-downs - the selection in one drop-down determines the options available in the next. Each drop-down retrieves its values from an async data service, and Angular EventEmitter is used to handle events and populate su ...
In building a type, I aim to create one that can accept the type of another object and generate a different type based on specific properties in that object. Illustrating this concept through code: // Definition representing the types of inputs shown on UI ...
I've come across many discussions on global angular services, but none seem to truly embody the concept of "global". I'm curious if it's feasible to develop a service that doesn't require importing everywhere it's used (i.e. truly ...
Is there a way to create a generic type that reflects a JSON object structure, but excludes the first argument from functions while maintaining the types of other arguments? type InputType<T> = { increment: (state: T) => T, add: (state: T, cou ...
How can I display data from a GET request to the WordPress API as the page loads in an Ionic app using Angular? I am able to retrieve my desired post list, but only when I use a button click event to call the method in the HTML. Since this is my first att ...
I'm a newcomer to Angular and I could use some assistance with the following requirement: In my Angular template, I have two dropdowns. I want the selection in one dropdown to automatically reflect in the other dropdown. Both dropdowns pull their val ...
I have created a component that utilizes an HTML attribute. I set it up so that users can specify the route when using this component within another component. However, every time I attempt to define the route value, I encounter a 'No provider for Rou ...
The Visual Studio 2017 build encounters an error during the build process src\Service\node_modules\utility-types\dist\aliases-and-guards.d.ts(10,51): Error TS2304: Build:Cannot find name 'bigint This issue is specific to the ...
I'm attempting to dynamically enable or disable an anchor element based on the user's role. So far, I've tried a few different methods: document.getElementById('myBtn').disabled = true; However, this returns an error: The propert ...
Currently working with React and Axios. Lately, I've been experimenting with custom configurations in Axios as shown below: import $axios from 'helpers/axiosInstance' $axios.get('/customers', { handlerEnabled: false }) However, wh ...
Here is an example of how to work with enums in TypeScript: export enum Category { Action = 1, Option = 2, RealEstateFund = 3, FuturesContract = 4, ETFs = 5, BDRs = 6 } The following function can be used to retrieve the enum indexe ...
Forgive me if this sounds like a silly question - I am currently working on a small Pokedex application using React and TypeScript. I'm facing an issue where after the initial page load, some items appear out of order after a few refreshes. This make ...
Being a novice developer, I have taken on the challenge of creating a quiz application using Angular 12 to enhance my coding skills. However, I've hit a roadblock when it comes to retrieving data with questions and answers from a JSON file. Despite su ...
Is there a way to reformat an entire project folder at once, rather than just one document? I know that I can use the shortcut key Alt+Shift+F or right click on a document and select Format Document. My projects consist of Typescript files in the Angular ...
I have developed an app using ionic 2 that revolves around quotes. My goal is to manage these quotes (along with authors, categories, etc) using Wordpress and its REST API. Initially, I utilized normal posts for this purpose, but now I am exploring custom ...
I am facing an issue with running my Angular project. Whenever I try to execute ng serve, it fails with the following error: dev@716a5115c45c:~/project$ npx ng serve Cannot find module '@angular/compiler-cli' Error: Cannot find module '@ang ...
Within my setup, I have implemented two textboxes and a span to display the result. Date: <input data-bind="value: dateValue"/> Number: <input data-bind="value: dateValue"/> Result : <span data-bind="text: calculatedValue">Result Should ...
Upon checking the console, an error message appeared stating that Recipe was not defined. To resolve this issue, I made sure to include the necessary class definition in a separate file at the end of my code. The import statement: import { Recipe } from ...
Imagine we have the following array literal: const list = ['foo', 'bar', 'baz'] as const; We are attempting to create a type that represents potential indices of this array. This is what we tried: const list = ['foo&ap ...