Declare a new variable with a specific data type in TypeScript

I'm working on creating a variable in my component of a specific type, as shown below.

myrequest.model.ts
export class MyRequest {
    public endValue: string;
    public yearEnd: string;
}

When importing the above into my component, I do the following:

myReqObj: MyRequest;

However, when I try to assign a value like this:

this.myReqObj.endValue = '23'

I get an error saying that myReqObj is undefined. Am I approaching this correctly? What is the correct way to do this?

Answer №1

Seems like you are required to create an instance of the MyRequest class. To achieve this, simply include a constructor in your code:

myReqInstance: MyRequest = new MyRequest(null, null);
this.myReqInstance.endValue = '23'

Answer №2

Defining the value should look like this:

this.myValueObject ={
      finalAmount : '23'
}

Tip: Incorporate interfaces to define custom data types effectively.

export interface CustomRequest {
    finalAmount: string;
    endOfYear: string;
}

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

How to dynamically modify ion-list elements with Ionic on button click

Imagine having 3 different lists: List 1: bus, plane List 2: [related to bus] slow, can't fly List 3: [related to plane] fast, can fly In my Ionic Angular project, I have successfully implemented the first ion-list. How can I dynamically change th ...

Spread operator in Typescript for complex nested collection types

I have implemented a Firestore database and defined a schema to organize my data: type FirestoreCollection<T> = { documentType: T; subcollections?: { [key: string]: FirestoreCollection<object>; }; }; type FirestoreSchema< T exte ...

Angular's forEach function seems to be stuck and not loop

I'm attempting to cycle through a list of objects in my Angular/Typescript code, but it's not working as expected. Here is the code snippet: businessList: RemoteDataSet<BusinessModel>; businessModel: BusinessModel; this.businessList.forE ...

Using POST parameters with HTTP Client in Angular 2

I have been working on converting my jQuery code into Angular2. While the jQuery code is functioning correctly, the Angular2 code seems to be producing a different output from the API. I have already compared the parameters and endpoint using firebug/cons ...

Issue: Cannot assign type 'Promise<PostInfo>[]' to type 'PostInfo[]' while updating state

At the moment, I am facing an issue with my function that fetches an API and updates state. Specifically, I encounter an error when attempting to assign a Promise to the state. type DataState = { postList: Array<PostInfo>: }; const [state, setSt ...

Exploring the Power of Dynamic XML in Your Angular 4/5 Application

If example.com is an active angular 4 application with existing routes such as /product and /category, how could I create a route like /products.XML or /category.xml to display dynamic XML content for each. ...

Oops! The type '{}' is lacking the properties listed below

interface Human { firstName: string; lastName: string; } let human1: Human = {}; human1.firstName = "John" human1.lastName = "Doe" Upon declaring human1, an error pops up: Type '{}' is missing the following properties from type Human ...

Whenever the route changes in Angular, the components are duplicated

Whenever I switch routes in my Angular application, such as going from home to settings and back to home, all the variables seem to be duplicated from the home page and are never destroyed. I noticed that I created a loop in the home component that displa ...

Project encapsulating Angular 2 Functionality

I am tasked with creating an angular 2 application that acts as a wrapper for multiple other angular 2 applications. Let's call the main module of the project MainModule. There are also third-party modules such as AppModule1, AppModule2, etc., which ...

Exploring the Integration of Google Maps and Angular Google Places in Angular 2

On my webpage, I am utilizing two components simultaneously: and angular2-google-map-auto-complete from https://www.npmjs.com/package/angular2-google-map-auto-complete. To set the Angular maps key, I have defined it as follows: AgmCoreModule.forRoot({ a ...

Angular8: Stay Updated with Real-Time Data Refreshment

I've implemented code in my app.component to retrieve all users. I'm facing an issue where if I have two windows open and perform any CRUD actions, the second window displays outdated data. To address this, I am attempting to refresh the page ev ...

TypeScript - ESBuild - Encountered an unexpected '<' token

When compiling TypeScript files for a React app with esbuild, everything goes smoothly. However, upon checking the browser console, an error pops up: An unexpected token '<' is causing errors after the return statement // components/editor/ ...

Could anyone provide some insights on how the Angular subscribe method works?

I am currently learning Angular from a tutorial for version 4.0. I have reached Section 6 (Routing) of the tutorial and I am struggling to comprehend the subscribe method. I would appreciate some more clarification on this. I know that ngOnInit() is calle ...

The ng2-intl encounters an issue when trying to resolve symbol values statically

I'm struggling with a common issue and can't seem to find a solution that works. My setup involves Angular 4.2.6 along with ng2-intl 2.0.0-rc.3. Despite trying the following code, I am still facing issues: export function intlFactory(http:Http ...

Angular transforming full names to initials within an avatar

What is the best way to convert names into initials and place them inside circular icons, like shown in the screenshot below? I already have code that converts the initials, but how do we create and add them inside the icons? The maximum number of icons di ...

When inputting data from an Angular 6 form into Mongoose, the stored date appears to be offset by

I am currently working with Angular 6 to store form data, specifically a date. The form is sending the date as (date: "2018-07-02T00:00:00.000Z") and that's what gets saved into mongoose. However, when I retrieve all events to display on the page, the ...

What is the correct way to specify the data type for the useState hook when I intend to store an array of objects?

My dilemma involves storing an array of objects using the useState hook, but I am struggling with the syntax required to describe the expected type. The type that I want to store is Array<Updates>. Below is the code I have: const [messages, setMessa ...

Issue with Ionic2 radio button selection not persisting

I'm currently working on implementing Radio Alerts within an Ionic2 application. To create a radio alert, I used the following code snippet: let alert = this.alertCtrl.create(); alert.setTitle('Select a Radio Alert'); alert.addInput({ typ ...

Improving access for disabled individuals in HTML through tab-index usage

Hey there, I'm currently dealing with some challenges regarding tab-index for disabled elements. It seems that we are unable to focus on the elements, as screen reader tools are not announcing them and are skipping over them directly. For example: I ...

Problem with making sequential requests in Angular using RxJS

I am in need of assistance with the following functions; public userLogin(username: string, password: string) { return this.http.post<any>(`${this.apiURL}/login `, {username, password}, constants.httpOptions) .pipe( map((response) ...