인터페이스와 클래스

 

TypeScript에서 인터페이스를 사용하여 클래스의 타입을 명시해주면 해당 인터페이스를 준수해야 하는 약속처럼 사용이 가능합니다. 

 

클래스의 타입을 인터페이스를 사용하여 명시할 경우의 이점을 아래 예시 코드와 함께 살펴보도록 하겠습니다.

 

 

예시 

 

interface Greetable {
  name: string;

  greet(content: string): void;
}

인터페이스 Greetable는 속성 name과 메서드 greet에 대한 타입이 위와 같이 명시되어 있습니다.

 

class Person implements Greetable {
  constructor(public name: string) {}

  greet(content: string): void {
    console.log(content + " " + this.name);
  }
}

클래스 Person에 생성한 인터페이스 Greetable를 implements 키워드를 사용하여 타입을 명시해주고 있습니다. 이때 implements를 extends의 개념으로 접근하면 좋을 것 같습니다.

 

class Person implements Greetable {
  age = 5;
  constructor(public name: string) {}

  greet(content: string): void {
    console.log(content + " " + this.name);
  }
}

implements 키워드를 사용하여 인터페이스를 사용할 경우 인터페이스에 명시된 속성 외에도 속성을 추가해줄 수 있으며, 위의 코드의 경우 인터페이스 Greetable에 없는 속성을 추가로 명시해주고 있습니다.

 

이때 클래스 Person의 속성 name를 제거할 경우 위의 타입 에러가 발생하며, 이는 인터페이스 Greetable 명시된 name 속성이 존재하지 않기 때문입니다.

 

위의 결과를 통해 클래스의 인터페이스 사용은 구체적인 구현이 아닌 서로 다른 클래스 간의 기능을 공유하기 위해 사용된다는 사실을 확인할 수 있습니다. (공통된 인터페이스를 사용하여 속성을 명시할 경우 필수 속성과 필수 메서드를 지정할 수 있기 때문입니다.)

 

 

let person1: Greetable;

person1 = new Person("rati");

위에서 생성한 클래스를 변수 person에 할당하기 전 우선 변수 person1의 타입을 명시해 줍니다. 기존의 인터페이스를 사용하여 타입을 명시해줄 경우 변수 person1은 인터페이스 Greetable에 명시된 속성 name와 메서드 greet에 대한 내용을 필수로 작성해주어야 했습니다.

 

하지만 변수 person1에 클래스 Person의 인스턴스를 할당할 경우 인터페이스 Greetable에 명시되지 않은 속성 age가 있음에도 불구하고 타입 에러는 발생하지 않습니다.

 

이는 클래스에 implements를 사용하여 인터페이스를 사용할 경우 인터페이스 내부에 명시된 속성에 대한 내용만 준수하면 되며, 추가로 확장된 속성에 대한 제약은 없다로  정리할 수 있습니다.

 

또한 위의 결과를 통해 서로 다른 클래스 간 필수 속성이나 필수 메서드에 대한 제약을 걸어줄 수 있다는 장점이 있다로 정리할 수 있습니다.