타입스크립트는 값을 보고 타입을 추론한다문제는, 우리가 "이 값은 고정값"이라고 생각해도 타입스크립트가 그렇게 봐주지 않을 때가 있다는 것그래서 as const가 필요해진다.1) 문제 직면 – 값은 'GET'인데 타입이 string이 된다예를 들어 메서드를 "GET" | "POST"로 제한하고 싶다고 해보자type Method = "GET" | "POST";function request(method: Method) {}그리고 요청 정보를 객체로 만들고 값을 꺼내서 넘기면,const req = { method: "GET" };request(req.method);이런 코드가 상황에 따라 타입 에러로 이어질 수 있다겉으로는 "GET"을 넘기는 것처럼 보여도, 타입스크립트가 req.method를 더 넓게(예: ..

이번에는 Partial를 정리해 본다앞에서Pick는 필요한 필드만 골라서 쓰는 타입Omit는 필요 없는 필드만 빼고 쓰는 타입이었다면,Partial는 한 줄로 이렇게 볼 수 있다."이 타입에 있는 모든 프로퍼티를 전부 optional로 바꿔 줘" 1. Partial 한 줄 정의Partial는타입 T에 있는 모든 프로퍼티를"있어도 되고, 없어도 되는" 상태로 만들어 주는 유틸리티 타입이다.type User = { id: number name: string email: string}type UserUpdate = Partial// 아래와 같은 구조로 인식된다// {// id?: number// name?: string// email?: string// } UserUpdate 타입은id만 있어..

이번에는 Pick의 반대 방향 느낌인 Omit를 정리해 본다Pick기존 타입에서 필요한 것만 골라서 새 타입 만들기Omit기존 타입에서 필요 없는 것만 빼고 새 타입 만들기현실에서 더 자주 떠오르는 건 오히려 Omit일 때도 많다.1. Omit를 한 줄로 설명하면Omit는타입 T에서 K에 해당하는 키들을 빼고나머지 프로퍼티로만 새로운 타입을 만드는 도구라고 보면 된다.2. 기본 사용법부터 보기type User = { id: number name: string email: string password: string isAdmin: boolean}// 비밀번호만 빼고 쓰고 싶을 때type UserWithoutPassword = Omitconst user: UserWithoutPassword = { ..

typeof→ 이미 존재하는 값의 모양을 그대로 타입으로 쓰고 싶을 때keyof→ 어떤 타입이 가진 속성 이름 목록이 필요할 때keyof typeof obj→ 이 객체에 실제로 존재하는 key 이름만 허용하고 싶을 때아래 예시들만 이해되면 실무에서 바로 써먹을 수 있다.1. typeof – 값에서 타입 뽑아 쓰기CONFIG 같은 설정 객체를 하나 만들어 놨는데,이 구조와 완전히 똑같은 타입이 필요하다const CONFIG = { retryCount: 3, timeoutMs: 5000, baseUrl: "https://api.example.com",}// CONFIG와 같은 모양의 타입 만들기type Config = typeof CONFIG Config는 아래와 같은 타입으로 인식된다type Conf..

코드 짜다 보면 이런 생각이 한 번씩 든다."User 타입 전체는 너무 크고""지금 이 화면에서는 name이랑 email만 있으면 되는데""타입을 새로 만들자니 귀찮고, any 쓰자니 찝찝하고"이럴 때 쓰는 게 Pick다.1. Pick를 한 줄로 설명하면Pick는어떤 객체 타입 T에서필요한 속성 이름 K만 골라서새로운 타입을 만드는 도구다. 생각보다 단순하다.2. 기본 사용법부터 보기먼저 예제로 감 잡고 나중에 정의를 보자.type User = { id: number name: string email: string isAdmin: boolean}// 프로필 화면에서 필요한 정보만type UserProfile = Pickconst profile: UserProfile = { id: 1, name..

Next.js로 검색 입력창에 디바운스를 붙이다가 setTimeout 타입에서 한 번 멈칫한 적이 있다.클라이언트 컴포넌트에서 디바운스 훅을 만들고 있었고그냥 setTimeout만 쓰다가 타입이 예상과 다르게 나왔고결국 window.setTimeout을 명시적으로 쓰는 쪽으로 정리했다결론부터브라우저 환경window.setTimeout() 또는 전역 setTimeout() 모두 number를 반환한다이 값은 "타이머 ID" 역할을 한다Node.js / 서버 환경setTimeout()이 NodeJS.Timeout 객체를 반환한다@types/node가 없으면 object 정도로 추론되는 경우도 있다실무에서 주의할 점클라이언트 전용 디바운스 로직이라면 window.setTimeout을 명시해서 number를 쓰..