✍🏻 [Code Camp_TIL] 10일차: 타입스크립트 유틸리티 타입, API 응답 데이터 타입

유틸리티 타입

기존 타입을 조작해서 필요한 타입만 따로 빼두거나, 필요없는 타입만 제거하는 것을 의미한다. 많이 사용되는 유틸리티 타입의 기능들은 다음과 같다.

export interface IProfile {
  name: string;
  age: number;
  school: string;
  hobby?: string;
}

  
// 1. Partial 타입: 전체 물음표 붙여주기

type aaa = Partial<IProfile>;


// 2. Required 타입: 전체 물음표 삭제

type bbb = Required<IProfile>;


// 3. Pick 타입: 특정 값 고르기

type ccc = Pick<IProfile, "name" | "age">;


// 4. Omit 타입: 특정 값 빼기

type ddd = Omit<IProfile, "school">;


// 5. Record 타입: 개별 record에 내가 원하는 것 지정.

type eee = "철수" | "영희" | "훈이"; 
  // Union 타입: string 타입보다 더 엄격함.
let child1: eee = "철수"; 
  // 철수, 영희, 훈이만 됨.
let child2: string = "사과"; 
  // 철수, 영희, 훈이, 사과, 바나나 등등 다 됨.
type fff = Record<eee, IProfile>; 
// 철수, 영희, 훈이에 각각 IProfile 맵핑


// 6. 객체의 key들로 Union 타입 만들기

type ggg = keyof IProfile; 
  // "name" | "age" | "school" | "hobby" 만들어짐.
let myprofile: ggg = "hobby";

// 7. type vs interface 차이  =>  interface는 선언병합 가능(두 개의 인터페이스 합체 가능)
export interface IProfile {
  candy: number; // 선언병합으로 추가됨.
}

// 8. 배운 것 응용
let profile: Partial<IProfile> = {
  candy: 10,
};

API 응답 데이터 타입

rest-api는 타입스크립트를 적용하면 일일이 손으로 만들어 줘야 하는 부분이 많다. graphql-api 같은 경우 graphql-codegen을 이용해 명령어 하나로 만들어준다. 따라서 굉장히 간편하게 만들 수 있다.

graphql-codegen

graphql-codegen 설치

graphql-codegen을 설치해주고(yarn으로 설치해줌), yml 파일을 만들어서 설정을 해줬다. 이후에 터미널 명령어로 codegen을 실행시키면 yml 파일에서 설정해뒀던 schema의 주소로 들어가 api들의 타입을 쭉 다운받아온다.

설치와 설정을 완료하고, yarn generate 명령을 실행하면, 백엔드 컴퓨터에 접속해서 graphql-api로 받아오는 모든 데이터의 타입을 빠르게 조사하고, 이와 일치하는 타입스크립트 파일을 자동으로 만들어준다.

mutation에 타입스크립트 적용

아래의 형식으로 적용시킬 수 있다.

const [함수] = useMutation<결과타입,변수타입>(쿼리);

다운받아온 타입 중에 맞는 것을 뽑아 적어주면 된다.

// types.ts 파일에서 다운로드된 타입들 중 해당 타입을 import해와야 함
import {
  IMutation,
  IMutationCreateBoardArgs,
} from "../../../src/commons/types/generated/types";

// <>를 이용해서 타입을 지정
// 타입파일에서 IMutation 중 createBoard를 pick, IMutationCreateBoardArgs를 import
export default function GraphqlMutationPage() {
  const [나의함수] = useMutation<
    Pick<IMutation, "createBoard">,
    IMutationCreateBoardArgs
  >(나의그래프큐엘셋팅)

query에 타입스크립트 적용

query에 타입스크립트를 적용하는 방법도 mutation과 크게 다르지 않다.

import {
  IQuery,
  IQueryFetchBoardArgs,
} from "../../../src/commons/types/generated/types";

const { data } = useQuery<Pick<IQuery,"fetchBoard">,IQueryFetchBoardArgs>(FETCH_BOARD,{
		variables: {number: Number(router.query.mynumber)}
	})

오늘은 유틸리티 타입과 graphql api의 타입을 지정하는 방법을 공부했다. 타입스크립트를 쓰기 시작하면서, 변수의 타입을 일일이 지정해주는 게 번거롭긴 하지만, 나중에 발생할 수 있는 에러를 고려하면 꼭 필요한 것 같다. 지금까지 만들어놓은 js 파일을 ts/tsx로 바꿔보면서 타입스크립트를 쓰는 연습을 해야겠다!

---