본문 바로가기
C.W.K.
Stream
Lesson 01 of 06 · published

클래스 문법: 상태와 동작을 한 경계에 묶기

~9 min · classes, syntax, members

Level 0Curious
0 XP0/93 lessons0/23 achievements
0/100 XP to next level100 XP to go0% complete
"클래스는 객체를 찍는 틀이기 전에, 상태를 누가 어떻게 바꿀 수 있는지 정하는 경계야."

인스턴스가 가질 모양 선언하기

TypeScript 클래스에서는 필드를 먼저 선언하고 생성자에서 초기화하는 흐름이 기본이야. Counter 클래스의 count 필드에 초기값을 바로 줄 수도 있고, 생성자 인자로 받아 넣을 수도 있어. this는 현재 인스턴스를 가리키므로 메서드마다 같은 상태를 공유하지.

strictPropertyInitialization이 켜져 있으면 컴파일러는 필드가 생성 과정에서 반드시 값이 생기는지 확인해. 나중에 채울 거라는 막연한 약속 대신 생성자에서 초기화하거나, 실제로 선택적인 필드라면 타입에 ?undefined를 드러내야 해.

getter와 setter

get elapsed(): number처럼 getter는 프로퍼티처럼 읽히지만 내부에서 값을 계산해. setter는 대입 문법을 메서드 호출로 연결하고 입력을 검사할 수 있어. 둘은 실행되는 클래스 멤버이므로 타입만 남기고 지워지는 선언이 아니야.

클래스 선언은 값과 인스턴스 타입을 함께 만들어

class Counter {
  count: number = 0;
  increment(): void { this.count++ }
  reset(): void { this.count = 0 }
}

클래스 선언은 생성자 값 Counter와 인스턴스 타입 Counter를 동시에 만들어. const c: Counter = new Counter()에서 왼쪽은 타입 이름이고 오른쪽은 생성자 호출이야.

클래스의 핵심은 문법 묶음이 아니라 상태 변경의 소유권이야. 필드, 생성자, 메서드가 같은 불변식을 지킬 때 클래스가 좋은 경계가 돼.

Code

Class 기본 — 필드, constructor, method, accessor·typescript
class User {
  name: string;
  email: string;
  active: boolean = true;

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

  greet(): string {
    return `Hi, ${this.name}`;
  }

  // Getter
  get isActive(): boolean {
    return this.active;
  }

  // Setter
  set isActive(v: boolean) {
    this.active = v;
    console.log(`active changed to ${v}`);
  }
}

const u = new User('Pippa', 'pippa@example.com');
u.greet();              // 'Hi, Pippa'
u.isActive;             // true (getter 통해)
u.isActive = false;     // setter 가 'active changed to false' 로깅

External links

Exercise

start, stop, reset 메서드와 get elapsed(): number 접근자를 가진 Stopwatch를 작성해. 시작 시각을 내부 상태로 두고, 메서드 호출 뒤에도 인스턴스 타입이 유지되는지 확인해.
Hint
시작 시각은 number | null 필드로 두면 돼. 실행 중이면 현재 시각과의 차이를 계산하고, 멈춘 상태라면 0을 반환해.

Progress

Progress is local-only — sign in to sync across devices.
이 페이지에서 버그를 발견하셨거나 피드백이 있으세요?문제 신고

댓글 0

🔔 답글 알림 (로그인 필요)
로그인댓글을 남기려면 로그인해 주세요.

아직 댓글이 없어요. 첫 댓글을 남겨보세요.