Creating an object instance in Angular 2 using TypeScript

Looking for guidance on creating a new instance in TypeScript. I seem to have everything set up correctly, but encountering an issue.

export class User implements IUser {
    public id: number;
    public username: string;
    public firstname: string;
    public lastname: string;
    public birthday: string;
    public email: string;

    public constructor(iUser: IUser)
    {
        this.id = iUser.id;
        this.username = iUser.username;
        this.firstname = iUser.firstname;
        this.lastname = iUser.lastname;
        this.birthday = iUser.birthday;
        this.email = iUser.email;
    }
}

    interface IUser {
        id?: number;
        username: string;
        firstname: string;
        lastname: string;
        birthday: string;
        email: string;
    }

Additionally, here is the student class that extends user:

export class Student extends User implements IStudent, IUser {
    public indeks: string;
    public studyProgram: StudyProgram;


    public constructor(iUser: IUser, iStudent: IStudent)
    {
        super(iUser);
        this.indeks = iStudent.indeks;
        this.studyProgram = iStudent.studyProgram;
    }
}

    interface IStudent {
        indeks: string;
        studyProgram: StudyProgram;
    }

However, when attempting to create a new instance of student, an error is encountered:

 Supplied parameters do not match any signature of call target.

     this.student = new Student ({
      username: '',
      firstname: '',
      lastname: '',
      birthday: '',
      email: '',
      indeks: '',
      studyProgram: new StudyProgram({
        name: '',
        duration: 0,
        courseType: ''
    })
  });

Furthermore, let's take a look at the StudyProgram class:

export class StudyProgram implements StudyProgramInterface {
        public id: number;
        public name: string;
        public duration: number;
        public courseType: string;
        public studentList: Array<Student>;

    public constructor(studyProgramCfg: StudyProgramInterface) {
        this.id = studyProgramCfg.id;
        this.name = studyProgramCfg.name;
        this.duration = studyProgramCfg.duration;
        this.courseType = studyProgramCfg.courseType;
    }
}

    interface StudyProgramInterface {
        id?: number;
        name: string;
        duration: number;
        courseType: string;
    }

Answer №1

The Student class constructor requires two objects to be passed in (one implementing IStudent, and the other implementing IUser), but you have only provided one. To correct this issue, consider using the following constructor:

public constructor(student: IUser & IStudent) {
    super(student);
    this.indeks = student.indeks;
    this.studyProgram = student.studyProgram;
}

If you want to learn more about intersection types, check out this resource: https://basarat.gitbooks.io/typescript/content/docs/types/type-system.html

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

Implement a dynamic table in real-time with jQuery AJAX by fetching data from JSON or HTML files

Hey @SOF, I'm trying to add an auto-update feature to my school grades webpage using jquery and ajax to refresh the data when new information is available. I also want to create a "single view" for classes. The challenge I'm facing is getting t ...

Ensuring data integrity within table rows using Angular to validate inputs

I am using a library called angular-tablesort to generate tables on my webpage. Each row in the table is editable, so when editMode is enabled, I display input fields in each column of the row. Some of these input fields are required, and I want to indica ...

What is the process for comparing two objects in TypeScript?

There is a unique class named tax. export class tax { private _id: string; private _name: string; private _percentage: number; constructor(id: string = "", taxName: string = "", percentage: number = 0) { thi ...

How can I declare CSS variables in Next.js components' module.css just like in global CSS?

When writing CSS in our global file, we often define variables and styles like this: :root{ --orange:#e67e22; --black:#333; --light-color:#777; --border:.1rem solid rgba(0,0,0,.2); --box-shadow:0 .5rem 1rem rgba(0,0,0,.1); } *{ mar ...

What language should be used for JSON data formats?

I am dealing with a JSON file named myjson.cfg that has the following structure: { "values": { "a": 1, "b": 2, "c": 3, "d": 4 }, "sales": [ { "a": 0, "b": 0, "c": 0, "d": 0, ...

Clicking on a link in HTML with the onclick event

I am looking to create a button that will direct me to a different page. Here is the code snippet I have: <div align="right" ><input type="submit" id="logout" onclick="location.href='/login?dis=yes'" value="Sign Out" ></div>& ...

What steps can a web developer take to view user console errors?

Is there an effective method for a web developer to receive notifications of console errors logged by other authorized users? I am currently working with Express, Passport, and MongoDB. These errors may occur on either the client or server side. One approa ...

Template does not reflect changes made to filters in real-time

I've been working on filtering my "PriceList" collection and sorting is functioning perfectly. However, I'm experiencing some issues with implementing filters and search functionality. When I click on custom filter buttons, the template doesn&apo ...

Dynamically setting the default selection in a dropdown menu

When choosing a default value from a dynamically populated dropdown using JSON data, I attempted to use regCtrl.screeningTypeList[0] without success. <select ng-init="regCtrl.user.screeningType.screeningTypeId=regCtrl.screeningTypeList[0]" ng-model="re ...

When attempting to convert large objects into JSON using JSON.stringify, a RangeError is thrown due to

Trying to convert a massive JavaScript Object into a string using JSON.stringify in my Node.js application. The objects are extremely large (tens of mega bytes) and do not contain any functions. I need to save the serialized objects to a file. However, I a ...

ERROR: There was a problem with the NgbTabset class at line 12 in the inline template. This issue occurred because the 'templateRef' property could not be read as it was undefined

I am utilizing ng-bootstrap instead of ui-bootstrap in angular2 for my project. This is the HTML code I am using: <div class="row" style="height: 100%;"> <div class="col-12"> <div class="container" id="contentMain"> <div ...

How can a loading bar be shown while a PHP page is loading?

I currently have an HTML form that directs to a PHP file upon submission. The PHP file takes some time to load due to background processes running, so I am interested in implementing a progress bar or alert to indicate when the file is fully loaded. Does ...

VSCode prioritizes importing files while disregarding any symbolic links in order to delve deeper into nested node

I'm encountering a problem with VSCode and TypeScript related to auto imports. Our application includes a service known as Manager, which relies on certain functions imported from a private npm package called Helpers. Both Manager and Helpers make us ...

Adding various image files to the canvas

I am facing an issue with my code where I need to find images inserted by the user into a div and then combine them into one image in a canvas when the "snap" button is clicked. While I can successfully locate, position, and resize the images inside the ca ...

Using Conditionals in React Props

In the process of developing a component that requires two props, inside and position, I've encountered an interesting dilemma. When inside is set to true, then position is limited to left or bottom. However, if inside is set to false, then position c ...

How to retrieve the parameter value in Next.js version 13

I need assistance with extracting the parameter value from a GET endpoint: /api/image/id The directory structure is as follows: src/app/api/image/[id]/route.ts However, when attempting to access the id parameter, I am receiving a result of null. import { ...

What are some effective ways of using the parent, before, and children selectors?

<table> <tr><td><input type="text" value="123"></td><td><input class="here" type="text"></td></tr> <tr><td><input type="text" value="333"></td><td><input class=" ...

What are the steps for utilizing JSON data retrieved from an ajax response?

After successfully making an ajax request and receiving JSON data, I am struggling with how to use it effectively. The response I am getting looks like this: [{ "id": "5", "reviewID": "2389", "serviceID": "50707", "title": "well d ...

The error message popping up reads as follows: "TypeError: _this2.setState cannot

I am encountering an error that I don't quite understand. How can I resolve this issue and why is it occurring in the first place? Although I am receiving the correct response from the API, I am also getting an error immediately after making a call. ...

MERN Stack - Table Ordering Solution

After spending countless hours trying to order the list items in the table, I am still unable to figure it out. The data is being fetched from a MongoDB using Axios. I am currently working with MongoDB Express React and NodeJS If you'd like to check ...