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:

https://i.sstatic.net/Dsc34.png

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

Using the spread operator in the console.log function is successful, but encountering issues when attempting to assign or return it in a

Eliminating an index from a JSON array using Typescript

Deliver a distinct service instance for each component

AngularJS: Integrating OAuth2 for RESTful API Development

Issue: Unable to assign value to 'googleUri' property of null. Resolving with Interface for two-way binding?

Issue 1068: Attribute not found within angular 2 (Ahead of Time Compilation)

Restrict the scope of 'unknown' to an object containing only a string-field without resorting to 'any'

Creating a Typescript interface where one property is dependent on another property

What role do the esm directories serve within Angular 2 modules?

Tips for effectively invoking an API within a Next.js application

Exploring the behavior of control flow in Typescript

Sending a post request to an Express.js API from a different device

Implementing Angular with HTML progress bar for interactive client-side features

What is the process for calculating a class property in typescript?

The system is failing to recognize the union data type

Issue with Retrieving Value in NgxLocalStorage

Encountering a 403 error upon refreshing the page of my Angular 6 project

Deliver a locally defined variable from a template to the parent component

Error message in Angular: Unable to locate a differ that supports the object '[object Object]' of type 'object.' NgFor is only able to bind to iterables like Arrays

What is the best way to locate and access a JSON file that is relative to the module I am currently working