Error: Type 'string | null' is not assignable to type 'string'. Type 'null' is not assignable to type 'string'. Error : Type '{ id?: string | undefined; title?: string | undefined; content?: string | undefined; }' is not assignable to type 'Post'. Types of property 'id' are inpatible. Type 'string | undefined' is not assignable to type 'string'. Type 'undefined' is not assignable to type 'string'.

export interface Post{
    id:string;
    title:string;
    content:string;
}

import { Component,OnInit} from '@angular/core';
import { NgForm } from '@angular/forms';
import { ActivatedRoute, ParamMap } from '@angular/router';
import { Post } from '../post.model';

import { PostsService } from '../posts.service';

@Component({
  selector: 'app-post-create',
  templateUrl: './post-createponent.html',
  styleUrls: ['./post-createponent.css']
})
export class PostCreateComponent implements OnInit {

// newPost='No Content'
enteredTitle='' 
  enteredContent=''
private mode='create'
private postId:string 
private post:Post
  // postId: string | null | undefined;

constructor(public postsService:PostsService
  ,public route: ActivatedRoute){}

ngOnInit(){
  this.route.paramMap.subscribe((paramMap:ParamMap)=>{
    if(paramMap.has('postId')){
      this.mode='edit'
      this.postId=paramMap.get('postId')
      this.post=this.postsService.getPost(this.postId)
    }else{
      this.mode='create'
      this.postId="null";
    }
  });
}

onAddPost(form:NgForm){ 
  if(form.invalid)
  {
    return
  } 
  console.log((form.value.title,form.value.content));
  this.postsService.addPost(form.value.title,form.value.content)

form.resetForm();

}
}

Error: Type 'string | null' is not assignable to type 'string'. Type 'null' is not assignable to type 'string'. Error : Type '{ id?: string | undefined; title?: string | undefined; content?: string | undefined; }' is not assignable to type 'Post'. Types of property 'id' are inpatible. Type 'string | undefined' is not assignable to type 'string'. Type 'undefined' is not assignable to type 'string'.

export interface Post{
    id:string;
    title:string;
    content:string;
}

import { Component,OnInit} from '@angular/core';
import { NgForm } from '@angular/forms';
import { ActivatedRoute, ParamMap } from '@angular/router';
import { Post } from '../post.model';

import { PostsService } from '../posts.service';

@Component({
  selector: 'app-post-create',
  templateUrl: './post-create.ponent.html',
  styleUrls: ['./post-create.ponent.css']
})
export class PostCreateComponent implements OnInit {

// newPost='No Content'
enteredTitle='' 
  enteredContent=''
private mode='create'
private postId:string 
private post:Post
  // postId: string | null | undefined;

constructor(public postsService:PostsService
  ,public route: ActivatedRoute){}

ngOnInit(){
  this.route.paramMap.subscribe((paramMap:ParamMap)=>{
    if(paramMap.has('postId')){
      this.mode='edit'
      this.postId=paramMap.get('postId')
      this.post=this.postsService.getPost(this.postId)
    }else{
      this.mode='create'
      this.postId="null";
    }
  });
}

onAddPost(form:NgForm){ 
  if(form.invalid)
  {
    return
  } 
  console.log((form.value.title,form.value.content));
  this.postsService.addPost(form.value.title,form.value.content)

form.resetForm();

}
}

• javascript
• node.js
• angular
• typescript

• Maybe try private postId: string = '' – Emilien Commented Mar 15, 2021 at 11:19
• Dou you need this, this.postId="null"; , cant you change it to =""; – Grumpy Commented Mar 15, 2021 at 11:22
• @Grumpy this.postId=''null" can be changed tothis.postId="" but problem is on this.postId=paramMap.get('postId') this.post=this.postsService.getPost(this.postId) – Anuj Todankar Commented Mar 15, 2021 at 11:25
• @Emilien No, thats not a solution – Anuj Todankar Commented Mar 15, 2021 at 11:28
• 1 You need to check if(postId) before using it – Roberto Zvjerković Commented Mar 15, 2021 at 11:38

2 Answers 2

paramMap.get() returns string|null. Since your variable is strictly of type string, TS is showing the error.
You could either change the type of postId to string|null.
Or do something like this this.postId=paramMap.get('postId') || '';

I think paramMap returns a boolean..you need a string. "Returns boolean: True if the map contains the given parameter, false otherwise."