[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

[TypeScript] 재사용 가능한 컴포넌트 제네릭 만들기

제네릭 기본: 값 그대로 전달하기제네릭의 기본은 입력받은 값을 그대로 반환하는 함수부터 시작합니다. `any`와 달리 타입 정보를 유지하면서도 모든 타입을 처리할 수 있습니다.function reflect(data: T): T { return data;}const text = reflect("안녕하세요");const num = reflect(42);console.log(text); // 출력: 안녕하세요console.log(num); // 출력: 42제네릭 제약 조건: 특정 속성이 있는 타입만 허용하기제네릭은 기본적으로 모든 타입에 대해 동작하지만, 때로는 특정 속성이 있는 타입에만 동작하도록 제한할 필요가 있습니다.interface Measurable { size: number;}function ..

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

[TypeScript] 객체 타입 다루기

객체 타입 정의 방법익명 객체 타입함수의 매개변수 등에 직접 객체 타입을 명시할 수 있습니다.function logInfo(data: { title: string; count: number }): void { console.log(`${data.title}: ${data.count}개`);}logInfo({ title: "책", count: 5 }); // 출력: 책: 5개인터페이스 활용재사용 가능한 객체 구조를 정의할 때 유용합니다.interface Product { name: string; price: number;}const displayProduct = (prod: Product): string => `${prod.name} - ${prod.price}원`;const item: Product..

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

[TypeScript] 함수 타입 정의하기

함수 타입 표현식가장 기본적인 방법은 함수 타입 표현식입니다. 화살표 함수와 유사한 문법을 사용하여, 매개변수와 반환 타입을 명시할 수 있습니다.const notify: (text: string) => void = (text) => { console.log(`알림: ${text}`);};notify("새 메시지가 도착했습니다."); // 출력: 알림: 새 메시지가 도착했습니다.타입 별칭을 통한 함수 타입 정의type FormatText = (input: string) => string;const uppercase: FormatText = (input) => input.toUpperCase();const trim: FormatText = (input) => input.trim();console.log(u..

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

[TypeScript] 타입 좁히기(Narrowing): 타입을 안전하게 다루기

typeof를 이용한 타입 좁히기가장 기본적으로 typeof 연산자를 사용해서 타입을 안전하게 만듭니다.function padLeft(padding: number | string, text: string): string { if (typeof padding === "number") { // padding이 숫자면, 해당 숫자만큼의 공백을 추가합니다. return " ".repeat(padding) + text; } else { // padding이 문자열이면, 그대로 앞에 붙입니다. return padding + text; }}console.log(padLeft(4, "TypeScript")); // " TypeScript"console.log(padLeft(">>"..

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