TypeScript as const 이게 뭘까
·
FrontEnd/TypeScript
타입스크립트는 값을 보고 타입을 추론한다문제는, 우리가 "이 값은 고정값"이라고 생각해도 타입스크립트가 그렇게 봐주지 않을 때가 있다는 것그래서 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를 더 넓게(예: ..
TypeScript 유틸리티 타입 Partial<T> – 부분만 채워도 되는 타입 만들기
·
FrontEnd/TypeScript
이번에는 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만 있어..
TypeScript 유틸리티 타입 Omit<T, K> – 필요 없는 필드만 쏙 빼고 쓰기
·
FrontEnd/TypeScript
이번에는 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 = { ..
TypeScript 유틸리티 타입 Pick<T, K> – 객체 타입에서 필요한 것만 뽑아 쓰기
·
FrontEnd/TypeScript
코드 짜다 보면 이런 생각이 한 번씩 든다."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..