Can you explain the distinction between these two TypeScript classes, one with a constructor and one without?

I am currently following Angular's official documentation called The Tour of Heroes and I have made slight modifications to it. As a result, there are now two distinct ways to define a class as shown below:

user.ts

export class User {
  url: string;
  id: number;
  username: string;
  email?: string;
  images: string[];
  files?: number[];
  password?: string;
  first_name?: string;
  last_name?: string;
}

The first method is the conventional way to define a class for validating a User's attributes. Additionally, I am able to create a new instance of User like this:

newUser: User = {url: '', id: 0, username: 'Alpha', images: []};


Recently, I came across a new approach to defining a class:

images.ts

export class Image {

  constructor(
    public id: number,
    public created: string,
    public userId: number,
    public fileUrl: string,
    public owner: string,
    public des?: string,
  ) { }

}

I can now create a new instance of Image like this:

newImage = new Image(50, '20170822', 12,  '', 'Belter');

I am curious to know the differences between these two methods and which one would be more preferable to use.

Answer №1

When dealing with the User class, you are not actually creating an instance of it. Instead, you are assigning an object literal that matches the structure of the User class to a variable. Typescript allows this because of its structural type system, where the shape of the object is more important than the declared type.

If you have a class that only holds data, it is advisable to define an interface and assign object literals to it. This aligns more with the Javascript way of approaching things. It is recommended to define it as an interface rather than a class to avoid unexpected outcomes with the instanceof operator. For instance, in the code snippet provided, newUser instanceof User will return false because you assigned an object literal, not an actual instance of the User class. Errors will be thrown at compile time when using interfaces since they are not directly supported in Javascript.

export interface User {
  url: string;
  id: number;
  username: string;
  email?: string;
  images: string[];
  files?: number[];
  password?: string;
  first_name?: string;
  last_name?: string;
}
var newUser: User = { url: '', id: 0, username: 'Alpha', images: [] };

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

Quickly send off an Angular 4 HTTP POST request and move on

I've been experimenting with making a fire and forget request, but none of my attempts seem to be working as expected. The situation is that after completing one subscribable request, I need to redirect to another page. However, before the redirectio ...

Syntax highlighting in VSCode does not seem to be functional when the ?? nullish coalescing operator is being utilized

Hello there! I've recently started using react.js with typescript on a new computer, but I've encountered an issue with syntax highlighting in VSCode. It seems that the problem arises when there's a double question mark (??) in the code, spe ...

What is the process for transforming an exported function into a function type?

When writing Express middleware, I am facing challenges in deciding how to properly typecast my functions. For instance, when working on an error handler: export function errorHandler(err, req, res, next) { ... } TypeScript correctly points out that th ...

Tips for effective page management

After creating a navbar in my project, I've come to the realization that it requires a component for each page and subpage. This seems redundant especially when dealing with multiple navigation options like shown in this image. Is it necessary to crea ...

Show blob file as a PDF document in a popup or dialog box using HTML and TypeScript

I am currently working on integrating TypeScript and HTML to showcase the result of a webservice call as a PDF in a popup/dialog within the same page. While I can successfully open the PDF in a new tab using the window.open(url) method, I'm encounter ...

Utilize multiple validators.patterns within a single value for enhanced data validation

I need to implement two different patterns for the formControlName='value' based on the type selected. If type is 'A', I want to use the valuePattern, and if type is 'B', I want to use the uname pattern. This is my HTML code: ...

Determining the data type of a property within an interface using TypeScript

Is there a way to extract the type from an interface based on its property name in order to use it in a Record? I am struggling with the syntax needed to retrieve the type by property name. My goal is to make this process more future-proof so that if the i ...

Guide on transforming a tuple of random types into a nested type structure with the help of recursive conditional types

When I responded to the query on whether Typescript Interfaces can express co-occurrence constraints for properties, I shared the following code snippet: type None<T> = {[K in keyof T]?: never} type EitherOrBoth<T1, T2> = T1 & None<T2&g ...

The absence of a 'defaultValue' argument in Typescript React is causing an issue

I'm encountering an issue with my code. The error message states "An argument for 'defaultValue' was not provided." I am trying to set default values but unsure of what those values should be. Additionally, I am facing a couple of other err ...

Can the Angular CLI be installed without using the command prompt?

Are there alternative methods for installing angular cli besides using the command line in cmd? I am encountering proxy setting issues when trying to install it using npm install -g @angular/cli (I am currently using a VPN for work) npm ERR! code ETIMEDOUT ...

React's useState feature is doubling the increment

I have created a basic form management system with a historical feature. A simplified version of this system can be seen on codesandbox import { useState } from "react"; import "./styles.css"; const sample = ["what", "w ...

JavaScript Electron application: Identifying the essential directories to include in a Git repository

When developing an Electron app using node.js and the CLI, numerous directories and files are automatically generated in the project directory. However, many of these files may not be necessary to save in my git repository. How do developers typically han ...

What is the process for modifying the values within a BehaviorSubject<object>?

Assuming we have a BehaviorSubject<object> intelligentObject = new BehaviorSubject<object>( {property1: data1, property2: { subProperty1: info1, subProperty2: info2}, ...} ); Is there a way to modify each value and add new properti ...

Angular's ng-model is unable to access the value of an object array

When selecting the days, users should be able to input check-in and check-out time ranges dynamically. However, there seems to be an issue with retrieving the values and data format. The ng model is unable to capture the check-in and check-out values. The ...

Is it considered appropriate to return null in a didReceiveResponse callback function?

In my implementation, I have a callback called didReceiveResponse within a class that extends RESTDataSource. In this method, I return null when the response status is 404. However, due to the typing definition of RESTDataSource.didReceiveResponse, it seem ...

Tips for importing a non-namespaced module TypeScript definition into my custom types

When working with my custom types, I want to utilize the GraphQLSchema from the graphql module. If I simply write: interface MyThing { schema: GraphQLSchema } It doesn't reference the actual GraphQLSchema definition from the module (it's just ...

Updating the FormControl value using the ControlValueAccessor

I have developed a directive specifically for case manipulation. The code I created successfully updates the visual value using _Renderer2, but I am facing an issue with formGroup.value. Even though the directive visually changes the value as expected, t ...

The automatic type inference in Typescript is faulty

I am currently working with TypeScript version ^4.1.3 and have developed a REST API that deals with albums and art collections. Before sending the response to the web client, I make sure to remove the userId property from the collections. Below are my Alb ...

Filtering a Table with Angular Material: Using multiple filters and filter values simultaneously

Looking to implement dual filters for a table of objects, one being text-based and the other checkbox-based. The text filter works fine, but struggling with the checkbox filter labeled "Level 1", "Level 2", etc. Ideally, when a checkbox is checked, it shou ...

Exploring the World of Angular2 Interfaces

Just starting out with Angular 2 and I'm wondering if anyone can provide a clear explanation of the interface concept in Angular 2. It would be really helpful for me if you could explain it with a working example. Additionally, I would appreciate som ...