[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

[TypeScript] 인터페이스와 클래스 언제 사용할까?

인터페이스(Interface)를 사용해야 하는 경우인터페이스는 객체의 구조를 타입 검사 목적으로 정의할 때 유용합니다.객체의 형태를 강제: 인터페이스를 통해 객체가 반드시 가져야 하는 속성과 메서드를 명세할 수 있습니다.경량 타입 정의: 인터페이스는 컴파일된 JavaScript 코드에는 포함되지 않으므로, 코드 용량에 영향을 주지 않습니다.구조적 계약: 함수의 매개변수나 반환 타입 등, 특정 객체의 구조를 명확히 하여 코드의 안정성을 높입니다.interface Order { id: number; item: string; quantity: number;}function processOrder(order: Order): string { return `${order.item} ${order.quanti..

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

[TypeScript] 상속: 코드 재사용의 핵심

상속이란객체 지향 프로그래밍의 핵심으로, 클래스가 다른 클래스의 속성과 메서드를 물려받아 재사용성을 높이는 방법입니다. `extends` 키워드로 구현되며, 코드 중복을 줄이고 유지보수성을 강화합니다. 상속의 기본class Vehicle { protected type: string; constructor(type: string) { this.type = type; } move(): string { return `${this.type}가 이동합니다.`; }}class Car extends Vehicle { private brand: string; constructor(brand: string) { super("자동차"); this.brand = brand; } move..

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

[TypeScript] Getters와 Setters 사용하기

Getters와 Setters란?Getter: 프라이빗 속성을 외부에 노출할 때 사용하며, 값을 반환하기 전 추가 로직(계산, 포맷팅 등)을 적용할 수 있습니다.Setter: 외부에서 속성에 값을 설정할 때 호출되며, 유효성 검사나 데이터 변환을 수행해 잘못된 값을 걸러냅니다.기본 예제계좌 잔액을 관리하며, 음수 입력을 방지하는 예제를 보겠습니다.class Account { private _balance: number; constructor(initialBalance: number) { this._balance = initialBalance; } get balance(): number { return this._balance; } set balance(amount: number) {..

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

[TypeScript] 화살표 함수

화살표 함수란화살표 함수는 `=>` 기호를 사용해 함수를 정의하며, TypeScript에서는 매개변수와 반환 타입에 타입을 명시할 수 있습니다.기본문법let 함수명 = (매개변수1: 타입1, 매개변수2: 타입2): 반환타입 => { // 함수 본문};기본 예제let sayHello = (user: string): string => { return `안녕하세요, ${user}님!`;};console.log(sayHello("지영")); // 출력: 안녕하세요, 지영님!한 줄일 경우 중괄호와 `return`을 생략할 수도 있습니다let sayHelloShort = (user: string): string => `안녕하세요, ${user}님!`;숫자 계산 예제let subtract = (a: number,..

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