타입스크립트에서 keyof 연산자는 객체 타입을 받아 해당 객체의 키값을 string 또는 number 의 리터럴 유니온 타입을 반환한다.interface ColorType { red: string; green: string; blue: string;}type ColorKeyType = keyof ColorType; // 'red' | 'green' | 'blue'타입스크립트에서 typeof 연산자는 변수 혹은 속성의 타입을 추론하는 역할을 한다.const colors = { red: '#F45452', green: '#0C952A', blue: '#1A7CFF',};type ColorsType = typeof colors;/**type ColorsType = { red: string; g..
NonNullable을 활용한 타입 가드NonNullable 은 타입스크립트에서 제공하는 유틸리티 타입으로 제네릭으로 받는 T가 null 또는 undefined 일 때 never 를 반환하는 타입이다.type NonNullable = T extends null | undefined ? never : T;null을 가질 수 있는(Nullable) 값의 null 처리는 자주 사용되는 타입 가드 패턴의 하나이다. 일반적으로 if문을 사용해서 null 처리 타입 가드를 적용하지만, is 키워드와 NonNullable 타입으로 타입 검사를 위한 유틸 함수를 만들어서 사용할 수 있다.매개변수 value가 null이나 undefined가 아니라면 타입이 좁혀진다.function NonNullable(value: T)..
유틸리티 타입을 활용하여 타입 중복 선언 제거Props 타입과 styled-components 타입은 똑같은 타입으로 두 타입을 각각 선언하면 중복된 코드가 생긴다. 그리고 타입이 변경되면 두 타입을 모두 변경해줘야 하는 번거러움이 발생한다.유틸리티 타입인 Pick 을 활용하면 중복된 코드를 작성하지 않아도 되고 유지보수를 더욱 편리하게 할 수 있다. 이외에도 상속받는 컴포넌트 혹은 부모 컴포넌트에서 자식 컴포넌트로 넘겨주는 props 등에도 활용할 수 있다.// 컴포넌트export type Props = { height?: string; color?: string; isFull?: boolean; className?: string;};const Hr: FC = ({ height, color, i..
조건부 타입타입스크립트에서는 조건부 타입을 사용해 조건에 따라 출력 타입을 다르게 도출할 수 있다. 조건부 타입은 자바스크립트의 삼항 연산자와 동일하게 T extends U ? X : Y 형태를 가진다.조건부 타입을 활용하면 중복되는 타입 코드를 제거하고 상황에 따라 적절한 타입을 얻을 수 있기 때문에 더욱 정확한 타입 추론을 할 수 있게 된다.interface Bank { financialCode: string; companyName: string; name: string; fullName: string;}interface Card { financialCode: string; companyName: string; name: string; appCardType?: string;}// 일반적..
식별할 수 있는 유니온(Discriminated Unions)태그된 유니온으로도 불리는 식별할 수 있는 유니온은 타입 좁히기에 널리 사용되는 방식이다. 식별할 수 있는 유니온이란 타입 간의 구조 호환을 막기 위해 타입마다 구분할 수 있는 판별자를 달아 포함 관계를 제거하는 것이다.타입스크립트는 구조적 타입 시스템(덕 타이핑) 언어이기 때문에 객체로 이루어진 유니온 타입의 하위 타입에 대해 타입 에러를 발생시키지 않는다. 따라서 판별자를 통해 타입을 구분해야 한다.type TextError = { errorCode: string; errorMessage: string;}type ToastError = { errorCode: string; errorMessage: string; toastShowDu..
타입스크립트에서 타입 좁히기는 변수 또는 표현식의 타입 범위를 더 작은 범위로 좁혀나가는 과정을 말한다. 타입 좁히기를 통해 더 정확하고 명시적인 타입 추론을 할 수 있게 되고, 복잡한 타입을 작은 범위로 축소하여 타입 안전성을 높일 수 있다.타입 가드는 런타임에 조건문을 사용하여 타입을 검사하고 타입 범위를 좁혀주는 기능을 말한다.typeof 연산자로 원시 타입 추론typeof 는 자바스크립트 타입 시스템만 대응할 수 있다. 자바스크립트 동작 방식으로 인해 null 과 배열 타입 등이 object 타입으로 판별되는 등 복잡한 타입을 검증하기에는 한계가 있다. 따라서 typeof 연산자는 주로 원시 타입을 좁히는 용도로 사용하는게 좋다.string, number, boolean, undefined, ob..
