Angular type error: Type 'string' is not assignable to type 'string[]'

Question

I'm very new to angular and am trying to build an electron app leveraging angular 6.

What I'm trying to do is: 1. SupportInformationClass has a few definitions 2. On init of the componenet, populate the definitions from the 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
        }
    }
}

I end up with an error on this particular line even though this.electronService.settings.get('APPS_1') returns an array of string elements.

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[]'.

My settings file is like below:

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

console.log(this.electronService.settings.get('APPS_1')) gives:

I'm unable to understand why. Could someone give me some pointers regarding the same?

Thanks.

Ouput of console.log(this.electronService.settings.get('APPS_1')) ? — David
– David, Commented Sep 24, 2018 at 9:10
normally settings are key value pairs with a literal on the right hand side. If you've put json in there, perhaps it needs to be destringified. You could also just parse out the seperators (string replace [ with null string for example) and then string split on ','. — user5292841
– user5292841, Commented Sep 24, 2018 at 9:10
of course by de-stringify I mean JSON.parse() . So you say var jsonversion = JSON.parse(this.electronService.settings.get('APPS_1')); — user5292841
– user5292841, Commented Sep 24, 2018 at 9:12
not sure but try this.supportInformation.appsSet1 = <[]>this.electronService.settings.get('APPS_1'); — dipak
– dipak, Commented Sep 24, 2018 at 9:33

shubham singh · Accepted Answer · 2018-09-24 09:38:39Z

1

JSON.parse your response and then assign. try this i hope it works. https://stackblitz.com/edit/angular-mrejs1?file=src/app/app.component.ts

answered Sep 24, 2018 at 9:38

shubham singh

4003 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user5292841 · Accepted Answer · 2018-09-24 09:43:38Z

1

You need to JSON.parse to convert your string to a json object:

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 = JSON.parse(this.electronService.settings.get('APPS_1')); // this gives an error
        }
    }
}

answered Sep 24, 2018 at 9:43

user5292841

1 Comment

blueren Over a year ago

Hi Jeff - I undestand the JSON.parse() , JSON.stringify() point. When I do a console.log(this.electronService.settings.get('APPS_1')), it is already in a JS array format - doing a JSON.parse() - going by the screenshot in the OP on that lead to further errors. Either way, I happened to get it working and have posed an ansewer to my own question. Just that at the moment I'm trying to figure out why it works. :)

blueren · Accepted Answer · 2018-09-24 10:25:13Z

0

Okay, picking up on the clues left by @codeSetter -<[string]>this.electronService.settings.get('APPS_1') and with some help from the official angular tutorial the following seems to work fine. The only problem now being, I don't know WHY it works.

Below is 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);

    }

}

edited Sep 24, 2018 at 10:25

answered Sep 24, 2018 at 10:20

blueren

2,8884 gold badges36 silver badges48 bronze badges

1 Comment

shubham singh Over a year ago

<[string]>this.electronService.settings.get('APPS_1'); by doing this you were typecasting that JSON to string array.

Collectives™ on Stack Overflow

Angular type error: Type 'string' is not assignable to type 'string[]'

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related