> For the complete documentation index, see [llms.txt](https://yamoo9.gitbook.io/typescript/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://yamoo9.gitbook.io/typescript/interface/classes.md).

# 인터페이스와 클래스

## 클래스 이행 규칙 <a href="#implement-rules" id="implement-rules"></a>

인터페이스는 클래스와 비슷한데, 클래스와 달리 **정의만 할 뿐 실제 구현되지 않습니다.** 즉, 어떠한 객체를 생성 했을 때 가져야 할 속성 또는 메서드를 정의한다고 보면 됩니다. ([추상 클래스](/typescript/classes/abstract-class.md)와 유사해보입니다)

클래스 Y9Button에 `implements` 키워드를 사용해 정의된 ButtonInterface 인터페이스를 설정할 수 있습니다. 이는 클래스가 인터페이스에 정의된 실행 규칙을 따라야 함을 선언한 것입니다. 인터페이스가 설정된 클래스에서 인터페이스가 요구하는 것을 구현하지 않을 경우, TypeScript는 컴파일 과정에서 오류를 발생 시킵니다.

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

// 클래스 Y9Button 인터페이스 Button 확장
class Y9Button implements ButtonInterface {

  width:number;
  height:number;
  
  constructor(width, height) {
    this.width = width;
    this.height = height;
  }
  
  // [오류]
  // 'Y9Button' 클래스가 'Button' 인터페이스를 잘못 구현합니다.
  // 'onInit' 속성이 'Y9Button' 형식에 없습니다.

}
```

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

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

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

{% embed url="<https://www.typescriptlang.org/docs/handbook/interfaces.html>" %}
TypeScript - 인터페이스
{% endembed %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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/classes.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.