TypeScript - Readonly 프로퍼티: 초보자 가이드

안녕하세요, 미래의 코딩 슈퍼스타! 오늘 우리는 TypeScript의 fascinile 세계로 뛰어들어 그 강력한 기능之一인 readonly 프로퍼티를 탐구해보겠습니다. 프로그래밍에 처음이라면 걱정 마세요; 저는 이 흥미로운 여정에서 당신의 친절한 안내자가 될 거예요. 그러니 좋아하는 음료를 한 잔 마시고 편안하게 자리 잡고, 이 TypeScript 어드벤처를 함께 시작해봅시다!

TypeScript - Readonly Properties

Readonly 프로퍼티는 무엇인가요?

정밀한 부분으로 들어가기 전에, readonly 프로퍼티가 무엇인지 이해해보겠습니다. 가족의 소중한 유산을 생각해보세요 - 예를 들어, 아름다운 고대 시계입니다. 당신은 그것을 보고 감상할 수 있지만, 바꿀 수는 없습니다. 그게 precisely TypeScript에서 readonly 프로퍼티의 개념입니다 - 볼 수고 사용할 수 있는 값이지만, 설정한 후에는 수정할 수 없습니다.

문법

먼저 기본적인 부분부터 시작해보겠습니다. readonly 프로퍼티를 어떻게 선언할까요? readonly 키워드를 프로퍼티 이름 앞에 추가하는 것만으로 충분합니다. 다음은 기본적인 예제입니다:

class Heirloom {
readonly name: string;

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

const familyWatch = new Heirloom("할아버지의 시계");
console.log(familyWatch.name); // 출력: 할아버지의 시계
// familyWatch.name = "새 시계"; // 오류! readonly 프로퍼티를 수정할 수 없습니다

이 예제에서, 생성자에서 name을 설정한 후에는 나중에 바꿀 수 없습니다. 그것은 우리의 가족 유산의 이름을 시간에 sealed하는 것과 같습니다!

인터페이스와 readonly 프로퍼티

TypeScript의 인터페이스는 객체의 블루프린트와 같습니다. 인터페이스에서도 readonly 프로퍼티를 사용할 수 있습니다. 어떻게 보이는지 살펴보겠습니다:

interface ReadonlyPerson {
readonly name: string;
readonly age: number;
}

const person: ReadonlyPerson = {
name: "Alice",
age: 30
};

console.log(person.name); // 출력: Alice
// person.age = 31; // 오류! readonly 프로퍼티를 수정할 수 없습니다

여기서 우리는 ReadonlyPerson 인터페이스를 만들었으며, name과 age 모두 readonly입니다. 이 인터페이스를 기반으로 객체를 만들면, 이 프로퍼티를 변경할 수 없습니다. 신분증을 만드는 것처럼, 인쇄된 후에는 나이를 지우고 새로운 것을 쓸 수 없습니다!

클래스와 readonly 프로퍼티

클래스는 데이터와 동작을 가진 객체를 만드는 블루프린트입니다. readonly 프로퍼티가 클래스에서 어떻게 작동하는지 살펴보겠습니다:

class Book {
readonly title: string;
readonly author: string;
private _pageCount: number;

constructor(title: string, author: string, pageCount: number) {
this.title = title;
this.author = author;
this._pageCount = pageCount;
}

get pageCount(): number {
return this._pageCount;
}

addPages(pages: number) {
this._pageCount += pages;
}
}

const myBook = new Book("TypeScript 101", "Jane Doe", 200);
console.log(myBook.title); // 출력: TypeScript 101
myBook.addPages(50);
console.log(myBook.pageCount); // 출력: 250
// myBook.title = "JavaScript 101"; // 오류! readonly 프로퍼티를 수정할 수 없습니다

이 예제에서 title과 author은 readonly이지만, pageCount는 메서드를 통해 여전히 수정할 수 있습니다. 책은 인쇄된 후 제목이나 저자를 변경할 수 없지만, 페이지를 추가할 수 있습니다(예를 들어, 개정판).

타입 별칭과 readonly 프로퍼티

타입 별칭은 타입의 별명과 같습니다. readonly 프로퍼티를 타입 별칭과 함께 사용할 수도 있습니다:

type ReadonlyPoint = {
readonly x: number;
readonly y: number;
};

const point: ReadonlyPoint = { x: 10, y: 20 };
console.log(point.x, point.y); // 출력: 10 20
// point.x = 30; // 오류! readonly 프로퍼티를 수정할 수 없습니다

여기서 우리는 ReadonlyPoint 타입을 만들었으며, x와 y 모두 readonly입니다. 지도에 좌표를 설정하는 것처럼, 한 번 설정된 후에는 좌표를 이동할 수 없습니다!

const와 readonly 프로퍼티 비교

이제 perhaps 당신은 고민할 수 있습니다, "const와 readonly의 차이는 무엇인가요?" 훌륭한 질문입니다! 그 차이를 설명해보겠습니다:

const PI = 3.14159;
// PI = 3.14; // 오류! const 변수를 다시 할당할 수 없습니다

class Circle {
readonly radius: number;

constructor(radius: number) {
this.radius = radius;
}
}

const circle = new Circle(5);
// circle.radius = 10; // 오류! readonly 프로퍼티를 수정할 수 없습니다

const는 재할당할 수 없는 변수에 사용됩니다. readonly는 초기화된 후 수정할 수 없는 프로퍼티에 사용됩니다. const는 컨테이너를 변경하지 않겠다는 약속이고, readonly는 내용을 변경하지 않겠다는 약속입니다.

readonly을 언제 사용해야 하나요?

그렇다면 readonly 프로퍼티를 언제 사용해야 할까요? 다음은 일반적인 시나리오입니다:

초기화된 후 변경되지 않아야 하는 값이 있을 때.
변경되지 않아야 할 구성 객체가 있을 때.
큰 코드베이스에서 우연한 변경을 방지할 때.
불변 데이터 구조를 사용할 때.

다음 표는 우리가 논의한 방법을 요약합니다:

방법	설명	예제
인터페이스와 함께	객체 블루프린트에서 readonly 프로퍼티 정의	`interface ReadonlyPerson { readonly name: string; }`
클래스에서	클래스 프로퍼티를 초기화 후 변경 불가하게	`class Book { readonly title: string; }`
타입 별칭과 함께	커스텀 타입에서 readonly 프로퍼티 정의	`type ReadonlyPoint = { readonly x: number; readonly y: number; }`
const과 readonly 비교	변수와 프로퍼티의 차이 비교	`const PI = 3.14; class Circle { readonly radius: number; }`

기억해 두세요, readonly 프로퍼티를 사용하는 것은 미래의 자신과 다른 개발자들에게 규칙을 설정하는 것입니다. 이는 실수를 방지하고 코드가 예측 가능하고 유지보수 가능하게 만듭니다.

그리고 여러분, readonly 프로퍼티의 땅을 함께 여행했습니다. 이 가이드가 여러분의 길을 밝혔기를 바랍니다. 연습이 완벽을 만든다는 것을 기억하고, 이 개념들을 자신의 프로젝트에서 실험해보지 마세요. 행복한 코딩을 기원하며, readonly 프로퍼티가 항상 그 가치를 지킬 수 있기를 바랍니다!

Credits: Image by storyset