# 인터페이스

## 인터페이스 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 %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://yamoo9.gitbook.io/typescript/interface.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
