TypeScript 기본 개념 공부 #4

2023.04.06 - [Language/TypeScript] - TypeScript 기본 개념 공부 #3

TypeScript 기본 개념 공부 #3

 

Classes

자바스크립트는 객체지향 언어로 Class를 사용할 수 있다.

타입스크립트는 Java나 C#처럼 private method, public property, abstract class 등 이런 것들을 사용할 수 있다.

따로 객체지향 프로그래밍에 대해서는 언급하지 않겠다. 그럼 타입스크립트를 이용해 class를 어떻게 만드는지 보자.

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

"use strict";
class Player {
    constructor(firstName, lastName, nickName) {
        this.firstName = firstName;
        this.lastName = lastName;
        this.nickName = nickName;
    }
}

이렇게 타입스크립트를 이용해 클래스를 만들면 위와 같이 자바스크립트로 컴파일된다.

private나 public는 자바스크립트에서는 사용되지 않는다.

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

const player = new Player('jung', 'hyeonjun', 'jun')
player.firstName

인스턴스를 하나 생성하고 해당 인스턴스에 firstName을 보면 에러가 발생하는 것을 볼 수 있다.

이는 firstName을 private로 해놨기 때문에 할 수가 없다. 하지만 nickName을 보면 사용할 수 있는 것을 확인할 수 있다.

추상 클래스(Abstract Class)

추상 클래스는 다른 클래스가 상속받을 수 있는 클래스이며 직접 새로운 인스턴스를 생성할 수 없다.

위의 Player클래스를 이용하여 예를 들어보자면

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

class Player extends User {
    
}

const player = new Player('jung', 'hyeonjun', 'jun')
player.nickName

User라는 추상클래스를 만들고 Player의 생성자 함수를 User로 옮긴다. 그리고 Player 클래스는 User 클래스를 상속하도록 한다.

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

class Player extends User {
    
}

const player = new Player('jung', 'hyeonjun', 'jun')
player.getFullName()

User 추상 클래스의 getFullName이라는 메서드를 Player가 상속받았으므로 Player는 이 메서드를 그냥 사용할 수 있다.

하지만 메서드에서도 private를 붙이면 동작하지 않는다.

추상 메서드

위의 메서드는 추상 클래스 안에 있는 메서드이다. 그리고 추상 메서드도 만들 수 있다.

추상 메서드는 추상 클래스를 상속받는 모든 것들이 구현을 해야하는 메서드를 의미하며 메서드를 클래스 안에 구현하지 않으면 된다.

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

    getFullName(){
        return `${this.firstName} ${this.lastName}`
    }
}

class Player extends User {
    
}

const player = new Player('jung', 'hyeonjun', 'jun')
player.getFullName()

예를 들어 getNickName이라는 추상 메서드를 생성하면 Player 클래스에서 에러가 발생할 것이다.

이렇게 되면 Player 클래스에 getNickName 메서드를 구현해줘야 한다.

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 {
    getNickName() {
        console.log(this.nickName)
    }
}

const player = new Player('jung', 'hyeonjun', 'jun')
player.getFullName()

이렇게 그냥 단순하게 nickName을 출력하게 해주게 만들었다.

하지만 User 클래스에 nickName을 private로 해놓았기 때문에 에러가 발생할 것이다.

private를 해놓으면 클래스를 상속받았을지라도 접근할 수 없다.

그렇다면 어떤 접근 제한자를 사용해야 할까?

protected를 사용하면 상속받은 자식 클래스는 접근할 수 있도록 해준다.