TypeScript 공부 #6

☘️클래스(Class)

클래스

자바스크립트에서 클래스를 작성할 때, 아래와 같이 하면 된다.

그러나 이를 타입스크립트에서 작성할 때엔 에러가 발생한다.

 

타입스크립트에서 Class 를 사용할 때에는, 멤버 변수를 미리 선언하고 타입을 설정해 준다.

class Car { 
    color: string;
    constructor(color: string) {
        this.color = color;
    }
    start() { 
        console.log("start");
    }
}

const bmw = new Car('red');
bmw.start();

멤버 변수를 미리 선언하는 방법 이외에도 접근 제한자나 readonly를 사용하는 방법이 있다.

// 접근 제한자
class Car { 
    // color: string;
    constructor(public color: string) {
        this.color = color;
    }
    start() { 
        console.log("start");
    }
}

// readonly
class Car { 
    // color: string;
    constructor(readonly color: string) {
        this.color = color;
    }
    start() { 
        console.log("start");
    }
}

접근 제한자(Access modifier)

자바(JAVA)와 같은 객체지향언어는 접근 제한자를 지원하여 자바스크립트에서는 접근 제한자를 지원하지 않는다.

하지만 타입스크립트에서는 접근 제한자를 지원한다.

 

접근 제한자에는 public, private, protected 가 있다.

• public: 자식 클래스, 클래스 인스턴스 모두 접근 가능, (기본 값)
• protected: 자식 클래스에서 접근 가능
• private: 해당 클래스 내부에서만 접근 가능

public

public은 생략 가능하며 모두 접근 가능하다.

// public
class Car {
    public name: string = "car";
    color: string;
    constructor(color: string) {
        this.color = color
    }
    start() {
        console.log("start");
        console.log(this.name);
    }
}

// 자식 클래스
class BMW extends Car {
    constructor(color: string) {
        super(color);
    }
    showName() {
        console.log(super.name);
    }
}

const a = new BMW("red");
console.log(a.name);

private

private는 해당 클래스 내부에서만 사용가능하고, 자식 클래스에서는 사용이 되지 않는다.

그래서 위에 코드에서 private로 수정을 하면 접근할 수 없다고 에러가 뜬다.

즉, name은 Car 클래스 내부에서만 사용가능하다.

추가적으로 private를 표현하는 방법에는 앞에  # 을 추가하는 방법도 있다.

protected

protected는 내부 클래스, 자식 클래스에서만 사용이 가능하다.

 

그래서 public과 달리 외부에서 name을 사용했을 때, 에러가 발생한다.

 

static()

static를 사용하면 정적 멤버 변수를 사용할 수 있다.

그러면 this 를 통해 접근하는 것이 아니라 클래스 이름으로 접근해야 한다.

추상 클래스

추상 클래스는 클래스 명 앞에 abstract 키워드를 붙여 사용한다.

추상화란 이름만 선언해 주고 구체적인 기능은 상속받는 쪽에서 구현해야 된다.

 

추상 클래스를 사용하면 new를 통해 객체를 만들 수 없고,

// 추상 클래스
abstract class Car {
	color: string;
    constructor(color: string) {
    	this.color = color;
    }
    start() {
    	console.log("start")
    }
}

const car = new Car("red"); // 불가능XXXXXXXXXXXXXXXXXXXXX

추상 클래스는 상속을 통해서만 객체를 만들 수 있다.

// 추상 클래스
abstract class Car {
	color: string;
    constructor(color: string) {
    	this.color = color;
    }
    start() {
    	console.log("start")
    }
}

// 상속OOOOOOOOOOOOOOOOOOOOOO
class BMW extends Car {
    constructor(color: string) {
        super(color)
    }
}

추상 클래스 안에 또 추상 메서드를 만들어 주면,

상속 클래스에서 해당 추상 메서드를 구체적으로 구현하지 않아 에러가 발생하게 된다.

그래서 다음과 같이 구체적인 구현을 해줘야 한다.

// 추상 클래스
abstract class Car {
	color: string;
    constructor(color: string) {
    	this.color = color;
    }
    start() {
    	console.log("start")
    }
    // 추상 메서드
    abstract doSometing(): void;
}

class BMW extends Car {
    constructor(color: string) {
        super(color)
    }
    doSometing() { // 추상 메서드 구체적 구현
        console.log("hello")
    }
}

---

☘️참고 자료

[유튜브]TypeScript 강좌 - 코딩앙마

---

☘️마무리 하며...

java공부와 정보처리기사 공부를 하면서 접근 제한자를 어느 정도 잘 알고 있었는데 타입스크립트에서도 접근 제한자를 사용한다는 것을 처음 알게 되었고 타입스크립트에 다양한 기능이 있다는 것을 잘 알게 되었다.