error TS2322: Type 'string | null' is not assignable to type 'number'

Question

I want to start by saying that I am really new to both angular and typescript.

I write a program in angular where I use routing to show more information on another page.

The errors occurs at the ngOnInit(){

The first error occurs for: this.blomId TS2322: Type 'string | null 'is not assignable to type' number '. Type 'null' is not assignable to type 'number'.

The second error occurs for: data[this.blomId] TS7053: Element implicitly has an 'any' type because expression of type 'number' cannot be used to index type 'Object'. No index signature with a parameter of type 'number' was found on type 'Object'.

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { BlommorService } from '../blommor.service';

@Component({
  selector: 'app-info',
  templateUrl: './info.component.html',
  styleUrls: ['./info.component.scss']
})
export class InfoComponent implements OnInit {

  blomId: number;
  valdblomma: any;
  constructor(private activatedRoute: ActivatedRoute, private blomservice: BlommorService) {this.blomId = 0;}

  ngOnInit() {
    this.blomId =this.activatedRoute.snapshot.paramMap.get('id'); 
    this.blomservice.getBlommor().subscribe((data) => { 
      this.valdblomma = data[this.blomId];
    });
  }
}

Grateful for help.

Answer 1

this.blomId should be a number according to the declaration

blomId: number;

but the method this.activatedRoute.snapshot.paramMap.get() returns a string (if finds a match) or null (if it doesn't find the match). So you are assigning the value with type string or null to a variable with type number, hence TS throws an error.

To fix it, you need to either change the type to of blomId to string , or use the JS parseInt(string) to parse/convert the string into a number.

like this:

this.blomId = parseInt(this.activatedRoute.snapshot.paramMap.get('id'));

But be aware that if the function doesn't find a match, it will return null, if you pass null to a parseInt() function, you get NaN. So we should add a check to make sure that the result is not falsy before parsing it.

To fix both of your errors:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { BlommorService } from '../blommor.service';

@Component({
  selector: 'app-info',
  templateUrl: './info.component.html',
  styleUrls: ['./info.component.scss']
})
export class InfoComponent implements OnInit {

  blomId: string;
  valdblomma: any;
  constructor(private activatedRoute: ActivatedRoute, private blomservice: BlommorService) {this.blomId = "0";}

  ngOnInit() {
    this.blomId =this.activatedRoute.snapshot.paramMap.get('id'); 
    this.blomservice.getBlommor().subscribe((data) => {
      if (this.blomId) {
          this.valdblomma = data[parseInt(this.blomId)];
      } else {
          // else logic goes here
      }
    });
  }
}

If you still get an error, please console log the data object from the subscription.

Answer 2

The errors in typescript are very dependable for instructing what is expected. It tells you Route params are always going to be strings or null, so you will need to cast to number if you want number to be the type for this.blomId. Apparently in this case, it would be coming as null.

Apparently the getBlommer service is expecting data to be of Object type. This means data must match the "shape" of the actual Object object in JavaScript. Since this[whatever] is not going to be on native Object, it throws this error.

Would probably want to use any or define a specific type for what getBlommer returns as "data".