Tyescript에서의 Class

김명주·2023년 5월 21일
0
post-custom-banner

class

타입스크립트에서 this로 접근할 수 있는 각각의 속성들은 constructor 함수가 만들어지기 전에 class의 body 부분에서 타입이 지정되어져 있어야 한다.
그리고 각각의 속성을 지정할 때 접근 제어자를 사용해야 한다.

  1. public -> 어디서나 접근이 가능하고, class의 body에서 생략이 가능하다

  2. protected -> 자신과 자신에서 파생된 후손 클래스 내에서 접근 가능

  3. private -> 자신의 클래스 내에서만 접근 가능

class UserA{
    // body 부분 시작
  	// public이 생략된 상태
    first :string
    last : string
    age : number
    constructor(first:string, last:string, age:number) {
        this.first = first
        this.last = last
        this.age = age
    }
    getAge() {
        return `${this.first} ${this.last} is ${this.age}`
    }
    // body 부분 끝
}

class UserB extends UserA{
    getAge() {
        return `${this.first} ${this.last} is ${this.age}`
    }
}

class UserC extends UserB{
    getAge() {
        return `${this.first} ${this.last} is ${this.age}`
    }
}

혹시라도 초기값 설정이 필요하다면 아래와 같이 각각의 타입 선언의 뒤에서 할당연산자를 통해 값을 지정할 수 있다.

class UserA{
    // body 부분 시작
    first :string = ''
    last : string = ''
    age : number = 0
    constructor(first:string, last:string, age:number) {
        this.first = first
        this.last = last
        this.age = age
    }
    getAge() {
        return `${this.first} ${this.last} is ${this.age}`
    }
    // body 부분 끝
}

protected, private

접근제어자 protected는 자신과 자신에서 파생된 후손 클래스 내에서 접근이 가능하도록 하는 것이다. 아래와 같이 class 바깥쪽에서 사용하는 것은 허용하지 않는 것이다.

class UserA{
    // body 부분 시작
    first :string = ''
    protected last : string = ''
    age : number = 0
    constructor(first:string, last:string, age:number) {
        this.first = first
        this.last = last
        this.age = age
    }
    getAge() {
        return `${this.first} ${this.last} is ${this.age}`
    }
    // body 부분 끝
}

const neo = new UserA('neo', 'anderson', 102)
console.log(neo.last) // 'last' 속성은 보호된 속성이며 'UserA' 클래스 및 해당 하위 클래스 내에서만 액세스할 수 있습니다

private은 내 class 에서만 접근이 가능하도록 하는 접근제어자다.

class UserA{
    // body 부분 시작
    first :string = ''
    last : string = ''
    private age : number = 0
    constructor(first:string, last:string, age:number) {
        this.first = first
        this.last = last
        this.age = age
    }
    getAge() {
        return `${this.first} ${this.last} is ${this.age}`
    }
    // body 부분 끝
}
class UserB extends UserA{
    getAge() {
        return `${this.first} ${this.last} is ${this.age}` // 'age' 속성은 private이며 'UserA' 클래스 내에서만 액세스할 수 있습니다
    }
}

class UserC extends UserB{
    getAge() {
        return `${this.first} ${this.last} is ${this.age}` // 'age' 속성은 private이며 'UserA' 클래스 내에서만 액세스할 수 있습니다
    }
}
profile
개발자를 향해 달리는 사람
post-custom-banner

0개의 댓글