# 읽기전용 속성

## 읽기 전용 <a href="#readonly" id="readonly"></a>

`readonly` 키워드를 사용해 클래스 속성 이름 앞에 추가하면 읽기 전용 속성이 되어 속성을 다른 값으로 쓸 수 없습니다. 다른 값을 설정하려고 시도하면 컴파일 과정에서 다음과 같은 오류 메시지를 출력합니다.

```typescript
class OnlyOne {

  private static instance:OnlyOne;

  // 읽기 전용 속성 설정
  public readonly name:string;

  private constructor(name:string) {
    this.name = name;
  }

  public static getInstance(name:string):OnlyOne {
    if (!OnlyOne.instance) {
      OnlyOne.instance = new OnlyOne(name);
    }
    return OnlyOne.instance;
  }

}


/* 인스턴스 생성 ------------------------------------------------ */

let special_one = OnlyOne.getInstance('스페셜 원');

console.log(special_one.name);

// [오류]
// [ts] 상수 또는 읽기 전용 속성이므로 'name'에 할당할 수 없습니다.
// (property) OnlyOne.name: string
special_one.name = '노멀 원';
```

{% hint style="info" %}
컴파일된 JavaScript(ES5) 코드를 살펴보면 읽기 전용 속성으로 처리되지 않는 것을 확인할 수 있습니다. **JavaScript는 읽기전용(readonly) 속성을 지원하지 않기 때문**입니다.
{% endhint %}

**컴파일 코드:**

{% code title="JavaScript" %}

```javascript
var OnlyOne = /** @class */ (function () {
  function OnlyOne(name) {
    this.name = name;
  }
  OnlyOne.getInstance = function (name) {
    if (!OnlyOne.instance) {
      OnlyOne.instance = new OnlyOne(name);
    }
    return OnlyOne.instance;
  };
  return OnlyOne;
}());


/* 인스턴스 생성 ------------------------------------------------ */

var special_one = OnlyOne.getInstance('스페셜 원');

console.log(special_one.name); // '스페셜 원'

special_one.name = '노멀 원';

console.log(special_one.name); // '노멀 원'
```

{% endcode %}

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

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

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

{% embed url="<https://www.typescriptlang.org/docs/handbook/classes.html#readonly-modifier>" %}
TypeScript - 읽기 전용 속성
{% 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/classes/readonly.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.