> 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/decorator/properties.md).

# 속성 데코레이터

## 속성 데코레이터 <a href="#decorators" id="decorators"></a>

속성 데코레이터는 **속성 선언 앞에 사용**됩니다. 속성 데코레이터는 **속성 선언을 확인, 수정, 교체하는데 사용**될 수 있습니다. 앞에서 다룬 메서드, 접근 제어자와 달리 **속성 데코레이터 함수는 전달 받는 인자가 총 2가지 입니다.**

1. target: `any`
2. prop: `string`

속성 데코레이터 사용 예시를 살펴보겠습니다. 속성을 읽거나, 쓸 때 로그를 남기는 데코레이터를 등록해보겠습니다. ECMAScript 5의 [`defineProperty`](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty)를 사용해 속성을 관찰할 수 있도록 `get`, `set` 설정 합니다.

```typescript
// logProp 속성 데코레이터 정의
function logProp(t:any, p:string) {

  // 속성 값
  let v = t[p];

  // getter 속성
  let getter = function() {
    console.log(`GET: ${p} => ${v}`);
    return v;
  }

  // setter 속성
  let setter = function(new_v:any) {
    v = new_v;
    console.log(`SET: ${p} => ${v}`);
  }


  // 속성 값을 제거한 후,
  if (delete t[p]) {
    // 새 속성 정의
    Object.defineProperty(t, p, {
      // getter 속성 연결
      get: getter,
      // settert 속성 연결
      set: setter,
      enumerable: true,
      configurable: true
    });
  }

}
​
// Button 클래스
class Button {

  // logProp 속성 데코레이터 사용
  @logProp
  type:string = 'button';
  
  @logProp
  version:string = '0.0.2';

  // 생성자
  constructor(public el:HTMLButtonElement){}
​
}
```

Button 객체를 생성하는 구문을 작성한 후, 인스턴스 참조 변수에 할당 합니다.&#x20;

type 속성을 읽고, 쓰는 시도를 코드로 작성하면

```typescript
// Button 객체 인스턴스 생성
const btn = new Button( document.querySelector('.button') as HTMLButtonElement );

// btn.type 읽기 시도
console.log(btn.type);

// btn.type 쓰기 시도
btn.type = '버튼';
```

결과는 Console 에 다음과 같이 출력됩니다. 사용자가 속성을 읽거나 쓰려고 시도할 때 마다 로그를 남깁니다.

{% code title="Console" %}

```typescript
// getter
GET: type => button
typescript.js:54 button

// setter
typescript.js:20 SET: type => 버튼
```

{% endcode %}

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

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

{% embed url="<https://www.typescriptlang.org/docs/handbook/decorators.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, and the optional `goal` query parameter:

```
GET https://yamoo9.gitbook.io/typescript/decorator/properties.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.