Index
readOnly, early-exit
타입스크립트 심화
utility type & graphql - codegen
https://velog.io/@creyon0215/2023.-3.-23 (이어서)
Intro
readOnly? defaultValue와 같은 초기값이나 쓰기가 안되고 읽기밖에 안됨(readOnly={true})일 때
early-exit? 함수 실행 도중 return 을 만나면 함수가 종료된다. 원래 함수 안에 더 많은 코드를 작성해야 할 것을 반대 경우를 상정해 if(비밀번호가 없을 경우){return;을 통해 함수를 종료하여 함수를 도중에 멈추고 아래 부분을 실행하지 않는 것}
function qqq(){
console.log('hi')
return 333;
console.log('hello')
}
// hi 정상 출력, 333 반환 후 중지타입스크립트 심화
타입스크립트 또한 container-presenter 폴더를 통해 분할하여 저장할 수 있다. props의 경우 명확하게 하기 위해 export default function 뒤의 함수 이름을 사용해 I함수이름Props의 형태로 이름을 저장한다.
//ChangeEvent라는 메소드 사용을 위해서는 import해주어야한다.
import {ChangeEvent} from 'react'
export interface IBoardWriteUIProps {
onClickSubmit: () => void; //함수 넘겨줄 때 return 없는 것: void
onClickUpdate: () => void;
onChangeWriter: (event: ChangeEvent<HTMLInputElement>) => void;
onChangeTitle: (event: ChangeEvent<HTMLInputElement>) => void;
onChangeContents: (event: ChangeEvent<HTMLInputElement>) => void;
isEdit: boolean;
data?: any;
} //예시API응답 데이터의 타입
rest-api는 타입스크립트 적용시 손으로 만들어 주어야 하는 부분이 많은 반면
graphql의 경우, graphql-codegen 이용해 명령어 하나로 만들어 줌
graphql codegen
utility type?
기존에 있는 타입을 조작하는 것
ex. 프로필이라는 타입이 있을 때 비슷한 타입이 있는데 형식이 비슷한데 두 번 만들어야 할까? 조작해야할까? ;조작해야지
utility type의 종류
1.Partial 타입
객체의 키 전체를 있어도 되고 없어도 되는 key로 만들어준다. (?)
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 타입(+Union타입)
Union타입이란 그 타입의 프로퍼티로 지정해준 요소들밖에 쓸 수 없는 타입이다.
type eee = "철수" | "영희" | "훈이"; //Union 타입
const child1:eee = "철수" //철수 영희 훈이만 들어갈 수 다.6.객체의 key들로 Union타입 만들기(keyof)
type fff = keyof IProfile // IProfile의 키들만 넣을 수 있음
let MyProfile: ggg = "" //여기에 type VS interface
선언 병합이 되느냐 안되느냐에서 차이가 생김(type은 안됨) 선언 병합이란? 기존에 선언해 둔 IProfile이 있다면 거기 없는 키값과 밸류값을 다시 선언하면 그게 기존에 선언해둔 IProfile에 키, 밸류가 추가되는 것
mutation에 적용
variables로 뭘 보내주고 응답으로 뭘 받을지 잘 몰라서 data 받아올 때 any. codegen 사용하면서 graphql타입 모두 다운받아 와서 맞는 것 뽑아 적어주면 됨
query에 적용
오류 대처
