[TypeScript] Class(클래스)

 

타입스크립트에서의 클래스를 알아봅시다.

 

✅ Class(클래스)

타입스크립트도 객체지향 프로그래밍 언어이기 때문에 객체를 생성하는 클래스 기능을 사용할 수 있습니다.

 

Javascript

class Rectangle {
    constructor(height, width) {
        this.height = height;
        this.width = width;
    }
}

 

자바스크립트에서는 contructor 메서드를 만들고 그 안에서

this.height = height

this.width= width 와 같은 식으로 작성해야 합니다.

 

 

Typescript

class Player {
    constructor(
        private firstName: string,
        private lastName: string,
        public nickName: string
    ) {}
}

const nico = new Player("nico", "las", "니꼬");

nico.firstName; // 에러
nico.nickName;

 

타입스크립트에서 Player 클래스를 만들고 property(속성)를 작성합니다.

타입스크립트는 파라미터들만 써준다면 알아서 constructor 메서드를 만들어줍니다.

private와 public으로 property를 만들 수 있으며 이 키워드들은 자바스크립트로 컴파일 되면서 사라집니다.

 

nico.firstName을 시도하면 타입스크립트가 private이기 때문에 코드 실행을 막아줍니다.

자바스크립트에서는 문제 없이 작동하기 때문에 타입스크립트만의 장점이 됩니다.

 

public 키워드로 선언된 property들은 문제 없이 가능합니다.

 

 

✏️ Constructor(생성자)

constructor 메서드는 class로 생성된 객체를 생성하고 초기화하기 위한 특수한 메서드입니다.

 

"constructor"라는 이름을 가진 특수한 메서드는 클래스 안에 한 개만 존재할 수 있고

만약 여러 개의 constructor 메서드가 존재한다면 SyntaxError가 발생합니다.

 

---

 

✅ Abstract Class(추상 클래스)

오직 다른 클래스가 상속받을 수 있는 클래스
자바스크립트에서는 추상 클래스 개념이 없고 컴파일 시 일반 클래스로 변함

 

 

✏️ 추상 클래스를 사용하는 이유

표준화된 property와 method를 갖도록 해주는 *청사진을 만들기 위해 사용

*청사진: 아키텍처 또는 공학 설계를 문서화한 기술 도면을 인화로 복사하거나 복사한 도면을 말한다.

 

 

✏️ 추상 클래스 상속

abstract class User {
    constructor(
        private firstName: string,
        private lastName: string,
        public nickName: string
    ) {}
}

class Player extends User {
    
}

const nico = new User("nico", "las", "니꼬"); // 에러

 

추상 클래스 User를 만들고 Player 클래스에 있던 constructor 메서드를 User에 넣고 Player가 User를 상속도록 해줍니다.

상속은 extends를 사용하여 부모 클래스 이름을 이어서 작성해줍니다.

 

추상 클래스로는 직접 새로운 인스턴스를 만들 수는 없습니다.

 

 

✏️ 추상 클래스 메서드

abstract class User {
    constructor(
        private firstName: string,
        private lastName: string,
        public nickName: string
    ) {}
    public getFullName() {
        return `${this.firstName} ${this.lastName}`
    }
}

class Player extends User {
    
}

const nico = new Player("nico", "las", "니꼬");

nico.getFullName(); // 메서드가 private일 경우 에러, 메서드가 private이 아닐 경우 정상 작동

 

firstName과 lastName을 합쳐주는 getFullName이라는 메서드를 만들어 봅시다.

Player는 User로부터 상속받았으므로 Player에서도 getFullName 메서드를 사용할 수 있습니다.

 

메서드가 private 키워드로 선언되었다면 사용할 수 없습니다.

 

---

 

✅ 추상 메서드

abstract class User {
    constructor(
        private firstName: string,
        private lastName: string,
        private nickName: string
    ) {}
    abstract getNickName(): void
    getFullName() {
        return `${this.firstName} ${this.lastName}`
    }
}

class Player extends User {
    
}

const nico = new Player("nico", "las", "니꼬");

nico.getFullName();

 

추상 클래스 안에서는 추상 메서드를 만들 수 있습니다.

메서드를 구현하면 안되고 call signature만을 작성해야 합니다.

 

getNickName이라는 추상 메서드를 만들고 리턴 값이 void라고 선언합니다.

추가로 argument를 작성하는 것도 가능합니다.

 

 

추상 메서드는 추상 클래스를 상속받는 모든 것들이 구현을 해야 하는 메서드입니다.

즉, Player가 User를 상속받는다면 User 안에 있는 추상 메서드를 Player에서 구현해야 합니다.

 

class Player extends User {
    getNickName() {
        console.log(this.nickName);
    }
}

 

위와 같이 Player 클래스에서 User의 추상 메서드를 구현합니다.

 

하지만 이 코드는 에러가 발생하는데

그 이유는 User 클래스에서 선언한 nickName 속성이 private이기 때문에 접근할 수 없습니다.

 

 

❔ public

모든 클래스에서 접근 가능

 

❔ private

private으로 명시된 속성들은 클래스 밖에서 접근할 수 없고, 다른 자식 클래스에서도 접근할 수 없음
개인적인 것을 의미하며, 해당 클래스 내에서만 접근 가능

 

❔ protected

자식 클래스에서도 사용 가능한 속성으로 만드는 방식
외부에서는 여전히 접근 불가능

 

 

 

✏️ 수정된 추상 메서드 구현

abstract class User {
    constructor(
        protected firstName: string,
        protected lastName: string,
        protected nickName: string
    ) {}
    abstract getNickName(): void
    getFullName() {
        return `${this.firstName} ${this.lastName}`
    }
}

class Player extends User {
    getNickName() {
        console.log(this.nickName);
    }
}

 

추상 클래스의 속성들을 protected로 바꿔주면 자식 클래스인 Player에서도 nickName 속성을 사용할 수 있습니다.

 

 

 

추상 클래스, 추상 메서드, public, private, protected는 타입스크립트에서만 사용 가능합니다.