본문 바로가기
🟨 JavaScript 🟨/🟦TypeScript🟦

TypeScript - class (feat.예시코드)

by 백씨네 2024. 2. 22.

접근 제한자 - public, private, protected

접근 제한자를 이용해서 class의 멤버의 접근 범위를 제한할 수 있다.
접근 제한자는 public, private, protected 3가지가 있다.

결론부터 말하자면

  • public : 어디서나 접근이 가능하다. public으로 지정하거나 아무것도 지정하지 않으면 기본적으로 public이다.
  • private : 해당 클래스의 내부에서만 접근이 가능하다. 상속을 하더라도 접근할 수 없다.
  • protected : 해당 클래스, 파생된 클래스 내부에서만 접근이 가능하다. (인스턴스에서 접근이 불가능)

1. public


class Car {
    color : string;
    public wheel : number;
    constructor( color : string , wheel:number) {
        this.color = color
        this.wheel = wheel
    }

    start(){
        console.log('start')
    }
}

const bmw = new Car("red", 4)
console.log(bmw.color) // 접근 제한자를 지정하지 않아도 기본적으로 public이다.
console.log(bmw.wheel) // 접근 가능

2. private

class Car {
    private 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(this.name) // Error : name이 private 이기 때문에 접근할 수 없다.
    }
}


const z4 = new Bmw("black")

name을 private로 지정할 경우 상속을 받았다 하더라도 사용할 수 없고 private를 지정한 클래스 내부에서만 쓸 수 있다.

Property 'name' is private and only accessible within class 'Car'.

private 대신 '#'을 붙여도 된다.

class Car2 {
    #name : string = "car2"
    start(){
        console.log(this.#name)
    }
}

3. protected


class Car {
    protected name : string = "car"
    public name2 : string = "car2"
    color : string

    constructor( color : string ) {
        this.color = color
    }
    start(){
        console.log('start')
    }
}



class Bmw extends Car {
    constructor(color:string){
        super(color)
    }
    showName (){
        console.log(this.name)
    }
}




const z4 = new Bmw("black")

console.log(z4.name) // protected 인 name은 오류
console.log(z4.name2) // public 인 name2는 접근가능

class 내부에서 사용할 때는 protected와 public이 같은 것 같지만 인스턴스를 생성하게 되면 차이점이 생긴다.
protected를 지정한 name은 클래스 인스턴스에서 접근이 불가능하고 public인 name2만 클래스 인스턴스에서 접근이 가능하다.

readonly, static, abstract

4. readonly

접근 제한자는 아니지만 typescript에서 제공하는 키워드인 readonly는 속성이 선언된 후에 변경할 수 없음을 나타낸다.

즉, 속성의 가시성이나 접근성을 제한하지 않고, 속성의 불변성을 선언할 때 사용한다.

class Car {
    readonly make: string
    readonly model: string
    constructor(make: string, model: string) {
        this.make = make
        this.model = model
    }
}

const myCar = new Car("Toyota", "Corolla")
console.log(myCar.make) // Toyota
console.log(myCar.model) // Corolla
myCar.make = "Honda"; // 오류: 'make'는 읽기 전용 속성이므로 할당할 수 없습니다.

5. static

class Car {
    readonly make: string
    readonly model: string
    static wheels = 4

    constructor(make: string, model: string) {
        this.make = make
        this.model = model
    }

    start(){
        console.log('start')
        console.log(this.wheels) // 오류발생
        console.log(Car.wheels) // 클래스를 직접 참조
    }

    static stop(){
        console.log('stop')
    }
}


const myCar = new Car("Toyota", "Corolla")
console.log(myCar.wheels) // 오류발생
console.log(Car.wheel) // 클래스를 직접 참조

static 키워드를 붙인 속성이나 메서드는 인스턴스에 속하는 것이 아닌 해당 클래스 자체에 속하게 된다.
그래서 해당 클래스를 이용해서 인스턴스를 생성하지 않고도 접근이 가능하다.

6. abstract

추상 클래스

abstract class Car {
    color : string

    constructor( color : string ) {
        this.color = color
    }

    start(){
        console.log('start')
    }

    abstract doSomething():void
}

const myCar = new Car("red") // Error: 추상 클래스는 인스턴스로 생성할 수 없다.

class Bmw extends Car {
    constructor(color:string){
        super(color)
    }
    doSomething(){
        console.log('go...!')
    }
}

추상 클래스는 abstract 키워드를 클래스 앞에 선언하여 만든다.

추상 클래스의 가장 큰 특징은 추상 클래스를 이용하여 직접 인스턴스를 만들 수 없다. 추상 클래스는 다른 클래스에 상속해서 사용한다. 또, abstract를 이용해서 추상 메서드를 만들 때는 로직이 없이 작성한 후 상속받은 클래스에서 구체적인 구현을 해줘야 한다.

'🟨 JavaScript 🟨 > 🟦TypeScript🟦' 카테고리의 다른 글

TypeScript - Utility Types  (0) 2024.02.23
TypeScript - Generic  (2) 2024.02.22
TypeScript - function  (0) 2024.02.22
TypeScript - interface  (0) 2024.02.22
Jest를 이용한 TDD(Test-Driven Development)  (0) 2023.04.24

댓글