What causes the interface property to be undefined when attempting to assign a value?

Take a look at the structure of my basketball Player class and the ITeam & IStats interfaces:

export class Player {
  id: string;
  firstName: string;
  lastName: string;
  position: string;
  team: ITeam;
  stat: IStats;

  get fullName(): string {
    return this.firstName + " " + this.lastName;
  }
}

export interface ITeam {
  id: string;
  abbreviation: string;
  name: string;
  city: string;
}

export interface IStats {
  GP: number;
  Min: number;
  FGM: number;
  FGA: number;
  TPM: number;
  TPA: number;
  FTM: number;
  FTA: number;
  OR: number;
  TR: number;
  AS: number;
  ST: number;
  TO: number;
  BK: number;
  PF: number;
  DQ: number;
  PTS: number;
  TC: number;
  EJ: number;
  FF: number;
  Sta: number;
}

I encountered an error while trying to set the player.team.abbreviation property in my component's data iteration, resulting in ERROR TypeError: Cannot set property 'abbreviation' of undefined

  createPlayer(playerArray) {
    let player: IPlayer = new Player();

    player.id = playerArray[0];
    player.firstName = playerArray[1];
    player.lastName = playerArray[2];
    player.team.abbreviation = playerArray[3];
...
    }

What could be causing the player.team to be undefined?

Answer №1

Appreciation to R.Richards, the recent update has fixed the issue:

export class Player {
  id: string;
  firstName: string;
  lastName: string;
  position: string;
  team: ITeam;
  stat: IStats;

  constructor() {
    this.team = {} as ITeam;
    this.stat = {} as IStats;
  }

  get fullName(): string {
    return this.firstName + " " + this.lastName;
  }
}

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

What is the best way to reference a module within my own code in TypeScript running on Node.js

Currently, I have two modules named 'json' and 'json-object'. The 'json' module consists of all objects extending the default JSON object in JSON format: import { JSONObject } from './json-object'; export abstract ...

Unable to locate the necessary file. - Implementing TypeScript in a React application

Attempting to integrate TypeScript into an existing React app by following the steps outlined at: https://create-react-app.dev/docs/adding-typescript I've followed all the instructions but encountered the following error upon trying to launch the app ...

Creating Versatile Functions for HttpClient Wrapping

Scenario: In my set of services, I find myself repeatedly writing code for data calls which results in a lot of duplicated code. To streamline the process and reduce redundancy, I am looking to implement a wrapper function: All these functions essentiall ...

What is the best way to invoke a function in a class from a different class in Angular 6?

Below is the code snippet: import { Component, OnInit, ViewChild } from '@angular/core'; import { AuthService } from '../core/auth.service'; import { MatRadioButton, MatPaginator, MatSort, MatTableDataSource } from '@angular/mater ...

How to turn off validation for md-input-container in Angular 2

While working on a form in Angular 2, I encountered an issue when adding the required attribute to my <input>. The problem resulted in unwanted margins as shown in this image: https://i.sstatic.net/W6JSF.png I am seeking a solution to only apply the ...

Initiate the input change event manually

Struggling with creating a custom counter input component where the input value is controlled by custom increment/decrement buttons. Desired output: https://i.sstatic.net/oYl1g.png Content projection will be used to expose the input for form usage and a ...

Tips for deleting on a numeric cell within ag-grid?

While exploring the functionality of AG-Grid with the example provided at this link [, I am currently experimenting with the numeric editor feature. I found this example on the official AG-Grid website [https://www.ag-grid.com/javascript-grid-cell-editor/ ...

How can one implement closure in Angular 4?

I am looking to implement a nested function within another function in Angular 4 for closure. However, when attempting the code below, I encounter an error stating "cannot find name innerFn" outerFn(){ let a = "hello"; innerFn(){ console.log(a ...

Unexpected behavior encountered when using TypeScript type declarations

I am currently working on a Gatsby side project incorporating Typescript for the first time. I initially expected Typescript to behave similarly to PHP type declarations, but I have encountered some unforeseen issues. Despite feeling confident in my Typesc ...

Issue TS2304: Unable to locate identifier 'MSGesture' while developing an application using BabylonJS

Struggling to follow the guidelines provided at: https://github.com/BabylonJS/Babylon.js. When attempting to compile a simple one-line "main.ts" script that includes import * as BABYLON from 'babylonjs'; using tsc within npm, I encounter the foll ...

What methods can be used to avoid getting distracted by input?

Is there a way to prevent the input field in angular-material2 from gaining focus when clicking on a visibility button? To see an example of how it works, visit: material.angular.io Image before pressing the button: https://i.stack.imgur.com/5SmKv.png ...

Creating horizontal cards with Angular MaterialWould you like to learn how to design

I need help converting these vertical cards into horizontal cards. Currently, I am utilizing the Angular Material Cards component. While I can successfully create cards in a vertical layout, my goal is to arrange them horizontally. Below is the code sni ...

What is the process for appending an attribute to a DOM element?

Is there a way to conditionally add the multiple attribute to this element? <mat-select [formControlName]="field.name" multiple> I attempted to do so with the following: <mat-select [formControlName]="field.name" [attr.multiple]="field?.mu ...

Eliminate information from Firestore with Angular

https://i.sstatic.net/MFKHB.png I encountered an issue while attempting to delete data from Firestore. Fetching and adding data is functioning correctly, but when attempting to delete data, it does not get removed and no error is displayed on the console. ...

Issue detected: Props that are of type Object/Array must utilize a factory function in order to provide the default value

I recently started using Vue-Cli3.0 and came across this interesting module for Vue.js called https://github.com/holiber/sl-vue-tree It's a customizable draggable tree component for Vue.js, but I encountered an issue where it couldn't copy funct ...

Using Conditional Types in Supabase Query results in the TypeScript error, "Type is incompatible with type 'never'."

Query I have encountered a TypeScript issue while working on a Next.js project with Supabase as the backend. To handle responses from Supabase queries, I created some helper types, but I'm stuck on resolving this problem. Helper Types Overview: Belo ...

Fashion for the repetitive elements, activated by events

Looking for ways to style a specific table element that is generated from a repeat.for loop on a <td> tag. <td repeat.for="field of fields" class="${field.fieldKey == 'validTo' ? 'fontweigth: bold;': ''}"> b ...

Issue: Data authentication failure due to unsupported state

I encountered an error message while executing the code below. Error: Unsupported state or unable to authenticate data at Decipheriv.final (node:internal/crypto/cipher:196:29) at decrypt (/Users/username/dev/playground/node/src/index.ts:14:65) import cr ...

Issue with Django and Angular 4 - The requested resource is missing the 'Access-Control-Allow-Origin' header

This is my django code snippet Whenever I test my delete function, this error occurs: The requested resource does not include the 'Access-Control-Allow-Origin' header. This means that the origin is not permitted access. The response resulted ...

The lingering output from the problemMatcher in Visual Studio Code persists even after the issue has been resolved

Hello, I have a task set up in npm where I monitor changes in my TypeScript application, compile it, and run tests automatically. My goal is to have Visual Studio Code alert me in the Problems tab whenever a test fails. Although I've successfully ach ...