인터페이스 주의사항

인터페이스에 메소드만 선언할 수 있는 것이 아니며

멤버변수 또한 선언이 가능하다고 했습니다

근데 , 여기서 주의할 점이 있습니다

아래의 인터페이스가 있고 이걸 구현한다고 했을 때

interface test {
  something: number;
  print(): void;
}

1. 인터페이스에 private을 사용해 봅시다

우선 , 인터페이스에서는 유형의 구조 및 기능에만 관심이 있기 때문에 private같은 접근제어자를 사용하지 못 합니다

interface test {
  private something: number; //error
  print(): void;
}

그래서 만약 외부에서 읽기만 가능하고

수정만 막기 위함이 목적이라면 readonly를 사용합니다

interface test {
  something: number;
  print(): void;
}

class Testimpl implements test { 
  
  **readonly** something: number;

  constructor(something: number) {
    this.something = something;
  }

  print(): void {
    console.log(this.something);
  }
}

2. 그게 아니라 내부에서만 수정하고 외부에선 읽지도 못하게 하려면 private을 사용해야 합니다 인터페이스에서는 못 썼으니까 구현하는 멤버변수에다가 private를 작성합니다

interface test {
  something: number;
  print(): void;
}

// 구현
class Testimpl implements test { 
  **//error**
  private something: number;
  
  constructor(something: number) {
    this.something = something;
  }

  print(): void {
    console.log(this.something);
  }
}

test인터페이스의 something은 public
Testimpl 클래스의 something은 private 그러므로 에러가 발생합니다

이럴 때 해결책으로 사용할 수 있는 것이 getter와 setter입니다

interface test {
  something: number;
  print(): void;
}

class Testimpl implements test {

	// 언더바 사용
  private _something: number;

  constructor(something: number) {
    this._something = something;
  }

 // getter 사용
  get something() {
    return this._something;
  }

  print(): void {
    console.log(this._something);
  }
}

const test = new Testimpl(10);

• 기존의 바램대로 private으로 멤버변수를 선언하고
• 이 변수에 대한 getter를 따로 작성 해 주면 됩니다

이렇게 되면 에러를 막을 수 있습니다

💡 반드시 언더바 규약을 지켜야 합니다. 언더바 규약이 지켜지지 않으면 에러가 발생합니다

그리고 1번의 readonly만 사용해 버리면,

구현하는 클래스 내부에서도 변수의 값을 못 바꿔주게 됩니다

그래서 이렇게 readonly + private을 같이 사용해도 됩니다

• 인터페이스의 something은 기본적으로 읽기만 가능하지만
• 선택적으로 구현 클래스에서 private을 사용해서 내부에서만 이 값을 수정할 수 있는 것입니다
  

interface test {
  **readonly** something: number;
  print(): void;
}

class Testimpl implements test {

	// 언더바 사용
  **private** _something: number;

  constructor(something: number) {
    this._something = something;
  }

 **// getter 사용**
  get something() {
    return this._something;
  }

  print(): void {
    console.log(this._something);
  }
}

const test = new Testimpl(10);

---

출처

Property is private in type 'X' but not in type 'Y' in TS | bobbyhadz