[10-1] 엄격한 타입스크립트 strict
[10-2] 유틸리티 타입
[10-3] API 응답 데이터의 타입은 어떻게 할까?
[10-4] graphql-codegen 설치
[10-5] graphql에 codegen 적용해보기
strict
를 true로 두게되면 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부분 ); };
📂 타입으로 뭘 받아오는 지 잘 모를 때
💡 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 타입만 지정
rest-api
: 타입스크립트를 적용하게 되면 어느정도 일일히 손으로 만들어 줘야되는 부분이 많다.
graphql
: 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
위치에 자동으로 만들어 준다.
📝 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)} })