서버에서 받은 데이터가 undefined로 타입 유추되는 값을 props로 내려줄 때 어떤 식으로 타입 단언 하시나요?

Question

혹시 타입스크립트에서 props로 서버에서 받은 데이터나 혹은 비동기로 인해서 undefined로 타입이 유추될지도 모르는 값을 props로 내려줄때는 여러분들은 어떤식으로 props에서 타입 단언하나요?

예를 들자면,  Type { data: customeType[] | undefined; } is not assignable to type to type IntrinsicAttributes & customeType[]. 
Undefined 없도록 단언 시켜줘야 하는데 어떻게 하시나요?

서버 통신이 오는거라 어쩔수 없이 Undefined 될 경우도 있어서.. 정녕 간단하게 props에서 해줄방법은 없을까요? ㅠ 저 문제 때문에 매번 interface를 만들어줘야되서 고통스럽네요 ㅠㅠ

최경훈 · Answer

undefined 가 어쩔 수 없이 생길수도 있다면 props에도 어쩔 수 없으니 | undefined 선언해줄것 같습니다.

김형준 · Answer

중간 단계 (보통 API 계층 혹은 React Query 계층) 에서 undefined 값 처리 Flow와 정상값 처리 Flow를 나눠서 처리합니다.
타입 선언은 Optional  { data?: customeType[] }  하게 처리하고요. Undefined를 그대로 내려줄 경우 하위 로직에서 값을 잘못 사용해서 오류가 발생하는 케이스도 있고 해서 undefined인 상태의 값이 활동하는 코드 범위를 최소화하는 방향으로 작업하는 것 같아요.