[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

[TypeScript] 프로퍼티 데코레이터 사용하기

프로퍼티 데코레이터란클래스의 프로퍼티에 적용되어 해당 프로퍼티의 동작을 제어할 수 있습니다. 값을 읽거나 설정할 때 추가 로직을 실행합니다. 사용하려면 tsconfig.json 파일이나 커맨드라인 옵션에서 experimentalDecorators를 활성화해야 합니다.target: 인스턴스 프로퍼티인 경우 클래스의 프로토타입, 정적 프로퍼티인 경우 생성자 함수입니다.propertyKey: 데코레이터가 적용된 속성의 이름데코레이터 함수는 Object.defineProperty를 사용해 getter와 setter를 재정의할 수 있습니다.데코레이터 예제function LogValue(target: any, propertyKey: string) { let storedValue: any; const getter..

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

[TypeScript] 제네릭 인터페이스

제네릭을 사용하는 이유`any` 타입을 사용하면 모든 값을 허용할 수 있지만, 타입 안정성이 떨어집니다. 반면 제네릭은 호출 시점에 타입을 지정해, 코드의 의도를 명확히 하고 오류를 줄입니다. 제네릭은 한 함수나 인터페이스가 다양한 타입을 처리할 수 있도록 합니다. 예를 들어, 단순한 배열 처리 함수를 생각해 봅시다. 만약 숫자 배열과 문자열 배열에 대해 각각의 함수를 만들 필요 없이, 제네릭을 사용하면 하나의 함수로 모든 타입을 처리할 수 있습니다.제네릭 함수 예제function reverseList(list: T[]): T[] { return list.reverse();}const numbers = reverseList([1, 2, 3]);const words = reverseList(["가", "..

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