dev.jung

TypeScript Utility Types 실무 기준: Partial, Pick, Omit, Record 제대로 쓰기

TypeScript를 쓰다 보면 Partial, Pick, Omit, Record 같은 유틸리티 타입을 자주 만나게 됩니다. 처음에는 “기존 타입을 재사용해서 코드를 줄이는 문법”처럼 보이지만, 실무에서는 그보다 더 중요한 역할을 합니다.바로 API 요청값, 폼 입력값, 서버가 관리하는 필드처럼 데이터가 오가는 경계를 안전하게 나누는 일입니다. 타입을 어떻게 설계하느냐에 따라 클라이언트가 보내면 안 되는 값이 자연스럽게 막히기도 하고, 반대로 의도치 않게 허용되기도 합니다.TypeScript Utility Types가 중요한 이유유틸리티 타입은 기존 타입을 바탕으로 새로운 타입을 만드는 도구입니다. 다만 실무에서는 단순히 중복을 줄이는 데서 끝나지 않습니다. 어떤 필드를 외부 입력으로 받을지, 어떤 필드..

TypeScript keyof와 T[K], 매핑 타입 한 번에 이해하기

TypeScript를 쓰다 보면 keyof, T[K], [P in K] 같은 문법을 자주 만나게 됩니다. 처음에는 각각 따로 외워야 하는 문법처럼 보이지만, 실제로는 하나의 흐름으로 연결되어 있습니다.핵심은 간단합니다. 객체 타입에서 키를 타입으로 꺼내고, 그 키에 해당하는 값의 타입을 다시 조회한 뒤, 필요한 형태의 새 객체 타입을 만드는 것입니다.keyof는 객체 타입의 키를 유니온으로 만든다먼저 keyof T는 객체 타입 T가 가진 키들을 유니온 타입으로 만들어줍니다.type User = { id: number; name: string; email: string; isAdmin: boolean;};type UserKey = keyof User;// "id" | "name" | "email" ..

TypeScript assertion function 쉽게 이해하기

TypeScript로 코드를 작성하다 보면 외부에서 들어온 값을 내부 타입으로 안전하게 바꿔야 하는 순간이 자주 생깁니다. API 응답, localStorage, URL query, form 입력값처럼 애플리케이션 바깥에서 들어오는 데이터는 처음부터 믿기 어렵습니다.이럴 때 자주 쓰는 방식이 타입 가드입니다. 그런데 TypeScript에는 타입 가드와 비슷해 보이지만 사용 방식이 다른 assertion function도 있습니다. 대표적인 형태가 바로 asserts value is User입니다.이번 글에서는 value is User와 asserts value is User의 차이를 사용부 기준으로 정리해보겠습니다.value is User는 타입 가드다먼저 value is User를 반환하는 함수는 사용..

TypeScript 타입 가드: boolean과 type predicate 차이

TypeScript를 쓰다 보면 unknown 타입의 값을 다뤄야 할 때가 있습니다. API 응답, 외부 JSON, 사용자 입력처럼 아직 믿을 수 없는 값이 대표적입니다.이때 필요한 것이 타입 가드(Type Guard)입니다. 타입 가드는 런타임에서 값을 검사하고, 그 결과를 TypeScript의 타입 좁히기와 연결해 주는 방식입니다.다만 중요한 차이가 있습니다. 단순히 boolean을 반환하는 함수는 타입을 좁혀주지 않습니다. 타입을 좁히려면 반환 타입에 value is SomeType 형태의 type predicate를 써야 합니다.TypeScript는 조건문 안에서 타입을 좁힌다TypeScript는 typeof, instanceof, in, 동등 비교 같은 조건을 보고 타입을 좁혀줍니다.functi..

TypeScript never로 분기 누락 잡기: exhaustive checking

프론트엔드 코드를 작성하다 보면 상태에 따라 다른 화면이나 문구를 보여줘야 하는 경우가 많습니다. API 요청 상태만 봐도 idle, loading, success, error처럼 여러 갈래로 나뉩니다.처음에는 네 가지 상태만 있으면 충분해 보이지만, 시간이 지나면서 empty, retrying, unauthorized 같은 상태가 추가될 수 있습니다. 문제는 새 상태가 추가됐는데 기존 switch 문이 그 상태를 빠뜨려도 코드가 조용히 동작할 수 있다는 점입니다.이때 TypeScript의 never 타입을 활용한 exhaustive checking을 적용하면 분기 누락을 컴파일 단계에서 잡을 수 있습니다.fallback 문자열은 버그를 숨길 수 있다분기 처리를 할 때 흔히 다음처럼 default에서 f..