typescript - Type issue with ViewChild in Angular - Stack Overflow

admin管理员组

文章数量:1345289

The error showing to me is:

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

so My code goes like this: I'm getting data from child to parent using the Viewchild like this:

this is in Parent component: @ViewChild(TeamInfoFormComponent) TeamForm?: TeamInfoFormComponent

also once user clicks on a function in parent component I'm getting the data using a function in the child like this:

  SubmitTeamFn(){ 
const teamFormData: TeamIn | null = this.TeamForm?.getTeamForm()
this.TeamService.PostTeamData(teamFormData).subscribe()}

And I use that data to send it using my service that goes like this:

teamService:

PostTeamData(team:TeamIn | null) : Observable<any> {
    return this.http.post<TeamIn>("http://localhost:3000/teams", team)
   }

last thing the function inside the child goes like this:

getTeamForm():TeamIn | null {    
    const team = this.teamForm.valid ? this.teamForm.value : null 
    return team
  }

teamIn interface:

export interface TeamIn {
    team_name:string;
    team_contactNum:number;
    team_category:string;
}

I don't know what I'm doing with type I'd like to hear a solution also some guidance about using types thank you in advance

The error showing to me is:

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

so My code goes like this: I'm getting data from child to parent using the Viewchild like this:

this is in Parent component: @ViewChild(TeamInfoFormComponent) TeamForm?: TeamInfoFormComponent

also once user clicks on a function in parent component I'm getting the data using a function in the child like this:

  SubmitTeamFn(){ 
const teamFormData: TeamIn | null = this.TeamForm?.getTeamForm()
this.TeamService.PostTeamData(teamFormData).subscribe()}

And I use that data to send it using my service that goes like this:

teamService:

PostTeamData(team:TeamIn | null) : Observable<any> {
    return this.http.post<TeamIn>("http://localhost:3000/teams", team)
   }

last thing the function inside the child goes like this:

getTeamForm():TeamIn | null {    
    const team = this.teamForm.valid ? this.teamForm.value : null 
    return team
  }

teamIn interface:

export interface TeamIn {
    team_name:string;
    team_contactNum:number;
    team_category:string;
}

I don't know what I'm doing with type I'd like to hear a solution also some guidance about using types thank you in advance

• angular
• typescript

Share Improve this question Follow asked yesterday OmarOmar 3155 bronze badges 2

• Try: @ViewChild(TeamInfoFormComponent, { static: false }) TeamForm!: TeamInfoFormComponent to ensure that the TeamForm never be undefined. – Yong Shun Commented yesterday
• That worked hella fast hhh thank you @YongShun one thing any advice about the types I did ? – Omar Commented yesterday

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 1

Starting from Angular 17, you can refer to component children with queries.

Instead of the ViewChild decorator, you would use something like this:

readonly teamForm = viewChild<TeamInfoFormComponent>(TeamInfoFormComponent); //this has type TeamInfoFormComponent | undefined

This will refer to your component using an Angular Signal.

To fix your problem and get rid of undefined you could enforce that your component is existing by using "required".

readonly teamForm = viewChild.required<TeamInfoFormComponent>(TeamInfoFormComponent); //this has type TeamInfoFormComponent only

I don't see the point of making the component nullable, but if you have to, for some reason. You could add the null to your type as well.

readonly teamForm = viewChild.required<TeamInfoFormComponent | null>(TeamInfoFormComponent); //this has type TeamInfoFormComponent | null

But again, I wouldn't recommend this, as it doesn't make sense. You either have your component or you don't. Also something to mention is, if your component didn't exist and you are using required, it will throw an error and let you know in the console.

To sum it up:

• don't use the @ViewChild decorator
• don't use non-null assertion - bad practice
• use viewChild.required query

Approach 1

With:

@ViewChild(TeamInfoFormComponent, { static: false }) TeamForm!: TeamInfoFormComponent

to ensure that your TeamForm is available and not undefined (!) (unless that you need to render it conditionally).

And modify this.TeamForm by remiving ?, since it is not nullable/undefined.

SubmitTeamFn()  { 
  const teamFormData: TeamIn | null = this.TeamForm.getTeamForm();
  this.TeamService.PostTeamData(teamFormData).subscribe()
}

Side note: The variable that declares with ViewChild decorator for accessing the component is only having value after the ngAfterViewInit lifecycle hook.

---

Approach 2

Or you can use the nullish coalescing operator (??) to ensure that the default value will be null when falsy.

SubmitTeamFn()  { 
  const teamFormData: TeamIn | null = this.TeamForm?.getTeamForm() ?? null;
  this.TeamService.PostTeamData(teamFormData).subscribe()
}

The Reason for the error:

The below expression means that the type of the value returned by the function getTeamForm() will have one additional union member undefined since the object TeamForm through which this function is accessed is potentially undefined or optional.

...this.TeamForm?.getTeamForm()

Sample code reproducing the issue

  interface T1 {
    optionalProperty? : string
  }

const a : T1 = {}

const b : string | null = a.optionalProperty?.toUpperCase()
// Error : Type 'string | undefined' is not assignable to type 'string | 
// null'. Type 'undefined' is not assignable to type 'string | null'.

Solution:

Please check and ensure the property this.TeamForm is optional or not.

If it is optional, then please add undefined into the union as below.

const teamFormData: TeamIn | null | undefined = this.TeamForm?.getTeamForm()

If it is made optional by mistake, then please correct its definition by removing the question mark at the end of the property and then correct the statement as below.

const teamFormData: TeamIn | null = this.TeamForm.getTeamForm()

本文标签： typescriptType issue with ViewChild in AngularStack Overflow