# 인터페이스

## 인터페이스 vs 커스텀 타입 <a href="#interface-vs-custom-type" id="interface-vs-custom-type"></a>

인터페이스는 JavaScript와 같은 동적 타입 언어 환경에서는 다뤄지지 않았습니다. 하지만 정적 타입 언어인 TypeScript에서는 타입 검사가 요구 되므로  인터페이스를 지원합니다. 인터페이스는 `interface` 키워드를 사용해 다음과 같이 정의합니다.

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

[사용자 정의 타입(Type Alias)](https://yamoo9.gitbook.io/typescript/types/custom)과 유사해보입니다.

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

다소 비슷해보이는 것은 사실이나 사용자 정의 타입이 할 수 없는 것을 인터페이스는 할 수 있습니다. 할 수 있는 것 중 하나는 **인터페이스는 선언을 병합**할 수 있다는 점입니다.

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

...

interface ButtonInterface {
  onToggle():void;
}
```

반면 사용자 정의 타입은 선언이 중복되면 오류입니다.

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

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

## 실습 <a href="#practice" id="practice"></a>

Hero 인터페이스에 사용된 `?`는 [옵션 설정](https://yamoo9.gitbook.io/typescript/interface/optional-properties)을 참고하세요.

{% embed url="<https://stackblitz.com/edit/ts-interface-vs-type?embed=1&file=index.ts&hideExplorer=1&hideNavigation=1&view=editor>" %}

## 참고 <a href="#reference" id="reference"></a>

{% embed url="<https://medium.com/@martin_hotell/interface-vs-type-alias-in-typescript-2-7-2a8f1777af4c>" %}
인터페이스와 사용자 정의 타입의 차이점을 자세히 다루는 글입니다. 참고하세요.
{% endembed %}
