Angular 프로젝트를 엄격 모드로 컴파일하기 Property has no initializer and is not definitely assigned in the constructor위해 tsconfig.json파일에 일부 구성을 추가 할 때 메시지가 표시 될 수 있습니다.
"compilerOptions": {
"strict": true,
"noImplicitAny": true,
"noImplicitThis": true,
"alwaysStrict": true,
"strictNullChecks": true,
"strictFunctionTypes": true,
"strictPropertyInitialization": true,
실제로 컴파일러는 멤버 변수가 사용되기 전에 정의되지 않았다고 불평합니다.
컴파일 타임에 정의되지 않은 멤버 변수의 예는 @Input지시문이 있는 멤버 변수입니다 .
@Input() userId: string;
변수가 선택 사항 일 수 있음을 지정하여 컴파일러를 침묵시킬 수 있습니다.
@Input() userId?: string;
그러나 변수가 정의되지 않은 경우를 처리하고 다음과 같은 일부 명령문으로 소스 코드를 복잡하게 만들어야합니다.
if (this.userId) {
} else {
}
대신,이 멤버 변수의 값을 알면 시간 내에 정의됩니다. 즉, 사용되기 전에 정의되므로 컴파일러에게 정의되지 않는 것에 대해 걱정하지 않도록 할 수 있습니다.
이것을 컴파일러에 알리는 방법은 다음 ! definite assignment assertion과 같이 연산자 를 추가하는 것입니다.
@Input() userId!: string;
이제 컴파일러는이 변수가 컴파일 타임에 정의되지는 않았지만 런타임에 그리고 사용되기 전에 정의되어야 함을 이해합니다.
이제이 변수가 사용되기 전에 정의되었는지 확인하는 것은 응용 프로그램에 달려 있습니다.
추가 보호 기능으로 변수를 사용하기 전에 정의되고 있음을 확인할 수 있습니다.
변수가 정의되어 있다고 주장 할 수 있습니다. 즉, 필요한 입력 바인딩이 실제로 호출 컨텍스트에 의해 제공되었습니다.
private assertInputsProvided(): void {
if (!this.userId) {
throw (new Error("The required input [userId] was not provided"));
}
}
public ngOnInit(): void {
this.assertInputsProvided();
}
변수가 정의되었으므로 이제 변수를 사용할 수 있습니다.
ngOnChanges() {
this.userService.get(this.userId)
.subscribe(user => {
this.update(user.confirmedEmail);
});
}
참고 ngOnInit 메서드는 바인딩에 실제 입력이 제공되지 않은 경우에도 입력 바인딩 시도 후에 호출됩니다.
반면 ngOnChanges방법은 입력 바인딩 시도 후 불러에만 바인딩 제공 실제 입력되어 있었다.
