TypeScript 컴파일러 : Generics를 사용할 때 컴파일러 오류를 방지하는 방법

Question

다음 인터페이스는 JSON API 응답을 정의하는 데 사용됩니다.
상태 필드는 요청이 성공했는지 여부를 알려줍니다.
데이터 필드는 요청이 성공하면 서버에서 반환 한 데이터 (사용 가능한 경우에만)를 설정하는 데 사용됩니다.
마찬가지로 메시지 필드는 실패한 요청시 오류 메시지를 설정하는 데 사용됩니다.

export interface IResponse<T> { 
    status: 'success' | 'fail'; 
    data?: T; 
    message?: string; 
} 

서버에서 일부 회사 데이터를 가져 오는 다음과 같은 기능이 있다고 가정합니다.
응답에 데이터 또는 문자열이 포함되어 있습니다. 다음과 같이 내가이 함수를 호출 할 때

search(keyword: string): Observable<IResponse<ICompany[]|string>> { 
    return this.searchCompany(keyword); 
} 

는, 나도 ICompany [] 또는 문자열 수 데이터 같은 컴파일 오류가 발생합니다.

this.dataImportService.search('') 
     .subscribe(
     data => { 
     data.data[0].company_name // compile error 
     }, err => { 
     }); 

이 컴파일 오류를 제거하려면 어떻게해야합니까?

Answer 1

TypeScript 컴파일러는 data.data과 같이 중첩 된 속성으로 작업하는 데 약간의 문제가 있습니다. 트릭은 임시 변수 const data = data.data을 사용하는 것입니다. 그런 다음 TypeScript 컴파일러가 예상대로 작동합니다. typeof data === ...type guard이 작동합니다. 즉, 유니온 유형 ICompany[] | string은 if (typeof data === ...) 블록 내에서 ICompany[] 또는 string으로 좁힐 수 있습니다.

dataresponse에 이름 바꾸기 (덜 혼란으로), 우리는이 :

this.dataImportService.search('').subscribe(response => { 
    const data = response.data; // inferred type: ICompany[]|string 
    if (typeof data !== 'string' && data.length) { 
     const firstCompany = data[0]; // inferred type: ICompany 
     firstCompany.company_name; // OK 
    } 
}); 

Live in the TypeScript Playground

Answer 2

컴파일 오류를 제거하려면 >을 사용하여 유형 검사를 피할 수 있습니다.

this.dataImportService.search('') 
     .subscribe(
     (data: any) => { // <- here 
     data.data[0].company_name // compile error 
     }, err => { 
}); 

하지만 정말로 그렇게해서는 안됩니다. Typescript는 검색 방법이 문자열을 반환하면 오류가 발생하거나 예기치 않은 동작이 발생한다고 경고합니다.

검색 결과 'hoho or whatever'가 표시되면 data.data는 'hoho 또는 무엇이든간에'data.data [0] = 'h'; data.data [0] .company_name은 정의되지 않습니다.