Using a class as a property type in another class in TypeScript: A beginner's guide

Question

Using a class as a property type in another class in TypeScript: A beginner's guide

I am a beginner in TypeScript and I have defined some classes. These classes are being used as types for the properties of other classes, like so:

FileOne.ts

export class A {
   propertyOne: string;
   propertyTwo: string;
}

Now, in another file (filetwo.ts), I have another class B:

FileTwo.ts

import { A } from './FileOne';
export class B {
    myProperty: A;
    mySecondProperty: string;
}

I have created an instance of class B in a different file with the following code:

MyApp.ts

import { B } from './FileTwo';
export class C {
    let myObj: B = new B();
    myObj.myProperty.propertyOne = 'hello';
    myObj.myProperty.propertyTwo = 'world'';
    console.log(myObj);
 }

However, I encountered an error when trying to set the property of A through B:

Cannot set the property "propertyOne" of undefined

I'm confused as I expected this behavior to be similar to Java. Could you please explain why I am facing this issue and suggest the correct approach? I would appreciate not just a solution to the problem, but also an explanation.

class typescript

Answer 1

Answer №1

Although you have correctly specified the type of your myProperty member, it seems that this variable is not being initialized when declared. As a result, you are attempting to set a property propertyOne on an undefined variable within your instance of B.

To ensure proper initialization, it is necessary to manually initialize the variable within your B class:

export class B {
  myProperty: A;
  constructor() {
    this.myProperty = new A();
  }
}

Answer 2

Although you have correctly specified the type of your myProperty member, it seems that this variable is not being initialized when declared. As a result, you are attempting to set a property propertyOne on an undefined variable within your instance of B.

To ensure proper initialization, it is necessary to manually initialize the variable within your B class:

export class B {
  myProperty: A;
  constructor() {
    this.myProperty = new A();
  }
}

Answer 3

Answer №2

myObject.myProperty is of type A, but it has not been defined yet. It is recommended to initialize it first:

myObject.myProperty = new A();

After initializing, you can proceed to use it accordingly.

Answer 4

myObject.myProperty is of type A, but it has not been defined yet. It is recommended to initialize it first:

myObject.myProperty = new A();

After initializing, you can proceed to use it accordingly.

Answer 5

Answer №3

Although it may be beyond the immediate topic, I encountered similar issues while working with VueJs as well. Building on Andreas Jägle's response, a slight adjustment resolved my problem, requiring the addition of super(); in my class constructor.

importmodule.ts

import Vue from 'vue'; 
import { Component, Prop } from 'vue-property-decorator'; 
import { MyProfile } from '../../data';

interface CurrentUser {
    name: string;
    title: string;
    groupName: string; }

@Component 
export default class Profile extends Vue {
    profile: MyProfile;

    constructor() {
        super();
        this.profile = new MyProfile();
    } }

data.ts

export interface IPro {
    name: string;
    title: string;
    groupName: string;
}

export class MyProfile implements IPro {
        name = "User";
        title = "Title";
        groupName = "Group";
    }

Answer 6

Although it may be beyond the immediate topic, I encountered similar issues while working with VueJs as well. Building on Andreas Jägle's response, a slight adjustment resolved my problem, requiring the addition of super(); in my class constructor.

importmodule.ts

import Vue from 'vue'; 
import { Component, Prop } from 'vue-property-decorator'; 
import { MyProfile } from '../../data';

interface CurrentUser {
    name: string;
    title: string;
    groupName: string; }

@Component 
export default class Profile extends Vue {
    profile: MyProfile;

    constructor() {
        super();
        this.profile = new MyProfile();
    } }

data.ts

export interface IPro {
    name: string;
    title: string;
    groupName: string;
}

export class MyProfile implements IPro {
        name = "User";
        title = "Title";
        groupName = "Group";
    }

Using a class as a property type in another class in TypeScript: A beginner's guide

Answer №1

Answer №2

Answer №3

Similar questions

Creating a Utils class in Vue.js with seamless access to Vuex through this.$store

Struggling with setting up Angular Material and SCSS configuration in my application -

Running the "npm start" command in Next.js results in the error message: "Unable to execute dev server: Error: [object Object]"

Is it possible to set up tsc to compile test specifications specifically from a designated directory?

What steps should I take to modify the date format to "dd / mm / yy"?

Encountering unexpected null values post-service invocation in Angular 2

Guide on utilizing async/await in .ts files (Encountering error message: "async functions can only be used when targeting ECMAScript 6 or above")

Is there a method to categorize an array of objects by a specific key and generate a new array of objects based on the grouping in JavaScript?

Inject the type into the dependency container

fill the designated column in accordance with the specific criteria

JavaScript - Saving an array of objects to an .xlsx file with various header rows that are merged

Unable to connect Formik Validation Errors to an array of objects

Having trouble with Next.js 13 GitHub OAuth integration - it keeps redirecting me to Discord instead of signing me in

Can you explain the significance behind this code: { [productId: string]: ObjectType }?

Is it possible to define a shared function for enums in TypeScript?

Concealing a banner on a specific page

Tips for reducing a discriminated union by using the key value of a Record

Flipping through different pages showcasing the identical model

The data type 'FetchData[]' cannot be assigned to type 'string' in Ionic React with Typescript

A TypeScript class transferring data to a different class