'{ name: string; 类型的参数 id：空； }' 不能分配给'User'类型的参数

Question

I am making angular app using in memory web api. When I was trying to make addUser() function, this is the error I am getting at createUser(data) :

Argument of type '{ name: string; id: null; }' is not assignable to parameter of type 'User'. Types of property 'id' are incompatible. Type 'null' is not assignable to type 'number'.ts(2345)

user-list.components.ts:

import { Component, OnInit } from '@angular/core';
import { User } from 'src/app/users/users.model';
import { UserService } from 'src/app/users/user.service';

@Component({
  selector: 'app-user-list',
  templateUrl: './user-list.component.html',
  styleUrls: ['./user-list.component.css']
})
export class UserListComponent implements OnInit {
  user = {
    name: '',
    id: null
  }

  edit = true;
  add = false;
  users!: User[];

  constructor(private userService: UserService) { }

  ngOnInit(): void {
    this.getUsers()
  }

  private getUsers(){
    this.userService.getUsers().subscribe(users => this.users = users)
  }

  addUser(){
    const data = {
      name: this.user.name,
      id: this.user.id
    };
    this.userService.createUser(data).subscribe(response => {
      console.log(response)
      this.getUsers();
    })
  }
}

user.service.ts:

import { Injectable } from '@angular/core';
import { User } from './users.model';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError, retry } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class UserService {
  
  private usersUrl = 'api/users/';

  constructor(private http: HttpClient) { }

  getUsers(): Observable<User[]> {
    return this.http.get<User[]>(this.usersUrl).pipe(
      retry(2),
      catchError((error: HttpErrorResponse) => {
        console.error(error);
        return throwError(error);
      })
    );
  }

  createUser(user: User): Observable<User> {
    user.id === null;
    return this.http.post<User>(this.usersUrl, user).pipe(
      catchError((error: HttpErrorResponse) => {
        console.error(error);
        return throwError(error);
      })
    )
  }

  editUser(user: User): Observable<any> {
    return this.http.put(this.usersUrl + user.id, user);
  }

  deleteUser(id: number): Observable<any> {
    return this.http.delete(this.usersUrl + id);
  }
}

Answer 1

This happen due to typescript version 2.1 or later , Please check your tsconfig.json file & search for strictNullChecks , you will see it's value is true.

I Believe that in your User Model, the parameter id has type number , but inside your component you created a default user object, with default values, inside that object the id parameter has null value,

Due to this null value, it's throw such error, I will suggest you that please update your default user object of component with type User Model, after updating, your code will be look like below

user: User = {
  name: '',
  id: 0
}

Now If you assign null to id paramter , the IDE or Code Editor itself show you error, similar to this

Type 'null' is not assignable to type 'number'