Type 'string | null' is not assignable to type 'string | undefined'. Type 'null' is not assignable to type 'string | undefined'

Question

When i make property as id!:string; or id:string=''; when i assign the value of params i get an error

(property) MoreParametersComponent.id: string ts(2322)Type 'string | null' is not assignable to type 'string'. Type 'null' is not assignable to type 'string'.

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-more-parameters',
  templateUrl: './more-parameters.component.html',
  styleUrls: ['./more-parameters.component.css']
})
export class MoreParametersComponent implements OnInit {
  id!: string; // or id:string='';
  id2:number=0;
  constructor(private activatedRoute:ActivatedRoute) { }

  ngOnInit(): void {
    this.activatedRoute.paramMap.subscribe(params=>{
      this.id=params.get('id'); // gives the above error here
      this.id2=parseInt(params.get('id2'));//error
    });
  }

}

How do I get around this error?

My Rest of the Code:

app.component.html

<a routerLink=""> Home </a><br>
<a routerLink="one-parameter,'p01'"> One-Parameter </a><br>
<a routerLink="more-parameter,{id:'p02',id2:123}"> More-Parameter </a> 
<br><br>
<router-outlet></router-outlet>
<br><br>

Route.config.ts

import { Routes } from '@angular/router'
import { HomeComponent } from './home/home.component';
import { MoreParametersComponent } from './more-parameters/more-parameters.component';
import { OneParamterComponent } from './one-paramter/one-paramter.component';


export const mainroute:Routes=[
    {path:'',component:HomeComponent},
    {path:'one-parameter',component:OneParamterComponent},
    {path:'more-parameter',component:MoreParametersComponent}
];

What's the problem exactly? It looks like params.get may return null, and null is not assignable to this.id. You need to handle this case. — Rafael Tavares
– Rafael Tavares, Commented Dec 18, 2021 at 9:23
Now i perform some changes on my code by adding some necessary code about this problem. — Farukh Shaikh
– Farukh Shaikh, Commented Dec 18, 2021 at 9:39
you can always use this.id=params.get('id') || null or this.id2=parseInt(params.get('id') || 0) — Eliseo
– Eliseo, Commented Dec 18, 2021 at 10:20
Just set "strictPropertyInitialization": false in tsconfig.json under compilerOptions and assign the value. I think dealing with this is just unnecessary overhead. — b2f
– b2f, Commented Dec 18, 2021 at 10:30

Mehyar Sawas · Accepted Answer · 2021-12-18 10:34:15Z

3

The return of ParamMap.get is string | null which does not match your id type.

You could cast the return of ParamMap.get to a string like params.get('id') as string

Or you could subscribe on params instead which returns an object with property type any and access the the id param as an object key params.id. See https://angular.io/api/router/Params

answered Dec 18, 2021 at 10:34

Mehyar Sawas

1,2667 silver badges16 bronze badges

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

3 Comments

Farukh Shaikh Over a year ago

thanks!! Mehyar for Responding.

Philipp Meissner Over a year ago

"Casting" it via as string will only tell the compiler to treat the value as string. In fact, it still may very well be a null value and cause errors along the way. A better solution would be to add an additional check whether the value is null or not and only use the return value if it's a valid useable value.

Mehyar Sawas Over a year ago

Which kind of errors will be caused along the way? When a null is passed as a param, this means that the problem happened before when the route passes a wrong value for the ID param. This should be prevented before receiving the ID value from the param. But of course it is not a bad idea to check on the ID value in the activated Route, but it's also not definitely needed

Chittebabu · Accepted Answer · 2024-07-02 15:03:19Z

0

You can try adding an exclamation '!' at the end to let the compiler know that the id will not be null.

this.id=params.get('id')!;
this.id2=parseInt(params.get('id2')!);

answered Jul 2, 2024 at 15:03

Chittebabu

133 bronze badges

Collectives™ on Stack Overflow

Type 'string | null' is not assignable to type 'string | undefined'. Type 'null' is not assignable to type 'string | undefined'

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related