What is the issue when using TypeScript if my class contains private properties while the object I provide contains public properties?

Question

What is the issue when using TypeScript if my class contains private properties while the object I provide contains public properties?

I am currently facing an issue while attempting to create a typescript class with private properties that are initialized in the constructor using an object. Unfortunately, I keep encountering an error message stating: "error TS2345: Argument of type 'TranslateResponse' is not assignable to parameter of type '{ status: "success" | "failed"; errorCode?: number | undefined; message?: string | undefined; data?: any; }'. 2023-05-30 13:45:24 translator-angular | Property 'status' is private in type 'TranslateResponse' but not in type '{ status: "success" | "failed"; errorCode?: number | undefined; message?: string | undefined; data?: any; }'. I'm confused about the significance of declaring a property as private or public within an object. Although I've come across similar issues concerning interfaces, I don't actually have any interfaces defined in my code.

export class FileTranslatedSuccess {
    
    private newFilePath!: string;
    private newFileName!: string;
    private targetLanguage!: LanguageCode;

    constructor(object: {newFilePath: string, newFileName: string, targetLanguage: LanguageCode}) {
        this.newFilePath = object.newFilePath;
        this.newFileName = object.newFileName;
        this.targetLanguage = object.targetLanguage;
    }

The constructor above takes an object of the following shape:

constructor(object: {
        fileTranslatedSuccess: {[key: string]: FileTranslatedSuccess[]},
        fileTranslatedFailed: {originalFile: string, targetLanguage: LanguageCode, message: string}[] | ""
    }) {
        let keys = Object.keys(object.fileTranslatedSuccess);
        this.fileTranslatedSuccess = {};
        keys.forEach(key => {
            this.fileTranslatedSuccess[key] = [];
            object.fileTranslatedSuccess[key].forEach(fileTranslatedSuccess => {
                this.fileTranslatedSuccess[key].push(new FileTranslatedSuccess(fileTranslatedSuccess));
            });
        });
        if (object.fileTranslatedFailed === "") {
            this.fileTranslatedFailed = "";
        } else {
            this.fileTranslatedFailed = [];
            object.fileTranslatedFailed.forEach(fileTranslatedFailed => {
                if (Array.isArray(this.fileTranslatedFailed)) {
                    this.fileTranslatedFailed.push(new FileTranslatedFailed(fileTranslatedFailed));
                }
            });
        }
    }

This constructor belongs to another object in my codebase. The error occurs when trying to instantiate the FileTranslatedSuccess class. (this.fileTranslatedSuccess[key].push(new FileTranslatedSuccess(fileTranslatedSuccess));). Can someone clarify why setting private properties in the constructor using an object with public properties results in an error?

angular typescript constructor angular16

Answer 1

Answer №1

object.fileTranslatedSuccess[key].forEach(fileTranslatedSuccess => {
    this.fileTranslatedSuccess[key].push(new FileTranslatedSuccess(fileTranslatedSuccess));
});

When working with TypeScript, it assumes that fileTranslatedSuccess is of type FileTranslatedSuccess. During compilation, TypeScript does not dynamically read the real-time value of fileTranslatedSuccess and only recognizes the public properties within the FileTranslatedSuccess class. Even if the values of newFilePath, newFileName, and targetLanguage are valid and accessible during runtime, TypeScript remains unaware.

This creates a dilemma for the TypeScript compiler. On one hand, you indicate that these 3 properties should be private but then proceed to request access to them in order to assign values from one instance to another.

To address this issue, there are several solutions:

Make the properties public.

Create getter functions for each property to retrieve their values. For example:

 export class FileTranslatedSuccess {

 private newFilePath!: string;
 private newFileName!: string;
 private targetLanguage!: LanguageCode;

 constructor(object: {newFilePath: string, newFileName: string, targetLanguage: LanguageCode}) {
         this.newFilePath = object.newFilePath;
         this.newFileName = object.newFileName;
         this.targetLanguage = object.targetLanguage;
 }

 getFilePath(): string {
     return this.newFilePath;
 }

 getFileName(): string {
     return this.newFileName;
 }

 getTargetLanguage(): string {
     return this.targetLanguage;
 }

}

Subsequently, in your code, you can do something like the following:

object.fileTranslatedSuccess[key].forEach(fileTranslatedSuccess => {
    const filePath = fileTranslatedSuccess.getFilePath();
    const fileName = fileTranslatedSuccess.getFileName();
    const targetLanguage = fileTranslatedSuccess.getTargetLanguage();
    
    this.fileTranslatedSuccess[key].push(new FileTranslatedSuccess({newFilePath: filePath, newFileName: fileName, targetLanguage: targetLanguage}));
});

If object.fileTranslatedSuccess originates from an API call and you aim to instantiate objects as FileTranslatedSuccess types, utilizing interfaces may provide more clarity. By making the 3 properties public in the interface and assigning them accordingly in your constructor, you enhance project readability. Here's a basic untested implementation:
```
 export interface IFileTranslatedSuccess {
     newFilePath: string;
     newFileName: string;
     targetLanguage: LanguageCode;
 }


 object.fileTranslatedSuccess[key].forEach((ifileTranslatedSuccess: IFileTranslatedSuccess) => {     
     this.fileTranslatedSuccess[key].push(new FileTranslatedSuccess(ifileTranslatedSuccess));
 });
```

In your FileTranslatedSuccess class, consider implementing:

export class FileTranslatedSuccess {
    
    private newFilePath!: string;
    private newFileName!: string;
    private targetLanguage!: LanguageCode;

    constructor(object: IFileTranslatedSuccess) {
       this.newFilePath = object.newFilePath;
       this.newFileName = object.newFileName;
       this.targetLanguage = object.targetLanguage;
       ...
    }
}

Answer 2

object.fileTranslatedSuccess[key].forEach(fileTranslatedSuccess => {
    this.fileTranslatedSuccess[key].push(new FileTranslatedSuccess(fileTranslatedSuccess));
});

When working with TypeScript, it assumes that fileTranslatedSuccess is of type FileTranslatedSuccess. During compilation, TypeScript does not dynamically read the real-time value of fileTranslatedSuccess and only recognizes the public properties within the FileTranslatedSuccess class. Even if the values of newFilePath, newFileName, and targetLanguage are valid and accessible during runtime, TypeScript remains unaware.

This creates a dilemma for the TypeScript compiler. On one hand, you indicate that these 3 properties should be private but then proceed to request access to them in order to assign values from one instance to another.

To address this issue, there are several solutions:

Make the properties public.

Create getter functions for each property to retrieve their values. For example:

 export class FileTranslatedSuccess {

 private newFilePath!: string;
 private newFileName!: string;
 private targetLanguage!: LanguageCode;

 constructor(object: {newFilePath: string, newFileName: string, targetLanguage: LanguageCode}) {
         this.newFilePath = object.newFilePath;
         this.newFileName = object.newFileName;
         this.targetLanguage = object.targetLanguage;
 }

 getFilePath(): string {
     return this.newFilePath;
 }

 getFileName(): string {
     return this.newFileName;
 }

 getTargetLanguage(): string {
     return this.targetLanguage;
 }

}

Subsequently, in your code, you can do something like the following:

object.fileTranslatedSuccess[key].forEach(fileTranslatedSuccess => {
    const filePath = fileTranslatedSuccess.getFilePath();
    const fileName = fileTranslatedSuccess.getFileName();
    const targetLanguage = fileTranslatedSuccess.getTargetLanguage();
    
    this.fileTranslatedSuccess[key].push(new FileTranslatedSuccess({newFilePath: filePath, newFileName: fileName, targetLanguage: targetLanguage}));
});

If object.fileTranslatedSuccess originates from an API call and you aim to instantiate objects as FileTranslatedSuccess types, utilizing interfaces may provide more clarity. By making the 3 properties public in the interface and assigning them accordingly in your constructor, you enhance project readability. Here's a basic untested implementation:
```
 export interface IFileTranslatedSuccess {
     newFilePath: string;
     newFileName: string;
     targetLanguage: LanguageCode;
 }


 object.fileTranslatedSuccess[key].forEach((ifileTranslatedSuccess: IFileTranslatedSuccess) => {     
     this.fileTranslatedSuccess[key].push(new FileTranslatedSuccess(ifileTranslatedSuccess));
 });
```

In your FileTranslatedSuccess class, consider implementing:

export class FileTranslatedSuccess {
    
    private newFilePath!: string;
    private newFileName!: string;
    private targetLanguage!: LanguageCode;

    constructor(object: IFileTranslatedSuccess) {
       this.newFilePath = object.newFilePath;
       this.newFileName = object.newFileName;
       this.targetLanguage = object.targetLanguage;
       ...
    }
}

What is the issue when using TypeScript if my class contains private properties while the object I provide contains public properties?

Answer №1

Similar questions

Guide to populating a list in a resolver during navigation and storing the initial item in the ngrx store

Tips for properly handling a property that receives its value from a callback function and waiting for it to be updated

Instead of returning an object, the underscore groupBy function now returns an array

What is the method for accessing an anonymous function within a JavaScript Object?

Implementing Constants in Angular 2: Best Practices

Lack of Intellisense in Sveltekit for the generated $types module on WebStorm

How can you programmatically toggle the visibility of a material table footer?

Is there any need for transpiling .ts files to .js when Node is capable of running .ts files directly?

What is the best way to trigger click events within a select dropdown using Angular?

Retrieve the output of the subscribe function in Angular 8 service

Angular: Utilizing Parameters in HTTP GET Requests

Issues regarding ambient getters and setters

Error in Reactive Form: Null Property Reading Issue

Struggling to utilize a personalized filter leads to the error message: "Unable to call a function without a designated call signature."

Developing specialized error messages embedded within backend feedback using Angular

A more efficient approach to specifying types for the 'navigation' object in React Native's Stack Navigator

TypeScript: implementing function overloading in an interface by extending another interface

A guide on determining the return type of an overloaded function in TypeScript

It is not necessary to specify a generic type on a Typescript class

In Angular, I aim to invoke the this.addDispatchToReceive method whenever the outcome is successful within each forEach iteration