TypeScript 유형 가드 및 유형 술어

Union 유형을 사용하면 여러 유형의 매개변수를 허용할 수 있습니다. x 또는 y 유형을 제공합니다. 때때로 이러한 유형은 100% 호환되지 않습니다. 그들은 같은 목표를 달성하지만 다른 속성을 가지고 있습니다. 나중 단계에서 정확한 유형을 기반으로 일부 코드를 실행할 수 있습니다. 여기에서 유형 가드와 유형 술어가 사용됩니다.

시작하기

몇 가지 유형을 선언하는 것으로 시작하겠습니다. 나는 무언가를 설명하려고 할 때 몇 가지 코드를 보는 것을 좋아합니다. 개념을 더 잘 이해하게 되네요.

블로그를 구축 중이고 단일 공용체를 형성하는 두 가지 유형이 있다고 가정합니다.

type Article = {
  frontMatter: Record<string, unknown>;
  content: string;
}

type NotFound = { 
  notFound: true;
}

type Page = Article | NotFound;

구체적인 유형은 Article 및 NotFound 이고 Page는 공용체입니다. 목표는 페이지를 렌더링하는 함수를 작성하는 것입니다. 블로그가 존재하는지 확인하는 요구 사항과 해당 notFound 함수를 호출할 때 필요한 사항에 대해서는 자세히 설명하지 않겠습니다. 하지만 단일 렌더링 함수가 있다고 가정해 보겠습니다. 데이터베이스의 내용을 기반으로 기사 또는 찾을 수 없는 페이지를 렌더링합니다. 다음과 같은 것:

function handleRequest(slug: string): string {
  const article = db.articles.findOne({ slug });
  const page = article ?? { notFound: true };
  return render(page);
}

우리가 다루고 있는 문제는 handleRequest가 Article 또는 NotFound 유형을 render 에 전달했는지 알아야 할 때입니다. JavaScript에서는 다음과 같이 사용합니다.

function render(page: Page) {
  if (page.content) {
    return page.content;
  }

  return '404 — not found';
}

그러나 TypeScript에서는 작동하지 않습니다. 속성content이 Page 유형에 존재하지 않는다는 오류가 발생합니다.

Property 'content' does not exist on type 'Page'.
  Property 'content' does not exist on type 'NotFound'.

이는 공용체의 모든 유형에 해당 속성이 포함되어 있지 않기 때문입니다. 이 문제를 해결하려면 유형 가드를 추가해야 합니다.

타입 가드

유형 가드는 현재 범위의 유형을 보장하는 런타임 검사를 수행하는 표현식입니다.

빠른 수정은 해당 page.content 검사를 TypeScript가 이해할 수 있는 것으로 바꾸는 것입니다.

function render(page: Page) {
  if ('content' in page) {
    return page.content;
  }

  return '404 — not found';
}

이것은 작동하지만 유지 보수 비용이 듭니다. TypeScript의 이점은 사용 중인 속성을 제거할 때 경고를 표시한다는 것입니다. 이 변경으로 인해 TypeScript는 예를 들어 content 속성의 이름을 body로 변경할 때 경고하지 않습니다. 또는 'content' 에서 오타를 만들 때.

이것이 유형 술어가 흥미로운 이유입니다.

유형 술어

유형 술어는 다음과 같은 함수의 반환 유형입니다.

function isArticle(page: Page): page is Article {
  return 'content' in page;
}

술어인 것은 전체 기능이 아닙니다. 술어는 page is Article 입니다. 또한 좋은 점은 'content' in page 이 컨텍스트에서 유형 가드가 아니라는 것입니다. 간단한 표현입니다. 유형 가드는 TypeScript가 유형을 좁히도록 하는 if 문입니다.

따라서 위의 기능은 이전 유형 가드와 매우 유사하게 보이며 동일한 유지 관리 문제가 있습니다. 하지만 이제 추출했으므로 해결할 수도 있습니다.

function isArticle(page: Page): page is Article {
  return typeof (page as Article).content !== 'undefined';
}

이것은 작동하며 Article 속성을 제거하고 content 속성을 제거하면 오류가 발생합니다.

형식 술어로 선언된 함수는 부울을 반환해야 합니다. 반환 값이 true 이면 TypeScript는 반환 형식이 형식 조건자에 선언된 형식이라고 가정합니다. 이 함수가 true를 반환하면 TypeScript는 제공된 인수page가 Article 유형이라고 가정합니다.

렌더 함수 내에서 이 메서드를 호출할 때:

function render(page: Page) {
  if (isArticle(page)) {
    return page.content;
  }

  return '404 — not found';
}

TypeScript는 if 범위 내에서 page.content가 page 유형이기 때문에 Article가 존재한다는 것을 알고 있습니다. if (isArticle(page)) 표현식은 유형 가드입니다.

if 문 다음에 page는 Article 유형이 아닙니다. 그리고 우리 공용체에는 2가지 유형만 있기 때문에 TypeScript는 해당 단계에서 유형이 NotFound여야 한다는 것도 알고 있습니다.


👋 저는 스테판이고 짓고 있어요 rake.red . 제 글을 더 읽고 싶으시면 저를 팔로우하세요.