Incorporate a new attribute into an object of a class

Consider the code snippet below:

class MyClass{
    x: number;
}

const inst = new MyClass();
inst.x = 8;
inst.y = 9;
inst["z"] = 10;

The Typescript compiler is flagging an issue when adding the y property to the instance of MyClass, but not with the z property.

Could this behavior be due to Typescript attempting to maintain consistency in the shape of all instances of a class, or could it be something else?

Interestingly, I've encountered a similar scenario while working with Angular components and trying to assign values to properties that were not previously defined. For example:

this.prop = 5;

Answer №1

One of the main purposes behind creating TypeScript classes is to restrict object properties to those defined within the class itself...

The ability to access `inst["z"]` stems from leveraging a basic JavaScript functionality that TypeScript allows.

In cases where you require your class to accept additional properties, you can modify it like so:

class CustomClass {
    [key: string]: any;
    y: number;
}

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

A helpful guide on integrating a Google font into your Next.js project using Tailwind CSS locally

I'm planning to use the "Work Sans" Font available on Google Fonts for a website I'm working on. After downloading the "WorkSans-Black.ttf" file, I created a subfolder named "fonts" within the "public" folder and placed the font file in there. Be ...

Can a constructor function be utilized as a parameter type in another function within TypeScript?

Recently, I came across TypeScript and after watching some video reviews, I see great potential in it. It seems to offer better code completion, implicit code documentation, and enhanced type safety for JavaScript. I'm currently in the process of con ...

Error message indicating that an object may be undefined in a section of code that cannot possibly be reached by an undefined value

Does anyone have a solution for resolving the Typescript error message "Object is possibly 'undefined'" in a section of code that cannot be reached by an undefined value? This area of code is protected by a type guard implemented in a separate fu ...

How to fix the TS4090 error regarding conflicting definitions for a node in Visual Studio 2017

My TypeScript project is building and running, but I'm encountering a multitude of build errors all originating from one issue: TS4090: (TS) Conflicting definitions for 'node' found at 'C:/[projectpath]/node_modules/@types/node/index ...

Sinon - observing a spy that remains inactive, yet the test proceeds to enter the function

Having some trouble with a test function that uses two stubs. The stubs seem to be working fine, as I can see the spy objects inside when I console.log res.json or next. However, the spy is not being called when I make the assertion. The error message read ...

The Process of Deploying Angular 4 Applications to Production

My colleague and I recently had a thorough discussion about the best approach to deploy our Angular 4 app on a production server. I would greatly appreciate practical advice and guidance from the community regarding this issue. Thank you in advance! Prem ...

[Nuxt.js/Typescript] Accessing Vuex data in Nuxt.js using Typescript

Hello, I am new to Typescript and I have encountered an issue with setting Objective Data to Vuex store. Here is the Objective data of Users (also known as account). # models/User.ts export interface IUser { email: string | null name: string | null ...

I am facing issues with testing a service in Angular that utilizes the HttpClient

Currently, I am working on an Angular 5 Project, but it's not a major project. However, I haven't been involved in the Angular2+ environment since early 2.1/2.2. My issue revolves around a Service that makes a call to a public API. Unfortunately ...

Why is my index.tsx file not properly exporting? (React + Typescript)

I've developed a basic Context Provider that I'd like to package and distribute via npm. To package my code, I utilized the create-react-library tool. In my project, I've set up an index.tsx file that should serve as the entry point for im ...

refreshing the webpage's content following the completion of an asynchronous request

I am working on an Ionic2 app that utilizes the SideMenu template. On the rootPage, I have the following code: export class HomePage { products: any = []; constructor(public navCtrl: NavController, public navParams: NavParams, private woo: WooCommer ...

Encountering an Issue while Attempting to Deploy Angular 6 on Her

I recently pushed my Angular 6 application to Heroku. Although the deployment was successful, the page is not loading properly. An error message on the page reads: An error occurred in the application and your page could not be served. If you are the ap ...

How can you prevent the keys from being read-only when mapping onto a type?

Here's a common query: How can I change keys from readonly to writable when using a type that is Readonly? For example: type Foo = Readonly<{ foo: number bar: number }> type Bar = /* What's the method to duplicate the Foo type, but w ...

disabling and enabling the search bar feature in Bootstrap 4

I recently completed an Angular 4 project and added a search bar to the header. I am looking for guidance on how to enable and disable the search bar based on when it's needed. <form *ngIf="!authService.isAnonyme()" class="navbar-form navbar-left ...

What is the clarification on Angular's paramMap.getAll method?

Angular 4 introduced support for paramMap along with get and getAll methods : I comprehend this code snippet that retrieves the value of "id" route.paramMap.subscribe( params => this.productID = params.get('id') ); However, I am c ...

Apologies, the module "@org-name/package-name" could not be located

I've hit a roadblock for the past few days. My goal is to create a new npm package that wraps an API I've been developing. When bundling the package, everything seems to be fine in the /dist folder. However, when attempting to test it in a front ...

Why does Primeng Lazy loading trigger multiple times when updating the sortField and sortOrder?

Lazyload has been successfully integrated into my primeng-table, <p-table #dataTable [columns]="tableHeader" [value]="tableData" [rows]="10" [paginator]="true" [rowsPerPageOptions]="rowsPerPage" [totalRe ...

What could be causing this error in a new Next.js application?

After multiple attempts, my frustration and disappointment in myself are causing a headache. Can someone please assist me? I am trying to create an app using the following command: npx create-next-app@latest --ts Immediately after running next dev, I enco ...

Troubleshooting Javascript Errors in Protractor and WebDriver/Selenium

Recently, I encountered an interesting issue with my Angular site. Upon loading (https://x.y.com/), it immediately redirects to () [just as an example]. Initially, I attempted to resolve this by following the Protractor instructions and running it from the ...

Update the registerForm input from a boolean value to a number

Confused about how to convert a boolean to a number Issue : I'm struggling trying to convert my registerForm.value.aleas, which is a checkbox, into a number (0 for false, 1 for true) in order to perform a POST request (the API expects values of eith ...

add headers using a straightforward syntax

I'm attempting to append multiple header values. This is what I'm currently doing: options.headers.append('Content-Type', 'application/json'); options.headers.append('X-Requested-By', 'api-client'); ... ...