인터페이스에서 readonly 제어가 안되는 오류

타입스크립트를 공부하면서 인터페이스에 readonly를 줬는데도 프로퍼티가 제어가 안되고 수정이 되는 오류?를 발견했다.

 

대체 왜 readonly가 안 먹히는 걸까! 고민하면서 열심히 찾아본 결과, 인터페이스의 개념과 상속 부분을 제대로 이해하지 못했다는 걸 깨달았다.

 

 

interface Container {
    readonly name: string;
    readonly age: number;
}

class Person implements Container {
    name: string;
    age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;

        console.log(`${this.name} is ${this.age} years old.`)
    }
}

let one = new Person('Alex', 30)
one.name = 'Alex';

 

일부러 오류가 나는 코드를 짰는데, 잘 돌아가는거 아닌가?

인터페이스 Container에서 프로퍼티 name에 readonly를 적용했다. 예상대로라면 one.name 에서 재정의할 경우 에러가 나는게 맞다. 하지만 name에 Alex가 제대로 먹히는 것이다.

 

대체 이유가 뭘까. 고민했는데 클래스 Person에 Container를 implements로 상속받았다고 생각했는데, 클래스 내부에서 name이 재정의 되면서 readonly 속성은 사라지고 만다.

 

그렇다면 인터페이스에 정의된 속성 혹은 메서드가 그대로 상속되려면 어떻게 해야할까?

 

interface Container {
    readonly name: string;
    readonly age: number;
}

class Person implements Container {
    name: string;
    age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;

        console.log(`${this.name} is ${this.age} years old.`)
    }
}

let one: Container = new Person('Alex', 30)
one.name = 'Alex';

 

위의 예제처럼 Person 클래스를 인스턴스로 생성한 변수 one에 해당 인터페이스를 타입으로 지정하면 해결된다!

바로 one.name = 'Alex' 에 빨간줄이 그어지면서 에러가 뜰 것이다.