[Angular] Error - "속성 '~~'은(는) 이니셜라이저가 없고 생성자에 할당되어 있지 않습니다.ts()

qwe8851·2022년 11월 20일
2

🅰️ Angular

목록 보기
3/9
속성 'article'은(는) 이니셜라이저가 없고 생성자에 할당되어 있지 않습니다.ts(2564)

공부중에 이런 에러가 떳다.
책은 3년 전 책이구 ts가 최신버전으로 업데이트 되면서 생기는 오류라고 한다..

import { Component, OnInit, HostBinding, Input } from '@angular/core';
import { Article } from './article.model';

@Component({
  selector: 'app-article',
  templateUrl: './article.component.html',
  styleUrls: ['./article.component.css'],
})
export class ArticleComponent implements OnInit {
  @HostBinding('attr.class') cssClass = 'row';
  @Input() article: Article;

  constructor() {
    // 게시물은 Input 행에 위치함
    // 따라서 따로 할 일은 없다.
  }

  voteUp(): boolean {
    this.article.voteUp();
    return false; //재랜더링을 막음
  }

  voteDown(): boolean {
      this.article.voteDown();
    return false; //재랜더링을 막음
  }

  ngOnInit() {}
}

Article이라는 클래스를 가져와 article에 할당해서 밑의 함수에서 사용하는 코드이다.

article이 undefined라 Article이라는 타입이 안맞다구 해서
@Inpun() article: Article|undefined; 로 작성해줬더니
article을 사용하고 있는 아래 voteUp(), voteDown함수에서 에러가 나버린다ㅜ

voteUp(): boolean {
    if(this.article != undefined){
    this.article.voteUp();
    }else{}
    return false; //재랜더링을 막음
}

그래서 밑에 함수도 article이 들어오면 안의 코드를 실행하고 아니면 걍 암것두 안함~ 이런식으로 해줬더니 에러가 사라졌다 ㅎㅎ

++) 아 ㅜㅜ 위에처럼 했는데 에러남
@Input() article!:Article;로 변경하면 된다..
!: 연산자는 컴파일러에게 "변수 article은 값이 무조건 할당되어있으므로 걱정 말고 사용하면 된다~ 라고 알려준다고 한다.. 쫭난다 ㅜㅜ





최종 코드는 이러하다~

import { Component, OnInit, HostBinding, Input } from '@angular/core';
import { Article } from './article.model';

@Component({
  selector: 'app-article',
  templateUrl: './article.component.html',
  styleUrls: ['./article.component.css'],
})
export class ArticleComponent implements OnInit {
  @HostBinding('attr.class') cssClass = 'row';
  @Input() article!: Article;

  constructor() {
    // 게시물은 Input 행에 위치함
    // 따라서 따로 할 일은 없다.
  }

  voteUp(): boolean {
    this.article.voteUp();
    return false; //재랜더링을 막음
  }

  voteDown(): boolean {
      this.article.voteDown();
    return false; //재랜더링을 막음
  }

  ngOnInit() {}
}





# Summary

변수 선언부분에
!:를 넣어주자..

@Input() article!: Article;
profile
FrontEnd Developer with React, TypeScript

0개의 댓글