[TypeScript] 타입스크립트 인터페이스 사용방법 및 Type과 차이점

2023-03-15

---

사진: Unsplash 의 Brian Breeden

---

1. 방법

 

사용 방법은 아래와 같다. interface는 대부분 type 키워드와 동일한 역할을 하지만, Object 객체 타입을 명시할 때 사용하는 경우가 많다.

 

interface Person {
  firstName: string;
  lastName: string;
}


function greeter(person: Person) {
  return "Hello, " + person.firstName + " " + person.lastName;
}

---

객체 지향적인 언어를 사용해 봤다면 interface를 class가 받아 구현체로 사용할 수도 있다. 여기서 키워드 implements 를 사용하는데 type 역시 해당 키워드 사용이 가능하다.

 

class Player implements Person{
    firstName = "hi"
    lastName = "ho"
}

---

함수 형태의 필드를 가지는 interface 역시 class가 받아 구현체의 역할을 할 수 있다.

 

interface Pingable {
  ping(): void;
}
 
class Sonar implements Pingable {
  ping() {
    console.log("ping!");
  }
}

---

type 과 interface의 가장 큰 차이점은 아래와 같다. type의 경우 중복 선언이 불가한 반면 interface는 중복 선언이 가능하다. 추가적으로 인터페이스가 중복 선언된다고 해서 기존에 인터페이스 내부에 존재하는 필드가 제거되고 새로운 필드로 교체되는 것이 아닌 합쳐 지기 때문에 선언 시 사용된 모든 필드를 사용할 수 있다. 

 

type Pingable1 = { //error Duplicate identifier 'Pingable1'.
  ping(): void;
}

type Pingable1 = { //error Duplicate identifier 'Pingable1'.
 name : string;
} 


interface Pingable2 {
  ping(): void;
}

interface Pingable2 {
 name : string;
}

 

위 예제에서는  ping(): void; 이후  name : string; 가 들어간 interface 가 선언 되었는데, ping(): void; 가 사라지고 name : string; 가 교체 되는 것이 아닌 name : string; 기존에 Pingable2에 추가된다고 볼 수 있다. 내부 적으로는 아래와 같은 모양을 가지게 된다고 생각하면 된다.

 

interface Pingable2 {
  ping(): void;
  name : string;
}

---

메인 이미지 출처 : 사진: Unsplash의Brian Breeden