타입스크립트 클래스

자바스크립트는 애초에 프로토타입기반을 이용해 상속을 구현합니다.

ES6 에 존재하는 class 키워드를 이용해 구현할 수 있습니다. 타입스크립트도 이와 동일하게 class 키워드를 이용합니다.

1. 클래스 키워드

ES6 를 다루어보셨다면 기존에 생각했던 것과 동일합니다. class 키워드 뒤에 클래스 이름을 적어줍니다.

class Button {
    constructor() {
      // ...
    }
}

2. 생성자

클래스 기반 언어들에서는 생성자를 통해 멤버들을 초기화시켜줬습니다. ES6 에서도 동일하게 this. 을 이용하였던것이 생각납니다.

타입스크립트도 동일한데 다만, 사전에 등록되지 않은 프로퍼티를 초기화하려하면 에러를 내뱉습니다.

class Button {
    constructor(name: string) {
        this.name = name; // Error!
        // TS2339: Property 'name' does not exist on type 'Button'.
    }
}

다음으로 만들어야합니다.

class Button {
    name: string;
    constructor(name: string) {
        this.name = name;
    }
}

해당 클래스의 프로퍼티를 미리 작성해줘야 합니다.

3. 상속

ES6 문법에서 사용하던 extends 키워드를 동일하게 사용합니다.

class Input {
    name: string;
    constructor(name: string) {
        this.name = name;
    }
    inputName() {
        console.log(`input name is ${ this.name }`);
    }
}
class Button extends Input {
    constructor(name: string) {
        super(name);
    }
}
const button = new Button('click me');
button.inputName(); // input name is click me

현재 상속계층은 Button 이 Input 을 상속받고있습니다.
하위클래스에서 constructor 를 정의하고싶다면 반드시 상위클래스의 constructor 를 호출해야만합니다. super(name) 을 보면 매개변수도 동일하게 전달하는것을 확인할 수 있습니다. 그리고 마지막에 inputName() 을 호출하여 콘솔로그에 찍히는 것도 볼 수 있습니다.

4. 오버라이드

타입스크립트에서도 오버라이드를 구현할 수 있습니다.

오버라이드(Override)란?
상위 클래스에서 정의한 메서드를 자식클래스에서 재정의 하는 것.

class Input {
    name: string;
    constructor(name: string) {
        this.name = name;
    }
    inputName() {
        console.log(`input name is ${ this.name }`);
    }
}
class Button extends Input {
    constructor(name: string) {
        super(name);
    }
    inputName() {
        console.log(`button name is ${ this.name }`);
    }
}
const button = new Button('kikiki');
button.inputName(); // button name is kikiki

inputName() 메서드를 하위클래스인 Button 에서 오버라이드 하여 호출했습니다. 출력결과가 다른것을 확인할 수 있습니다.

5. 접근제어자

public : 디폴트값, 어디에서나 접근가능.

protected : 상속받은 하위클래스만 접근가능.

private : 선언한 클래스 내에서만 접근가능.

5- 1 public

별도로 프로퍼티나 메서드 앞에 추가해주지않아도 됩니다. 명시적으로 다음과 같이 수정할 수 있습니다.

class Input {
    public name: string;
    public constructor(name: string) {
        this.name = name;
    }
    public inputName() {
        console.log(`input name is ${ this.name }`);
    }
}
class Button extends Input {
    public constructor(name: string) {
        super(name);
    }
    public inputName() {
        console.log(`button name is ${ this.name }`);
    }
}

5- 2 protected

선언한 클래스를 포함해 상속받는 하위클래스에서만 접근 가능합니다.

class Input {
    protected name: string;
    constructor(name: string) {
        this.name = name;
    }
    protected inputName() {
        console.log(`input name is ${ this.name }`);
    }
}
const input = new Input('input');
// console.log(input.inputName()); Error!
// TS2445: Property 'inputName' is protected and only accessible within class 'Input' and its subclasses.

public 인 constructor() 를 통해 인스턴스를 생성했지만 protected 접근제어자가 붙은 inputName() 는 외부에서 호출불가능한것을 볼 수 있습니다.

constructor() 에 protected가 붙는다면 해당 클래스는 바로 인스턴스화 될 수 없습니다. 상속받은 하위클래스에서 super 를 이용해 호출할 수 있습니다.

class Input {
    protected name: string;
    protected constructor(name: string) {
        this.name = name;
    }
    protected inputName() {
        console.log(`input name is ${ this.name }`);
    }
}
class Button extends Input {
    constructor(name: string) {
        super(name);
    }
    inputName() {
        console.log(`button name is ${ this.name }`);
    }
}
const button: Input = new Button('button');

5-3 private

선언한 클래스 내에서만 접근이 가능합니다. 보통 private 키워드가 붙은 프로퍼티는 _(언더바) 를 붙이는것이 통상적이라고 합니다. 이후에 외부에서 접근을 할 시에는 get / set 을 이용합니다.

class Input {
    private _name: string;
    protected constructor(name: string) {
        this._name = name;
    }
    get name(): string {
        return this._name;
    }
    set name(name: string) {
        this._name = name;
    }
}
class Button extends Input {
    constructor(name: string) {
        super(name);
        // console.log(this._name);  Error!
        // TS2341: Property '_name' is private and only accessible within class 'Input'.
    }
}
const button = new Button('my Button');
// get 호출
console.log(`button name is ${ button.name }`); // button name is my Button
// set 호출
button.name = 'my Button2';
// get 호출
console.log(`button name is ${ button.name }`); // button name is my Button2