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.
Currently, I have my app running with ng serve. I'm curious if there is a method to access the package.json file within my app. My initial thought was to move package.json to the directory ./dist and retrieve it from there. However, this does not see ...
I'm facing a situation where I have set up a server-side route /auth/refresh to handle token refreshing. The process involves sending a Post request from the NextJS client side with the current token, which is then searched for on the server. If the t ...
I'm currently facing a challenge with rendering my HTML grid table in Angular using JSON data retrieved from a MySQL database. I would greatly appreciate any assistance or guidance on how to solve this issue. View the output of the Angular code here ...
I am currently working on a project where I need to retrieve data from MongoDB using a Service call. So far, the Service call is functioning correctly and logging the data in the console as expected. The challenge arises when dealing with a large response ...
Within my application, I am utilizing react-hook-form in conjunction with the latest version of MUI 5.11. I have developed a reusable Select component: ...someImports import { Control, Controller } from 'react-hook-form'; interface SelectProps { ...
I have created a user class and required interfaces as outlined below: user.ts import { Role } from '../auth/auth.enum' export interface IUser { _id: string email: string name: IName picture: string role: Role | string userStatus: b ...
Hey there, I'm currently working on a simple coding project but seems to be encountering some roadblocks. The main objective of the code is to determine if a username exists in the system or not. Here's a snippet of the data structure and codes ...
Currently, I have a function that generates input fields dynamically based on data received from the backend. To ensure proper typing, I've defined interfaces for each type of input field: interface TPField { // CRM id as a hash. id: string nam ...
I'm currently working on a NextJS project and following the official tutorials. The tutorials demonstrate how to retrieve data from an API using an API-Key for authorization. However, I've run into a TypeScript compilation error: TS2769: No ove ...
After building my Angular 8 project with ng build --prod, I serve it from the /dist folder using http-server. The app still works even after stopping it thanks to the service worker. The project successfully registers its service worker and I am able to ...
saveStudentDetails(values) { const studentData = {}; studentData['id'] = values.id; studentData['password'] = values.password; this.crudService.loginstudent(studentData).subscribe(result => { // Here should be the val ...
Currently in the process of converting my JavaScript code to Typescript, and encountering an error while working on the routes page stating Binding element 'allowedRoles' implicitly has an 'any' type. ProtectedRoutes.tsx const Protecte ...
After struggling with this issue for 2 days, I'm throwing in the towel and reaching out to the community for assistance. I've been tasked with setting up a basic login system for a new project using NextJS v13. However, it seems like a lot has c ...
I recently started a new project in Angular 4 using CLI and incorporated various Kendo UI components. However, I encountered an issue with the kendo-switch component where it does not toggle correctly when set to checked=true. Instead of toggling from left ...
While trying to utilize the MaterialUI Select component with typescript/reactjs, I encountered an issue during the instantiation of the Select element. The error message I'm receiving states: Type 'Courses' is missing the following properti ...
While developing in Angular, I encountered a challenge where I needed to create an input that only accepts numeric characters. Initially, I tried using type="number" which worked perfectly in Google Chrome but surprisingly allowed non-numeric characters ...
I am facing an issue with my code where I have two lists that are displayed in my .html file. In order to avoid repetition, I decided to utilize ngSwitch. However, when I try to implement this approach, I encounter an error. Here is the snippet of code cau ...
Currently, I am facing an issue where all the collapses in my list are linked to one state for "open." This means that if I open one list, all the other lists also open. I am looking for a way to keep the collapses separate from each other without needing ...
While working on my Angular project, I have encountered a situation where I need to make calls to a backend API. If the response is not 200 OK, I have to keep calling the API every 30 seconds until I receive a successful response. In Angular, I usually ca ...
I have been exploring the capabilities of graphql-codegen to automatically generate TypeScript types from my GraphQL type definitions. However, I encountered an issue where I received the following error message: Failed to load schema from code file " ...