[TIL] API 응답 데이터 타입스크립트

우기·2023년 3월 25일
0
post-thumbnail

📒 오늘 공부한 내용

🔍수업목차

[10-1] 엄격한 타입스크립트 strict
[10-2] 유틸리티 타입
[10-3] API 응답 데이터의 타입은 어떻게 할까?
[10-4] graphql-codegen 설치
[10-5] graphql에 codegen 적용해보기

✅ 엄격한 타입스크립트 strict


  • stricttrue로 두게되면 props쪽에서 빨간줄이 그이는 것을 볼 수 있다.

  • interface로 props의 타입을 지정해주어야 한다.

  • props에서는 주는 입장과 받는 입장이 있다. 타입스크립트는 받는 입장에서 타입을 지정해주어야 한다.

props를 주는 쪽 컴포넌트

const add = (a: number, b: number) => {
  return a + b;
};
return (

props를 받는 쪽 컴포넌트

interface IProps {
  add: (a: number, b: number) => number;
}

const Component2 = (props: IProps) => {
  props.add(1, 2);
  return (
    //컴포넌트의 JSX부분
  );
};

📂 타입으로 뭘 받아오는 지 잘 모를 때

  • 외부와 통신해서 받아오는 api같은 데이터는 무엇을 받아오는지 모를 수 있다.
  • 그럴 때는 일단 타입에 any를 주고 넘어간다.
  • any는 모든 타입을 말한다.

💡 any는 임시 지정이다. 이후 타입을 하나하나 지정해줘야 된다.

💡 이벤트 핸들러 함수의 파라미터(event) 타입 지정

onChange함수의 파라미터 타입을 지정해 줄 때 ChangeEvent를 사용할 수 있다.

// HTML 태그는 이벤트 핸들러 함수가 적용되 함수가 뭔지에 따라 다르게 적는다.
t<HTML inputelement>)=>{
			setMywriter(event.target.value)
	}

ChangeEvent는 리액트에서 제공해주는 타입이다. 따라서 import를 해서 사용해야 된다.

✅ 유틸리티 타입


  • 유틸리티 타입이란 내가 원하는 타입을 조작해서
    필요한 타입만 따로 빼두거나, 필요없는 타입만 제거하는 타입을 의미한다.

📝 Partial 타입

모든 요소를 옵셔널로 지정한 타입을 새로 생성할 수 있다.

type userType = {
  id: number;
  email: string;
  password: string;
  firstname: string;
  lastname: string;
};

const user: Partial<userType> = {
  id: "kimchanmin1";
  // password: "12345",
  email: "kimchanmin1@gmail.com";
  firstname: "찬민";
  lastname: "김";
}

📝 Pick 타입

특정 요소만 포함된 타입을 생성한다.

type userType = {
  id: number;
  email: string;
  password: string;
  firstname: string;
  lastname: string;
};

const user: Pick<userType, "id" | "firstname" | "lastname"> = {
  id: "kimchanmin1";
  firstname: "찬민";
  lastname: "김";
}

📝 Omit 타입

Type의 모든 프로퍼티를 선택한 다음 Keys를 제거한 타입을 구성

interface UserInfo {
    name: string;
    age: number;
    gender: string;
}

type GenderPrivate = Omit<UserInfo, "gender">;

const user: GenderPrivate = {
    name: "Jongmin",
    age: 26,
};

📝 Union Type 타입

원하는 타입을 직접 지정할 수 있다.

type union = "school" | "name"
// school과 name 타입만 지정

✅ API 응답 데이터의 타입은 어떻게 할까?


rest-api : 타입스크립트를 적용하게 되면 어느정도 일일히 손으로 만들어 줘야되는 부분이 많다.

graphql : graphql-codegen을 이용해 명령어 하나로 만들어준다.

✅ graphql-codegen 설치


1️⃣ graphql-code-generator 홈페이지 -- Try It Now 를 클릭 -- 좌측 메뉴의 Installation을 클릭

2️⃣ 명령어를 복사후 class 폴더의 위치에서 붙여넣어기

yarn add -D @graphql-codegen/cli

yarn add -D @graphql-codegen/typescript

yarn add ts-node

3️⃣ class 폴더에 codegen.yaml 파일을 만들기

4️⃣ codegen.yaml 아래 코드 입력 ( 들여쓰기가 중요한 파일 )

schema: http://backend-example.codebootcamp.co.kr/graphql
generates:
  ./src/commons/types/generated/types.ts:
    plugins:
      - typescript
    config:
      typesPrefix: I

5️⃣ package.json 파일에 아래 코드를 추가 후 저장

6️⃣ 설치가 완료되었다면, yarn generate 명령을 실행하면, Backend 컴퓨터에 접속해서 Graphql-API로 받아오는 모든 데이터의 타입을 빠르게 조사하고, 이와 일치하는 타입스크립트 파일을
./src/commons/types/generated/types.ts 위치에 자동으로 만들어 준다.

✅ graphql에 codegen 적용해보기


📝 mutation에 타입스크립트 적용

codegen을 사용하면서 graphql의 타입을 모두 다운 받아 왔다.
이제는 다운 받아온 타입중에 맞는 것을 뽑아 적어주시면 된다.

const onClickUpload = async () => {
		const result = await createBoard(CREARTE_BOARD);
		console.log(result.data?.createBoard?.message);
	}

📝 mutation에 타입스크립트 적용

// 결과타입과 변수타입은 types.ts 파일에서 import해서 데리고 오시면 됩니다.
const { data } = useQuery<Pick<IQuery,"fetchBoard">,IQueryFetchBoardArgs>(FETCH_BOARD,{
		variables: {number: Number(router.query.mynumber)}
	})
profile
개발 블로그

0개의 댓글