TypeScript 및 GraphQL을 최대한 활용하기: 공용체 유형

This article was published on Tuesday, October 18, 2022 by @ The Guild Blog

소개

TypeScript와 GraphQL의 조합은 매우 강력할 수 있습니다. TypeScript와 GraphQL은 모두 식별된 공용체의 개념을 지원합니다.
이 짧은 블로그 게시물에서는 마지막 프로젝트 경험을 공유하고 TypeScript 및 GraphQL을 사용하여 더 강력한 유형을 만드는 가장 강력한 방법 중 하나를 공유하고자 합니다.

이 블로그 게시물의 가정 중 하나는 TypeScript를 알고 있다는 것입니다. 그렇지 않은 경우 "Basic Types" 핸드북을 확인할 수 있습니다.
이제 이 언어의 가장 놀라운 기능 중 하나인 TypeScript 공용체 유형에 대해 조금 이야기해 봅시다.

TypeScript에서 공용체 유형이란 무엇입니까?

따라서 TypeScript 언어는 유형 시스템을 기반으로 합니다.
TypeScript 통합 연산자는 정수 또는 숫자, 문자, 문자열, 부동 등 여러 데이터 유형을 보유할 수 있는 변수를 정의하는 데 사용할 수 있습니다.

여기에서 기본적인 예를 찾을 수 있습니다.

let pizzaLover: string | boolean // pizzaLover can be a string or boolean type

pizzaLover = 'YES' // string type
pizzaLover = true // boolean type

Here's a live example in TS Playground

TypeScript에서 공용체 유형을 사용하는 방법

TypeScript는 인터페이스와 같은 복잡한 유형을 결합하는 데에도 사용할 수 있습니다.
다른 유형을 포함하는 하나의 유형에 대해 생각할 수 있습니다. 다음은 Sushi 및 Pizza 2가지 유형을 결합한 간단한 예입니다. 둘 다 Food라는 이름으로 하나의 유형으로 통합할 수 있습니다.

type Sushi = {
  kind: 'Sushi'
  fish: string
  amount: number
}

type Pizza = {
  kind: 'Pizza'
  topping: string
  amount: number
}

type Food = Sushi | Pizza

Here's a live example in TS Playground

그리고 이번에는 string 및 string가 포함된 또 다른 Union 유형의 예입니다.

type PizzaAddons = 'olives' | 'mushrooms' | 'pepperoni'

const myPreference: PizzaAddons = 'olives' // ok
const myPreference: PizzaAddons = 'pineapple' // error

Here's a live example in TS Playground

GraphQL 유니온 및 TypeScript 유니온 유형

GraphQL은 서버의 API를 정의하는 데 사용되는 쿼리 언어입니다. TypeScript 또는 Go 언어와 마찬가지로 GraphQL은 공용체 및 인터페이스 유형을 지원합니다. 유형 시스템은 핵심 원칙 중 하나이며 이를 사용하여 유형에 안전한 API 호출을 할 수 있습니다. 목표는 이를 사용하여 백엔드 유형을 프런트엔드로 전파하는 것입니다.
TypeScript를 배우기 시작했을 때 많은 유형 오류와 성가신 맞춤법 오류를 발견했습니다. 이러한 오류는 프로젝트가 성장함에 따라 더 자주 발생했습니다.
해당 상황에 대한 최상의 솔루션은 GraphQL 스키마를 기반으로 유형 안전성을 추가하는 것이었습니다.

GraphQL 스키마는 Union 또는 Interface 키워드 덕분에 여러 개체 유형 중 하나를 반환할 수 있습니다. TypeScript와 마찬가지로 유니온에 포함된 객체 유형을 선언할 수 있습니다.

union Menu = Pizza | Sushi

Menu 또는 Pizza를 반환할 수 있는 Sushi 공용체 유형을 정의하는 기본 예제 스키마를 살펴보겠습니다.

union Menu = Pizza | Sushi

type Pizza {
  title: String!
  topping: String
}

type Sushi {
  name: String!
  fish: String
}

type Query {
  menu: [Menu!]
}

GraphQL에서 유형을 선언하고 다른 유형 중 일부를 반환하는 공용체 유형을 생성한 후 GraphQL 스키마에서 TypeScript 유형을 생성하고 프런트엔드에서 사용할 수 있습니다.

GraphQL Codegen을 사용하여 코드를 생성하고 TypeScript 통합 유형을 처리하는 방법

우선, GraphQL Codegen의 모든 플러그인을 탐색하는 것을 환영합니다. GraphQL Code Generator
앞의 예에서 했던 것처럼 데이터를 앞쪽에 안전하게 입력하는 방법에 대해 이야기해 봅시다.

먼저 다음과 같이 GetFullMenu 쿼리를 생성해 보겠습니다.

(이 경우 react-query 예를 사용하겠습니다)

const menuQuery = gql`
  query GetFullMenu {
    menu {
      ...Sushi
      ...Pizza
    }
  }
  fragment SomeSushi on Sushi {
    name
    fish
  }
  fragment SomePizza on Pizza {
    title
    topping
  }
`

쿼리를 사용하여 스키마에서 Menu 유형을 가져오므로 Menu 내부의 개체를 가져올 수 있습니다.

const Menu = () => {
  const { data } = useQuery<MenuQuery>('menu', async () => {
    const { menu } = await request(endpoint, menuQuery)
    return menu
  })
}

결론

이 블로그 게시물이 TypeScript 공용체 및 GraphQL 공용체와 프로젝트에서 사용하는 방법을 더 잘 이해하는 데 도움이 되었기를 바랍니다.

TypeScript와 GraphQL 모두에서 Union 및 Interface 유형을 생성할 수 있으므로 서버의 API를 더 잘 정의하고 클라이언트에서 사용할 수 있습니다.

정적 유형 검사는 응용 프로그램을 보호하는 데 도움이 될 수 있습니다. 특히 대규모 응용 프로그램에서.

유형이 안전한 GraphQL을 사용하면 맞춤법 오류 및 오류와 같은 기존 오류를 제거하는 데 도움이 됩니다.

이 짧은 블로그 게시물에서는 코드 타임에 도움이 되는 TypeScript의 몇 가지 기능을 살펴보았습니다. 대부분은 생성한 함수의 출력을 이해하는 데 도움이 됩니다.