Angular type error: Attempting to assign a value of type 'string' to a variable declared as type 'string[]' is not allowed

Question

Angular type error: Attempting to assign a value of type 'string' to a variable declared as type 'string[]' is not allowed

As a newcomer to Angular, I am currently working on building an electron app with Angular 6.

My objective is: 1. Implementing SupportInformationClass with specific definitions 2. Initializing the component to populate the definitions from electron-settings

supportInformation.ts:

export class SupportInformation  {

    appsSet1: string[];
    //appsSet2: string[];
    //appsSet3: string[];
    //appsSet4: string[];
}

configuration.componenet.ts:

import { SupportInformation } from './supportInformation';
...
...
export class ConfigurationComponent implements OnInit {

    supportInformation: SupportInformation;


    constructor(private childProcessService: ChildProcessService, private electronService: ElectronService) {
        console.log("inside constructor...")
    }

    ngOnInit() {
        console.log("on ngInit...");
        this.getSupportedApps();
    }

    getSupportedApps() {
        if(this.childProcessService.isElectronApp){

            // this.supportInformation.appsSet1 = ["wow"] // this works

            console.log(this.electronService.settings.get('APPS_1')) // this also works
            this.supportInformation.appsSet1 = this.electronService.settings.get('APPS_1'); // this gives an error
        }
    }
}

Despite 'this.electronService.settings.get('APPS_1')' returning an array of string elements, I encounter an error on the specified line.

this.supportInformation.appsSet1 = this.electronService.settings.get('APPS_1');

Error:

Type 'JsonValue' is not assignable to type 'string[]'.
  Type 'string' is not assignable to type 'string[]'.

This is how my settings file looks like:

{
...
    "APPS_1": ["abc", "def", "ghi", "jkl"],
    "APPS_2": ["mno", "pqr"],
...
}

Upon using 'console.log(this.electronService.settings.get('APPS_1'))', this is what it returns:

I'm puzzled by this issue. Any guidance or suggestions would be much appreciated.

Thank you.

angular typescript electron angular6

Answer 1

Answer №1

Make sure to parse your JSON response and then proceed with assigning the values. Give this method a try, it should work like a charm. Check out the code here

Answer 2

Make sure to parse your JSON response and then proceed with assigning the values. Give this method a try, it should work like a charm. Check out the code here

Answer 3

Answer №2

In order to convert your string into a JSON object, you must use the JSON.parse method:

import { SupportInformation } from './supportInformation';
...
...
export class ConfigurationComponent implements OnInit {

    supportInformation: SupportInformation;

    constructor(private childProcessService: ChildProcessService, private electronService: ElectronService) {
        console.log("Initializing constructor...")
    }

    ngOnInit() {
        console.log("Executing ngOnInit...");
        this.fetchSupportedApps();
    }

    fetchSupportedApps() {
        if(this.childProcessService.isElectronApp){

            // this.supportInformation.appsSet1 = ["wow"] // this line is functional

            console.log(this.electronService.settings.get('APPS_1')) // this statement also works
            this.supportInformation.appsSet1 = JSON.parse(this.electronService.settings.get('APPS_1')); // this line causes an error
        }
    }
}

Answer 4

In order to convert your string into a JSON object, you must use the JSON.parse method:

import { SupportInformation } from './supportInformation';
...
...
export class ConfigurationComponent implements OnInit {

    supportInformation: SupportInformation;

    constructor(private childProcessService: ChildProcessService, private electronService: ElectronService) {
        console.log("Initializing constructor...")
    }

    ngOnInit() {
        console.log("Executing ngOnInit...");
        this.fetchSupportedApps();
    }

    fetchSupportedApps() {
        if(this.childProcessService.isElectronApp){

            // this.supportInformation.appsSet1 = ["wow"] // this line is functional

            console.log(this.electronService.settings.get('APPS_1')) // this statement also works
            this.supportInformation.appsSet1 = JSON.parse(this.electronService.settings.get('APPS_1')); // this line causes an error
        }
    }
}

Answer 5

Answer №3

After carefully analyzing the hints provided by @codeSetter and referencing the official angular tutorial, I was able to successfully implement the following solution. However, despite its functionality, the biggest challenge remains that I still don't quite understand why it works.

Here is the code snippet for the implementation:

supportInformation.ts:

export class SupportInformation  {
    appsSet1: string[];
}

configuration.componenet.ts:

import { SupportInformation } from './supportInformation';
...
...

export class ConfigurationComponent implements OnInit {

  supportInformation: SupportInformation = {
        appSet1: []
  };
constructor(private childProcessService: ChildProcessService, private electronService: ElectronService) {
        console.log("inside constructor...")
    }

    ngOnInit() {
        console.log("on ngInit...");
        this.getSupportedApps();
    }

    getSupportedApps() {
        if (this.childProcessService.isElectronApp) {
            this.supportInformation.appSet1 = <[string]>this.electronService.settings.get('APPS_1');
        }
        console.log("this prints what I need: ", this.supportInformation);

    }

}

Answer 6

After carefully analyzing the hints provided by @codeSetter and referencing the official angular tutorial, I was able to successfully implement the following solution. However, despite its functionality, the biggest challenge remains that I still don't quite understand why it works.

Here is the code snippet for the implementation:

supportInformation.ts:

export class SupportInformation  {
    appsSet1: string[];
}

configuration.componenet.ts:

import { SupportInformation } from './supportInformation';
...
...

export class ConfigurationComponent implements OnInit {

  supportInformation: SupportInformation = {
        appSet1: []
  };
constructor(private childProcessService: ChildProcessService, private electronService: ElectronService) {
        console.log("inside constructor...")
    }

    ngOnInit() {
        console.log("on ngInit...");
        this.getSupportedApps();
    }

    getSupportedApps() {
        if (this.childProcessService.isElectronApp) {
            this.supportInformation.appSet1 = <[string]>this.electronService.settings.get('APPS_1');
        }
        console.log("this prints what I need: ", this.supportInformation);

    }

}

Angular type error: Attempting to assign a value of type 'string' to a variable declared as type 'string[]' is not allowed

Answer №1

Answer №2

Answer №3

Similar questions

Invoke an ActionCreator within a different ActionCreator

Tips for removing a specific dynamic element in HTML using an Angular reactive form

Passing a boolean value from the parent Stepper component to a child step in Angular

Exploring Angular14: A guide to efficiently looping through the controls of strictly typed FormGroups

A guide on presenting time in the HH:MM format within Ionic 3

`Angular 6 and the expiration of Jwt tokens`

Depend on a mapping function to assign a value to every option within a discriminated union

Implementing Typescript with React: Assigning event.target.name to state

Angular application experiencing loading issues on Firefox caused by CSP problems

Received a 'Vue error: Redundant navigation to current location prevented' when attempting to refresh the page with updated parameters

How can I create a custom validator in Angular 2 that trims the input fields?

How does [name] compare to [attr.name]?

It is not possible to use an async function with Ionic 4 ToastController buttons

Angular is encountering a circular dependency while trying to access a property called 'lineno' that does not actually exist within the module exports

I'm facing challenges in getting my server action to trigger. The error message that keeps popping up is unexpected submission of a React form

Can you explain the purpose behind using this syntax within the subscribe function?

The specified 'Object' type does not match the required 'Document' constraint

Typescript: Removing signatures with a filter

The problem of package related to scrolling header in Ionic arises when building with the `--prod` flag (Remember to include a @NgModule annotation

Filter out all elements in an array except for one from a JSON response using Angular 2