TypeScript에서 배열이 비어 있는지 확인하는 방법

TypeScript에서 JSON 응답을 처리할 때 변수가 배열이고 비어 있지 않은지 어떻게 안전하게 확인합니까?

API에서 응답을 받았다고 가정해 보겠습니다(이 예에서는 Kontent API).

const blogPosts: BlogPost[] = (await deliveryClient
  .items<BlogPost>()
  .type("blog_post")
  .toPromise())?.data?.items

응답은 BlogPost 개체의 배열이 될 것으로 예상합니다. 또한 응답을 풀고 필요한 데이터만 선택할 수 있는 ?. 표기법에 유의하십시오. 응답에 예상 형식이 없으면 null 오류 대신 undefined가 표시됩니다.

따라서 먼저 응답이 정의된 배열인지 확인해야 합니다.

if (!Array.isArray(blogPosts)) {
  throw new Error("Response has a wrong format")
}

Array.isArray 함수는 가능한 모든 값을 포착합니다.

// all these calls return false
Array.isArray(undefined)
Array.isArray(null)
Array.isArray({})

// DON'T DO THIS
// as there is no need for checking the variable separately
if (blogPosts && Array.isArray(blogPosts)) { }

// DO THIS
// Array.isArray() is doing the null and
// undefined check automatically
if (Array.isArray(blogPosts)){ }

참고: 자세한 내용은 MDN Web Docs을 확인하십시오.

그런 다음 .length 속성을 통해 배열에 항목이 포함되어 있는지 확인합니다.

if (blogPosts.length == 0) {
  throw new Error("Response contains no items")
}

그리고 그게 다야. 💪

전체 코드는 다음과 같습니다.

const blogPosts: BlogPost[] = (await deliveryClient
  .items<BlogPost>()
  .type("blog_post")
  .toPromise())?.data?.items

if (!Array.isArray(blogPosts) || blogPosts.length == 0){
  throw new Error("No data")
}

// all good here
console.log(blogPosts)

try/catch 블록에 코드를 래핑하여 네트워크 통신 오류도 포착할 수 있습니다.

Kontent 데이터를 처리하는 데 도움이 필요한 경우 join our Discord ! 😎