Interface

인터페이스란?

• 상호 간의 정의한 약속 혹은 규칙을 의미
• 인터페이스에 선언된 프로퍼티 또는 메소드의 구현을 강제하여 일관성을 유지할 수 있도록 하는 것

인터페이스 선언

interface [인터페이스 이름] {
	[필드1 이름]: [필드1 타입];
   	[필드2 이름]: [필드2 타입];
	.
    .
    .
}

필드 타입은 일반적으로 TypeScript에서 제공하는 모든 기본 타입 사용가능

interface KeyPair {
    key: number;
    value: string;
}

Interface 필드 타입

Type Alias 처럼 Interface를 필드 타입으로 사용가능

interface Dimension {
    width: string;
    height: string;
}

interface Button {
	size: Dimension;
    color: string;
}

Array 필드 타입

필드 타입 뒤에 []를 붙여 배열형태로 타입 지정가능

interface Post {
  title: string;
  content: string;
  tags: string[];
}

함수형 필드 타입

인터페이스의 필드로 선언식 함수와 표현식 함수모두 정의 가능

선언식 함수

interface OnInit {
  onInit(): void;
  initialize(): void;
}

표현식 함수

interface Button {
  onInit: () => void;
  onClick: (e: Element) => void;
}

속성

인터페이스 필드의 줄수 있는 속성으로 인터페이스 개념에만 국한되는 내용은 아님

옵션 속성

인터페이스 필드에 옵션 속성을 주게되면 인터페이스를 구현하는 구현체가 해당 필드에 대한 내용을 반드시 정의하지 않아도 됨

속성 이름 뒤에 ? 기호가 붙으면 옵션 속성

interface Button {
  onInit?(): void;
  onClick(): void;
}

Button 인터페이스를 구현한 구현체는 반드시 onInit()을 구현하지 않아도 됨
하지만 onClick() 은 옵션속성이 아니므로 반드시 구현 해야함

읽기전용 속성

일부 속성은 처음 만들어 질 때 외에는 수정할 수 없도록 설정하고 싶을 때 사용

속성의 이름 앞에 readonly를 넣어 설정

interface Notebook { 
  readonly CPU: string; 
  readonly RAM: string;
};

Notebook을 구현한 구현체는 처음 값을 할당한 후부터 변경 불가

인터페이스 구현

인터페이스는 크게 class 나 객체에 구현이 가능

인터페이스와 클래스

인터페이스는 클래스와 비슷 하지만 클래스와 달리 정의만 할 뿐 실제 구현되지 않음
어떠한 객체를 생성 했을 때 가져야 할 속성 또는 메서드를 정의(추상 클래스와 유사)

class [클래스 이름] implements [인터페이스 이름] { ... }

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

class YButton implements Button {
  width:number;
  height:number;
  
  constructor(width, height) {
    this.width = width;
    this.height = height;
  }
  
  onInit(): void { 
  	console.log("onInit");
  }
  
  // onClick을 구현하지 않았기 때문에 컴파일 과정에서 오류
}

클래스 YButton에 implements 키워드를 사용해 정의된 Button 인터페이스를 설정
인터페이스가 설정된 클래스에서 인터페이스가 요구하는 것을 구현하지 않을 경우, TypeScript 컴파일 과정에서 오류 발생

인터페이스와 객체 리터럴

클래스 선언 과정에서 implements 키워드를 사용해 명시적으로 인터페이스를 설정하는 방법이 아니어도, 객체 리터럴에 인터페이스를 설정가능
인터페이스가 설정된 객체는 요구 조건을 충족하지 못할 경우 오류를 출력

interface OnInit {
  onInit():void;
  initialize():void;
}

const o: OnInit = {
  onInit(): void { console.log("onInit") },
  initialize(): void { console.log("객체 초기화") }, 
};