[TypeScript] 템플릿 리터럴 타입: 문자열 동적으로 다루기

기본 템플릿 리터럴 타입템플릿 리터럴 타입은 백틱(```)과 `${}`를 사용해 문자열을 조합합니다.type Region = "seoul";type Welcome = `어서오세요, ${Region}!`;const msg: Welcome = "어서오세요, seoul!";console.log(msg); // 출력: 어서오세요, seoul!유니온과의 결합템플릿 리터럴 타입은 인터폴레이션 부분에 유니온 타입을 사용하면, 각 멤버와 결합된 새로운 리터럴 타입의 유니온을 생성할 수 있습니다.type Action = "create" | "update";type Entity = "user" | "order";type OperationID = `${Action}_${Entity}_action`;// OperationID..

• format_list_bulleted TypeScript
• · 2025. 2. 27.
• textsms

[TypeScript] Mapped Types로 타입 재사용하기

Mapped Types의 기본: 속성 변환Mapped Types는 주로 인덱스 시그니처 문법을 활용하여 기존 타입의 모든 속성을 대상으로 새로운 타입을 생성합니다.interface AppState { loading: number; error: string;}type BooleanState = { [K in keyof T]: boolean;};type AppFlags = BooleanState;const flags: AppFlags = { loading: false, error: true,};console.log(flags); // 출력: { loading: false, error: true }매핑 수정자: 속성 제어`+`와 `-`로 `readonly`나 선택적 속성(`?`)을 추가하거나 제거할 ..

• format_list_bulleted TypeScript
• · 2025. 2. 27.
• textsms

[TypeScript] 조건부 타입: 입력과 출력의 유연함

조건부 타입 기본 문법조건부 타입의 기본 형태는 다음과 같습니다.type Result = T extends U ? X : Y;예제: 문자열 여부 검사타입 매개변수 T가 문자열이면 true, 그렇지 않으면 false를 반환하는 조건부 타입입니다.type IsString = T extends string ? true : false;type Test1 = IsString; // truetype Test2 = IsString; // false제네릭과 조건부 타입의 결합제네릭과 결합하면 입력에 따라 출력 타입을 유연하게 정의할 수 있습니다.interface StringData { value: string; format: "text";}interface NumberData { value: number; ..

• format_list_bulleted TypeScript
• · 2025. 2. 27.
• textsms

[TypeScript] 인덱스 액세스 타입(Indexed Access Types): 객체 속성 정밀 추출

인덱스 액세스 타입이란인덱스드 액세스 타입은 `Type["property"]` 문법으로 객체 타입에서 특정 속성의 타입을 가져옵니다.interface User { id: string; name: string; active: boolean;}type UserName = User["name"]; // stringconst getName = (user: User): UserName => user.name;const user: User = { id: "u1", name: "지훈", active: true };console.log(getName(user)); // 출력: 지훈`User["name"]`으로 `name` 속성의 타입(`string`)을 추출.유니언과 keyof 활용인덱스 타입 자체가 타입이므로,..

• format_list_bulleted TypeScript
• · 2025. 2. 27.
• textsms

[TypeScript] typeof 타입 연산자

typeof의 확장JavaScript에서의 역할JavaScript에서 `typeof`는 값의 런타임 타입을 문자열로 알려줍니다console.log(typeof "안녕"); // 출력: "string"TypeScript에서의 역할TypeScript는 이를 확장해 타입 컨텍스트에서 사용 가능하게 했습니다. 그래서 정적 타입 검사에 활용할 수 있습니다.기본 타입에서의 사용const score = 95;let grade: typeof score; // numbergrade = 88;// grade = "A"; // 오류: string은 number에 할당 불가typeof와 ReturnType의 조합`typeof`는 함수의 반환 타입을 가져오는 데 유용하며, `ReturnType`과 함께 사용하면 더욱 강력합니다..

• format_list_bulleted TypeScript
• · 2025. 2. 26.
• textsms

[TypeScript] keyof 타입 연산: 객체 키를 활용한 타입 정의

keyof란`keyof`는 객체 타입을 받아 그 속성 이름들로 구성된 유니언 타입을 생성합니다.interface Coord { x: number; y: number;}type CoordKeys = keyof Coord; // "x" | "y"function getCoordValue(key: CoordKeys, coord: Coord): number { return coord[key];}const point: Coord = { x: 10, y: 20 };console.log(getCoordValue("x", point)); // 출력: 10console.log(getCoordValue("y", point)); // 출력: 20인덱스 시그니처와 keyof객체가 문자열 또는 숫자 인덱스 시그니처를 가질 ..

• format_list_bulleted TypeScript
• · 2025. 2. 26.
• textsms