[TS] 식별할 수 있는 유니온, Exhaustiveness Checking

식별할 수 있는 유니온(Discriminated Unions)태그된 유니온으로도 불리는 식별할 수 있는 유니온은 타입 좁히기에 널리 사용되는 방식이다. 식별할 수 있는 유니온이란 타입 간의 구조 호환을 막기 위해 타입마다 구분할 수 있는 판별자를 달아 포함 관계를 제거하는 것이다.타입스크립트는 구조적 타입 시스템(덕 타이핑) 언어이기 때문에 객체로 이루어진 유니온 타입의 하위 타입에 대해 타입 에러를 발생시키지 않는다. 따라서 판별자를 통해 타입을 구분해야 한다.type TextError = { errorCode: string; errorMessage: string;}type ToastError = { errorCode: string; errorMessage: string; toastShowDu..

• format_list_bulleted TypeScript
• · 2025. 1. 25.
• textsms

[TS] 타입 가드

타입스크립트에서 타입 좁히기는 변수 또는 표현식의 타입 범위를 더 작은 범위로 좁혀나가는 과정을 말한다. 타입 좁히기를 통해 더 정확하고 명시적인 타입 추론을 할 수 있게 되고, 복잡한 타입을 작은 범위로 축소하여 타입 안전성을 높일 수 있다.타입 가드는 런타임에 조건문을 사용하여 타입을 검사하고 타입 범위를 좁혀주는 기능을 말한다.typeof 연산자로 원시 타입 추론typeof 는 자바스크립트 타입 시스템만 대응할 수 있다. 자바스크립트 동작 방식으로 인해 null 과 배열 타입 등이 object 타입으로 판별되는 등 복잡한 타입을 검증하기에는 한계가 있다. 따라서 typeof 연산자는 주로 원시 타입을 좁히는 용도로 사용하는게 좋다.string, number, boolean, undefined, ob..

• format_list_bulleted TypeScript
• · 2025. 1. 24.
• textsms

[TS] 타입 확장하기

타입 확장은 기존 타입을 사용해서 새로운 타입을 정의하는 것을 말한다. 기본적으로 타입스크립트에서는 interface 와 type 키워드를 사용해서 타입을 정의하고 extends , 교차 타입, 유니온 타입을 사용하여 타입을 확장한다.타입을 확장하면 중복된 코드를 줄일 수 있고 더 명시적인 코드를 작성할 수 있다.type BaseMenuItem = { itemName: string | null; itemImageUrl: string | null; itemAmount: number; stock: number | null;}type BaseCartItem = { quantity: number;} & BaseMenuItem;요구 사항이 늘어날 때마다 타입을 확장하여 새로운 타입을 정의할 수 있다. 예..

• format_list_bulleted TypeScript
• · 2025. 1. 23.
• textsms

[TS] 제네릭 사용법

제네릭은 일반화된 데이터 타입으로 함수나 클래스 등의 내부에서 제네릭은 어떤 타입이든 될 수 있다.함수의 제네릭어떤 함수의 매개변수나 반환 값에 다양한 타입을 넣고 싶을 때 제네릭을 사용할 수 있다.function fn(arg: T): T { return arg;}호출 시그니처의 제네릭호출 시그니처는 타입스크립트의 함수 타입 문법으로 함수의 매개변수와 반환 타입을 미리 선언하는 것을 말한다. 타입 시그니처라고도 한다.호출 시그니처를 사용할 때 제네릭 타입을 어디에 위치시키는지에 따라 타입의 범위와 제네릭 타입을 언제 구체 타입으로 한정할지 결정할 수 있다.// foo를 사용할 때 타입을 명시함으로써 제네릭 타입을 구체 타입으로 한정interface foo { fn: (arg: T) => T;}// F..

• format_list_bulleted TypeScript
• · 2025. 1. 22.
• textsms

[TS] 타입 조합

교차 타입교차 타입을 사용하면 여러 가지 타입을 결합하여 하나의 단일 타입으로 만들 수 있다. 기존에 존재하는 다른 타입들을 합쳐서 해당 타입의 모든 멤버를 가지는 새로운 타입을 생성한다.& 를 사용해서 표기하며 결과물로 탄생한 단일 타입에는 타입 별칭을 붙일 수 있다.type ProductItem = { id: number; name: string; price: number; imageUrl: string; quantity: number;}type ProductItemWithDiscount = ProductItem & { discountAmount: number };유니온 타입유니온 타입은 타입 A 또는 타입 B 중 하나가 될 수 있는 타입을 말하며 A | B 같이 표기한다.함수 내부에서 qu..

• format_list_bulleted TypeScript
• · 2025. 1. 21.
• textsms

[TS] 문자열 템플릿 리터럴 타입

문자열 템플릿 리터럴 타입을 이용하면 유연성을 유지하면서도 문자열 리터럴을 정의할 수 있다.템플릿 리터럴 타입을 이용해 사용자 정의 이벤트 시스템을 만들 때 모든 이벤트명을 “on”으로 시작하도록 이름 규칙을 정할 수 있다. (빈 문자열 포함)type EventName = `on${string}`; HTML의 헤딩 요소를 표현하는 문자열 타입을 정의할 수 있다.type Levels = 1 | 2 | 3 | 4 | 5 | 6;// "H1" | "H2" | "H3" | "H4" | "H5" | "H6"type Headings = `H${Levels}`;한 개의 매개변수 EventObject를 갖는 Callback 함수 타입을 정의한다. EventObject는 이벤트 정보의 값을 포함하는 제네릭 타입이다.모..

• format_list_bulleted TypeScript
• · 2025. 1. 17.
• textsms