Angular 케냐 밋업

Stephen Cooper는 2022년 6월 23일 Angular Kenya Meetup에서 발표했습니다. 다른 사람들이 템플릿 유형 검사를 활성화했을 때 사용하는 구성 요소를 구축하여 얻은 교훈을 설명합니다.

이를 통해 IDE는 초기 사전 컴파일 시간 경고를 얻기 위해 코딩할 때 유형 오류에 대해 경고할 수 있습니다.

엄격 모드가 기본적으로 활성화되어 있으므로 형식이 잘못된 구성 요소를 사용하는 것보다 더 성가신 일이 없다는 것을 인정해야 합니다. 구성 요소를 개발할 때 엄격 모드가 활성화된 개발자에 대한 입력 유형의 의미를 고려해야 합니다.

입력 유형을 정의하는 것만으로는 유형 실패를 방지하기에 충분하지 않습니다.

속기 부울 속성을 지원하려는 경우 선언이 부울일 수는 없습니다.

public disabled: boolean = false;

명시적 속성 바인딩이 작동합니다.

<app-display [disabled]="true"></app-display>

그러나 누군가 일반 속성을 사용하면 기본값이 빈 문자열과 동일하기 때문에 작동하지 않습니다.

<app-display disabled></app-display>

유형이 일치하지 않고 "유형 '문자열'은 유형 '부울'에 할당할 수 없기 때문에 이것은 IDE에서 시각적 경고를 생성합니다."

Angular/Typescript 버전에 따라 이를 처리하는 두 가지 방법이 있습니다.

Angular v9-14에서는 입력 강제 변환에 ngAcceptInputType_를 사용하거나 Typescript v4.3 및 Angular v13+에 대해 서로 다른 유형으로 Set 및 Get을 사용할 수 있습니다.
ngAcceptInputType_는 입력 속성의 허용되는 유형을 확장할 수 있도록 하는 Angular 컴파일러에서 지원하는 정적 속성입니다.

입력은 일반적인 방식으로 정의되지만 정적ngAcceptInputType_ 속성도 추가하여 컴파일러에서 여러 유형을 허용할 수 있습니다.

@Input()
public disabled: boolean = false;
static ngAcceptInputType_disabled: boolean | '';

그러나 여전히 ngOnchanges를 사용하여 빈 문자열을 true로 변환해야 합니다.

ngOnChanges (changes: SimpleChanges) {
   if (changes.disabled) {
       this. disabled = toBoolean(changes.disabled.currentValue);
   }
}

toBoolean (value: boolean | string) {
    this.disabled = (value === '') || value === true;
}

이는 다른 유형에 대해서도 수행할 수 있습니다. 날짜:

@Input ()
public date: Date;
static ngAcceptInputType_date: Date | string;

ngOnChanges (changes: SimpleChanges) {
    if (changes.date) {
        this.date = toDate(changes.date.currentValue);
    }
}

그러나 비동기 파이프로 입력이 설정됩니까? 초기 null 값을 처리합니까?

예를 들어 사용자가 Observable 스트림에서 disabled 값을 설정하는 경우

disabledStream$: Observable<boolean>;

그리고:

<app-display [disabled]="disabledStream$ | async"></app-display>

값이 아직 내보내지지 않은 경우 Async 파이프는 null을 반환합니다.

null을 처리하도록 ngAcceptInputType_를 수정합니다.

static ngAcceptInputType_disabled: boolean | '' | null;

Typescript 4.3에서는 이제 다양한 유형으로 Get 및 Set을 사용할 수 있습니다.

_disabled: boolean = false;

@Input()
get disabled(): boolean{
   return this._disabled;
}

set disabled(value: boolean | string | null){
   this._disabled = toBoolean(value);
}

ngAcceptInputType_가 더 이상 필요하지 않습니다.

코드에서 타사 구성 요소에 대한 컴파일 실패를 처리할 수도 있습니다.

"!"가 포함된 null이 아닌 어설션:

<app-display [disabled]="(disabledStream$ | async)!"></app-display>

"$any()"로 유형 검사 비활성화:

<app-display [disabled]="$any(disabledStream$ | async)"></app-display>

기본값 "|| false"를 제공합니다.

<app-display [disabled]="(disabledStream$ | async) || false"></app-display>

다양한 검사를 끄도록 Angular Compiler 옵션을 구성하는 것도 가능합니다.

예를 들어

"angularCompilerOptions": { "strictNullInputTypes": false}

Angular 문서 - Template Type Checking 에 자세히 설명되어 있습니다.

토크 녹음은 엄격한 응용 프로그램에서 사용하기 위해 "ag-grid-angular"를 준비한 경험에서 가져온 입력 강제와 함께 ngAcceptInputType 및 Set/Get의 사용 사례를 보여줍니다.

또한 이야기는 더 나아가 제네릭 사용자에 대해 설명합니다.

export class GenericComponent<TData>{
    @Input()
    rowData: TData[] | undefined;

    @Output ()
    rowDataUpdated = new EventEmitter<TData]>();
}

그 다음에:

rowData: number[] = [];
onRowDataUpdate (event: string[]) {}

그리고:

<app-generic
    [rowData]="rowData"
    (rowDataUpdated)="onRowDataUpdate($event)">
</app-generic>

입력은 Angular의 기본 부분이므로 응용 프로그램에서 엄격 모드를 활성화하면 모든 개발자에게 영향을 미칩니다. 완전한 유형의 구성 요소를 유지하기 위해 Angular 기능이 있을 때 개발자가 의존하는 것을 싫어합니다.

비디오에는 확장된 Q&A 세션도 있습니다.

암호

Typescript 엄격 모드를 준수하는 Angular 구성 요소를 작성하기 위한 코드 예제입니다. Template Type Checking에 설명된 접근법에 대한 두 가지 샘플 앱.

GitHub 저장소: https://github.com/StephenCooper/StrictAngularComponents

두 데모에서 실행 시 컴파일 오류npm run start가 표시됩니다. Stephen은 설명된 접근 방식에 따라 수정해야 하는 예제를 남겼습니다.

관련 읽기

Angular 템플릿 유형 확인 문서: https://angular.io/guide/template-typecheck#template-type-checking

슬라이드

Download pdf of the slides

토크 녹음