객체의 구조를 설명해 줍니다

기본적인 사용 예시

인터페이스는 아래와 같이 사용가능합니다.

interface Greetable {
  name: string;
  greet(phrase: string): void;
}

설정해준 인터 페이스는, 변수의 타입으로 할당해 아래와같이 사용해 줄 수 있습니다


let user1: Greetable;

user1 = {
  name: "lee",
  greet(phrase) {
    console.log(`${phrase} ${this.name}`);
  },
};

인터페이스와 타입

인터페이스와 타입 자체에서 큰 차이가 없어보이나, 이 둘은 사용 목적에 있어서 어느정도 차이점이 보입니다. 인터페이스는 오직 객체의 구조를 설명하기 위해서만 사용되나 후자의 경우에는 인터페이스보다는 유연한 구조를 가지고 있습니다.

인터페이스와 클래스

인터페이스는 아래와 같이 클래스와 함께 사용 가능하며, 아래와같은 형태를 보이고 있습니다.

class Person implements Greetable {

}

상속과, 인터페이스의 차이는 전자의 경우 한개만 상속 받을 수 있는 반면 인터페이스는 콤마를(,) 이용해 여러개를 상속 받을 수 있으며, 인터페이스간의 서로 상속도 가능합니다

interface Named {
  readonly name: string;
}

interface Greetable {
  greet(phrase: string): void;
}

class Person implements Greetable, Named {
  name: string;
  constructor(n: string) {
    this.name = n;
  }

  greet(phrase: string) {
    console.log(`${phrase} ${this.name}`);
  }
}

인터페이스간의 상속은 아래와같습니다. 만약 읽기전용 속성의 이름을 속성으로 받는 인터페이스와, 메소드를 지닌 인터페이스가 존재하는 경우 아래와같이 상속이 가능합니다


interface Named {
  readonly name: string;
}

interface Greetable extends Named {
  greet(phrase: string): void;
}

class Person implements Greetable {
  name: string;
  constructor(n: string) {
    this.name = n;
  }

  greet(phrase: string) {
    console.log(`${phrase} ${this.name}`);
  }
}

함수타입의 인터페이스

함수 구조 역시 인터페이스를 이용해서 정의해줄 수 있습니다. 함수의 경우에는 타입 키워드를 이용해서도 정의가 가능합니다 . 두개의 숫자인자를 받아 숫자를 리턴하는 함수입니다.