TypeScript Class

🦮클래스(Class)란?

클래스는 객체 지향 프로그래밍의 기본 요소로, TypeScript에서 클래스를 정의하고 사용하는 방법은 다음과 같습니다.

class Goods {
    goodsName: string;
    price: number;

    constructor(goodsName: string, price: string) {
        this.goodsName = goodsName;
        this.price = price;
    }
  
     goodsPrint(): string {
        return `${this.goodsName}의 가격은 ${this.price}원 입니다.`;
    }
}

위의 코드에서 constructor 메서드는 Goods 클래스의 인스턴스를(클래스를 기반으로 생성된 각 객체) 생성할 때 호출되며, goodsName과 price의 string 및 number 속성을 인자로 전달된 값으로 초기화합니다. 이를 통해 클래스의 인스턴스가 생성될 때 초기화 작업을 수행할 수 있습니다. 추가로 constructor 메서드는 클래스 내에서 한 번만 정의할 수 있습니다.

// 클래스의 인스턴스 생성
const goods1 = new Goods("Mouse", 3000);
const goods2 = new Goods("Keyboard", 5000);

console.log(goods1.price); // 3000
console.log(goods2.goodsName);  // Keyboard
console.log(goods1.goodsPrint()); // Mouse의 가격은 3000원 입니다.
console.log(goods2.goodsPrint()); // Keyboard의 가격은 5000원 입니다.

위의 코드에서 goods1과 goods2는 Goods 클래스의 인스턴스로, 각 인스턴스는 클래스의 속성을 가지고 있습니다. 해당 클래스의 메서드와 속성을 사용할 수 있습니다.

Extends란?

클래스 간 상속을 통해 기존 클래스의 특성을 확장할 수 있습니다.

class Exhibition extends Goods {
    position: string; // Class Goods 상속 후, position 값 추가

    constructor(goodsName: string, price: number, position: string) {
        super(goodsName, price);
        this.position = position;
    }
  	goodsInfo(): string {
    	return `${super.goodsPrint()} 해당 상품은${this.position}에 진열되어 있습니다.`;
	}
}

위의 예시에서 Exhibition 클래스가 Goods 클래스의 모든 속성과 메서드를 상속받아서 사용할 수 있습니다.

Super keyword

super 키워드를 사용하여 부모 클래스인 Goods의 생성자를 호출합니다. 이렇게 함으로써 Exhibition 클래스의 생성자 내에서도 Goods 클래스의 속성인 goodsName과 price를 사용할 수 있습니다

const goodsInfo = new goodsInfo("Coffe", 1200, "A열 10번");
console.log(goodsInfo.goodsInfo());
// Coffee의 가격은 1200원 입니다. 해당 상품은 A열 10번에 진열되어 있습니다.

접근 제어자(Private, Protected, Public)

타입스크립트에서 접근 제어자(public, private, protected)를 활용하여 클래스의 접근 권한을 설정할 수 있습니다.

class Goods {
    public goodsName: string;    // public 접근 제어자
    protected price: number;     // protected 접근 제어자
    protected discount: number;    // protected 접근 제어자
    private position: string;      // private 접근 제어자

    constructor(goodsName: string, price: number, discount: number, position: string) {
        this.goodsName = goodsName;
        this.price = price;
        this.discount = discount;
        this.position = position;
    }

    public goodsPrint(): string {
        return `${this.goodsName}의 가격은 ${this.price}원이며 해당 상품은
				${this.position}에 진열되어 있습니다.(할인율: ${this.discount}%)`;
    }
}

class DiscountedGoods extends Goods {
    constructor(goodsName: string, price: number, discount: number, position: string) {
        super(goodsName, price, discount, position);
    }
  
	// price와 discount는 protected 접근 제어자로 접근이 가능함!
    public discountedPrice(): string {
        return `${this.price - (this.price * this.discount / 100)}원`;
    }
}

• 접근 제어자 public은 접근 권한은 설정하지 않으면 기본값으로 사용됩니다. 즉, public은 작성하지 않아도 문제가 발생하지 않습니다.
• 접근 제어자 protected는 protected를 사용한 해당 클래스와 서브 클래스에서만 접근 가능합니다.
• 접근 제어자 private는 private를 사용한 해당 클래스에서만 접근이 가능합니다.

const goods = new Goods("Americano", 4500, 10, 'B열 9번');
console.log(goods.goodsName); // 접근 가능 (public)
console.log(goods.price);   // 접근 불가 (protected)
console.log(goods.discount); // 접근 불가 (private)
console.log(goods.goodsPrint());
// 출력: Americano의 가격은 4500원이며 해당 상품은 B열 9번에 진열되어 있습니다.(할인율: 10%)

const discountedGoods = new DiscountedGoods("Tea", 3000, 15, 'C열 3번');
console.log(discountedGoods.goodsName); // 접근 가능 (public)
console.log(discountedGoods.price);   // 접근 불가 (protected)
console.log(discountedGoods.discount); // 접근 불가 (private)
console.log(discountedGoods.goodsPrint());
// 출력: Tea의 가격은 3000원이며, 해당 상품은 C열 3번에 진열되어 있습니다.(할인율: 15%)
console.log(discountedGoods.discountedPrice()); // 출력: 2550 (3000 - 450)

추상 클래스(Abstract Class)

추상 클래스를 사용하여 인스턴스를 직접 생성하지 못하게 하고, 파생된 클래스에서 구현해야 하는 메서드를 정의할 수 있습니다.

abstract class AbstractGoods {
    goodsName: string;
    price: number;
    discount: number; 
    position: string;

    constructor(goodsName: string, price: number, discount: number, position: string) {
        this.goodsName = goodsName;
        this.price = price;
        this.discount = discount;
        this.position = position;
    }

    abstract goodsPrint(): string;
}

abstract으로 추상 클래스를 선언해주고 goodsPrint 메소드는 추상 메소드로 선언이 되어 있기 때문에 하위 클래스에서 반드시 구현해야 합니다.

class Goods extends AbstractGoods {
    constructor(goodsName: string, price: number, discount: number, position: string) {
        super(goodsName, price, discount, position);
    }

    goodsPrint(): string {
        return `${this.goodsName}의 가격은 ${this.price}원이며
		해당 상품은 ${this.position}에 진열되어 있습니다.(할인율: ${this.discount}%)`;
    }
}

AbstractGoos를 상속받는 클래스 Goods를 선언하고 Goods 클래스에서 goodsPrint 함수를 구현하여 인스턴스화 합니다.

const goods = new Goods("도시락", 5000, 20, "D열 7번");
console.log(goods.goodsPrint());
// 도시락의 가격은 5000원이며 해당 상품은 D열 7번에 진열되어 있습니다.(할인율: 20%)

자바스크립트를 공부할 때 클래스가 어려웠는데 타입스크립트를 공부하며 클래스를 다시 공부해보니 역시나 어렵다..😭