typescript(5) - 인터페이스

인터페이스

- JavaScript와 같은 동적 타입 언어 환경에서는 다뤄지지 않았으나, 타입스크립트는 타입 검사를 하기 때문에 인터페이스를 지원한다. 

 

예시

 

button.ts

// 인터페이스 Button 정의
interface ButtonInterface {
  onInit():void;
  onClick():void;
}

//사용자 정의 타입 : Type Alias
type ButtonType = {
  onInit():void;
  onClick():void;
}

언뜻보면 사용자 정의 타입과 비슷해보임

 

 

인터페이스는 하지만 선언을 병합하고 중복하는 것이 가능하다. 반면, 사용자 정의 타입은 선언이 중복되면 오류가 나게 된다.

 

인터페이스 = 중복 선언가능 

 

예시

 

ButtonInterface.ts

interface ButtonInterface {
  onInit():void;
  onClick():void;
}

...

interface ButtonInterface {
  onToggle():void;
}

 

사용자 정의 타입 예시

- 중복되면 오류 뜸

 

ButtonType.ts

type ButtonType = {
  onInit():void;
  onClick():void;
}

// [오류]
// 'ButtonType' 식별자가 중복되었습니다.
type ButtonType = {
  onToggle():void;
}

 

 

인터페이스와 클래스의 관계 

- 인터페이스에서 implements 키워드를 통해서 클래스가 인터페이스에서 정의된 실행 규칙을 따르도록 설계한다. 

- 인터페이스가 설정된 클래스에서 인터페이스가 요구하는 것을 구현하지 않을 경우, TypeScript는 컴파일 과정에서 오류를 발생시킨다.

- 이렇게 인터페이스는 클래스와 비슷한 구조를 가지지만, 클래스와 달리 정의만 될 뿐 실제 구현되지는 않는다. 즉, 객체를 객체를 생성 했을 때 가져야 할 속성 또는 메서드를 정의한다고 보면된다. 

 

// 인터페이스 Button 정의
interface ButtonInterface {
  onInit():void;
  onClick():void;
}

// 클래스 Y9Button 인터페이스 Button 확장
class Y9Button implements ButtonInterface {

  width:number;
  height:number;
  
  constructor(width, height) {
    this.width = width;
    this.height = height;
  }
  
  // [오류]
  // 'Y9Button' 클래스가 'Button' 인터페이스를 잘못 구현합니다.
  // 'onInit' 속성이 'Y9Button' 형식에 없습니다.

}

 

 

인터페이스와 매개변수의 관계

- 매개변수에도 인터페이스를 설정하는 것이 가능함. 인터페이스가 설정된 매개변수는 클래스와 마찬가지로 인터페이스에 정의된 요구 사항을 충족해야 합니다. 충족하지 못할 경우, TypeScript는 컴파일 과정에서 오류를 발생 시킨다. 

 

// onInit(), initialize() 메서드가 필요함을 정의한 인터페이스
interface OnInitInterface {
  onInit():void;
  initialize():void;
}
​
// 인터페이스 요구 조건에 충족하는 객체
const o = {
  onInit():void { console.log('onInit 라이프 사이클') },
  initialize():void { console.log('객체 초기화') }  
};

// 인터페이스 요구 조건에 충족하지 않은 객체​
const j = {
  settings():void { console.log('객체 설정') }
};
​
// 매개변수에 인터페이스가 설정된 함수
function ready(m:OnInitInterface):void {
  m.onInit();
  m.initialize();
}
​
// 전달된 객체 o는 OnInitInterface 인터페이스 요구 조건을 충족
ready(o);

// [오류]
// '{ settings(): void; }' 형식의 인수는 'OnInitInterface' 형식의 매개 변수에 할당될 수 없습니다.
// 'onInit' 속성이 '{ settings(): void; }' 형식에 없습니다.
ready(j);