Search code examples
angulartypescriptangular-httpclient

Angular/TypeScript typing of JSON response


I have a function in my Angular app that calls a backend server:

    requestLabel(item_sit_id: bigint, type: string)  {
        const uri  = this.config.apiHost() + '/living/requestLabel/' + item_sit_id + "?type=" + type;
        const obs  = this.http.get(uri)
        return obs;
    }

I call that function in the code:

    label(item_sit_id: string) {
       const that = this;
       this.livingService.requestLabel(this.feature.properties.item_sit_id, this.type).subscribe(function (jsonData) {
            const message = jsonData['success'] ? 'successful' : jsonData['message'];
            that.snackBar.open(message, 'Label request', {
                duration: 2000
            });
        });
        this.bottomSheetRef.dismiss();
    }

It works, however IntelliJ marks jsonData['success'] and jsonData['message'] with the error:

TS7053: Element implicitly has an any type because expression of type 'success' can't be used to index type Object
Property success does not exist on type Object

success is a boolean, and message is a string.

What should I be doing to avoid the problem?

Is it an error or warning? Since it works, I'd call it a warning, but IntelliJ marks it as an error.


Solution

  • You should use "arrow syntax" -see the subscribe((jsonData)=>{....})

    this.livingService.requestLabel(this.feature.properties.item_sit_id, this.type)
             .subscribe((jsonData)=> {
                const message = jsonData['success'] ? 'successful' : jsonData['message'];
                ...
              });
    

    When you use a get, you should indicate the type of object you "expect"(*) getting, if you don't know or you want not use interfaces or is a simple call use any

    this.livingService.requestLabel(this.feature.properties.item_sit_id, this.type)
           .subscribe((jsonData:any)=> {
                //see that you can use dot notation
                const message = jsonData.success ? 'successful' : jsonData.message;
                ...
            });
    

    (*)This not makes that you received this kind of response, only help you to write the code