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

Angular 4: preventing button click until form validation is successful

Having trouble with ng build optimization error in Angular?

Angular - Automatically create thumbnails for uploaded images and videos

Can anyone suggest a more efficient method for specifying the type of a collection of react components?

Enhancing an existing Angular1 project to Angular4 while incorporating CSS, Bootstrap, and HTML enhancements

Looking to verify the functionality of the router.navigate method when employing relativeTo?

Passing variable values in Angular 6

Display a loading screen while transitioning between routes in Angular 2

Was anticipating 1 argument, however received 5 in TypeScript

Issue with default behavior of infinite scroll in Angular 4

Currently, my goal is to create PDFs using Angular

Using TypeScript to work with JSON fields that include the '@' symbol

VIDEOJS ERROR: A peculiar mistake has occurred. TypeError: The property 'value' cannot be read since it is undefined in the context of

Having difficulty accessing the 'makeCurrent' property of an undefined object in Angular mobile application

Troubleshooting problems encountered in Nest.js due to modifications made within a service.ts file

Tips for successfully mocking axios.get in Jest and passing AxiosPromise type value

Send the latest cell parameters from the CellRendererFramework element to the main grid component

Error Message: The Query<DocumentData> type cannot be assigned to the DocumentReference<DocumentData> parameter

Is it feasible to mock a defined function in Typescript for a unit test scenario?

Using an enum with [routerlink] in Angular 7 is a great way to navigate