Imagine a common situation where users need to provide an email and password for logging in using Typescript. To make this process more organized, I want to define a strong type that represents the user's login information and send it securely to the back-end.
Should we define it like this:
export interface UserLogin {
email: string;
password: string;
}
//OR
export class UserLogin {
email: string;
password: string;
}
When should we choose one over the other?
Essentially, a class can be seen as a factory for objects (like a blueprint of how an object should be structured and created), while an interface serves as a tool for type-checking.
While a class contains properties and methods to initiate object creation, an interface outlines the properties and types that an object must adhere to.
In your scenario, the interface would be used to define the type for UserLogin.
When it comes to defining a custom type, utilizing interfaces is the way to go. In my opinion, one practical advantage of using interfaces is that they do not transpile into JavaScript, resulting in shorter generated code.
However, if you require the ability to instantiate objects with constructors or work within a framework that handles instantiation and injection, classes or abstract classes would be more appropriate options.
Both options are equally capable of getting the job done. However, my recommendation would be to lean towards using interfaces if you are primarily focused on type-checking, as they are specifically tailored for that purpose.
Classes and interfaces play a vital role in object-oriented programming and type-checking within TypeScript. A class serves as a blueprint for creating objects with shared configurations of properties and methods. On the other hand, an interface defines a set of related properties and methods that describe an object, without providing their implementation or initialization.
Source:
transfer it to the server-side
When transmitting classes through the network, additional steps are needed - if JSON is utilized as the content type, the class will be received as a plain object in your server-side code. Visit several responses related to this issue that explain how to convert JSON back into a class object in order to access its methods.
In cases where the class mentioned doesn't have any methods, this may not present an issue unless the server-side code requires runtime checks using instanceof.
To circumvent these challenges, opt for using interfaces which only include data fields to represent objects when communicating with the server-side.
I recently completed a storybook project. Now, I am looking to integrate it with another project built on next.js. The issue is that Storybook and next.js each have their own set of routes. I want to streamline the routing process by utilizing next.js and ...
I have developed a class in TypeScript that uses generics. export class ModelTransformer { static hostelTransformer: HostelTransformer; static fromAtoB(instance: T): U { if (instance instanceof HostelType) { return ModelTrans ...
I am facing a challenge with a table that contains rows and checkboxes. There is one main checkbox in the header along with multiple checkboxes for each row. I am now searching for a function that can delete rows from the table when a delete button is clic ...
I am looking to create a utility function that takes an instance and an object as input, and then updates the instance with the values from the provided object fields. Below is the code for the utility function: function updateEntity<T, K extends keyof ...
I have a component X that handles a WebSocket. And within component X, I also have multiple presentation components (e.g. Y). Whenever the WebSocket receives a specific message, I need to perform an action in a particular component (e.g. refresh data). To ...
The title may be a bit unclear, but I'm struggling to find a better way to explain it. I have a predefined set of classes from a third-party library that I cannot modify. The specific content of these classes is not relevant, as it's just for i ...
I was attempting to use prefixes for my imports like in the example below: "paths": { "~/*": ["../../libs/*"], "@/*": ["./*"] } However, I keep encountering an error message say ...
I'm currently attempting to utilize Promise.all and map in place of the forEach loop to make the task asynchronous. All promises within the Promise.all array are executed and resolved. Here is the code snippet: loadDistances() { //return new Prom ...
In TypeScript, the number variable is floating point by default. However, there are situations where it's necessary to restrict the variable to a specific size or type similar to other programming languages. For instance, types like int8, int16, int32 ...
I have a calendar component that has a data property marked as @Input(): import { Component, OnInit, Input, OnChanges, SimpleChanges } from '@angular/core'; @Component({ selector: 'app-calendar', templateUrl: './calendar.comp ...
Recently I started working with Angular, and I've created a service to iterate over nested JSON data for my list. export const CATEGORIES: Category[] = [ { id: 1, categoryName:'Accessories', subcatName: [ {subcategory: & ...
Take a look at this code snippet that defines two command handlers for a server: import { plainToClass } from "class-transformer"; enum Command { COMMAND_1, COMMAND_2, } class Command1Data { foo1!: string } class Command2Data { foo2!: ...
When navigating to a child component from the parent component's HTML template using a button, how can I pass the parent component's data (such as a name) to the child component without displaying it in the URL? ...
Currently, I am working on an angular project using Visual Studio Code as my text editor. When attempting to open the project with 'npm start', an error occurred. The specific error message is: ERROR in node_modules/@angular/material/card/typing ...
Is it possible to use Number, or is there a more type-specific alternative? In the past, I have relied on Number and it has proven effective for me. For example, when defining a variable like percent:Number = 1.01... ...
Here is an example code snippet to consider: type PredefinedStrings = 'test' | 'otherTest'; interface MyObject { type: string | PredefinedStrings; } The interface MyObject has a single property called type, which can be one of the ...
I've been searching for my TypeScript files in the console, but they're not showing up. I've tried everything to debug my Angular 2 project, but no luck. I can't move forward without debugging, can anyone lend a hand? ...
I am facing an issue with my TypeScript code file that appears to be a common error, but I'm struggling to resolve it. This problem is new to me as I am still getting acquainted with Visual Studio Code. Cannot compile modules unless the '--modul ...
Currently, I am developing an Angular application where I am dealing with a specific array that contains a flag named "checked". Based on the value of this flag, I need to perform certain manipulations. Here is a snippet of my sample data: const data = [{ ...
I am trying to input a decimal number with 1 and one zero like 1.0 <input type="number" formControlName="global_velocity_weight" /> this.form = this.fb.group({ global_velocity_weight: new FormControl(1.0, { validators: [Valida ...