클래스 기본 문법

같은 모양의 객체를 여러 개 만들고, 그 객체마다 같은 동작을 붙이고 싶을 때 클래스(class)를 씁니다. 자바스크립트는 원래 프로토타입(prototype)으로 객체가 동작을 나누어 쓰는 언어이고, ES2015부터는 이를 더 읽기 쉽게 적는 class 문법을 제공합니다. 타입스크립트는 이 문법 위에 속성과 매개변수의 타입, 멤버에 접근할 수 있는 범위를 더합니다.

이 글은 클래스를 선언하고 인스턴스를 만드는 기본 문법에서 시작해, 생성자와 setter가 서로 다른 시점에 실행된다는 점을 확인합니다. 이어서 멤버의 접근 범위를 짧게 소개하고, 인스턴스가 아니라 클래스 자체에 속하는 static 멤버를 봅니다. 예제는 ts-first 프로젝트에 classes.ts를 만들고 include를 그 파일로 바꾸어 확인합니다.

클래스 선언과 인스턴스 생성

클래스는 class 키워드와 이름으로 선언하며, 이름은 보통 첫 글자를 대문자로 쓰는 파스칼 케이스(PascalCase)로 짓습니다. 클래스 안에는 객체의 상태를 담는 속성(property)과, 객체를 처음 만들 때 실행되는 생성자(constructor), 객체의 동작인 메서드(method)를 적습니다.

class Person {
  name: string;
  age: number;
  private _job: string;

  constructor(name: string, age: number, job: string) {
    this.name = name;
    this.age = age;
    this._job = job;
  }

  greet(): string {
    return `안녕하세요, ${this.name}입니다. 저는 ${this.age}살이고 ${this._job}입니다.`;
  }

  get job(): string {
    return this._job;
  }

  set job(newJob: string) {
    if (newJob.length < 2) {
      console.log("직업명은 2글자 이상이어야 합니다.");
      return;
    }
    this._job = newJob;
  }
}

const person1 = new Person("김철수", 30, "개발자");
const person2 = new Person("이영희", 25, "디자이너");

console.log(person1.name, person1.age);
console.log(person1.greet());
console.log(person2.job);

person2.job = "마케터";
console.log(person2.greet());
person2.job = "SE";
console.log(person2.job);

김철수 30
안녕하세요, 김철수입니다. 저는 30살이고 개발자입니다.
디자이너
안녕하세요, 이영희입니다. 저는 25살이고 마케터입니다.
SE

new Person(...)은 새 객체를 만들고 생성자를 실행해, 넘긴 값을 그 객체의 속성에 저장한 뒤 돌려줍니다. 생성자와 메서드 안의 this는 지금 만들고 있는 객체나, 메서드를 부를 때 거친 객체를 가리키므로, person1과 person2는 같은 클래스로 만들었어도 각자의 상태를 따로 가집니다. 아래 그림은 이 생성 과정과 두 인스턴스의 상태를 단계별로 보여 줍니다.

get job()과 set job()은 접근자(accessor)라고 부르는, 속성처럼 읽고 쓰지만 실제로는 함수가 실행되는 멤버입니다. person2.job을 읽으면 getter가 _job을 돌려주고, person2.job = "마케터"처럼 값을 넣으면 setter가 길이를 검사한 뒤 _job을 바꿉니다. "SE"는 두 글자여서 검사를 통과하므로 그대로 저장됩니다.

속성을 선언만 하고 값을 넣지 않으면, strict에 포함된 strictPropertyInitialization이 이를 알려 줍니다. 예를 들어 생성자에서 this.age = age;를 빠뜨리면 Property 'age' has no initializer and is not definitely assigned in the constructor.라는 TS2564가 나옵니다. 속성은 선언할 때 초기값을 주거나 생성자에서 반드시 값을 넣어야 합니다.

생성과 변경은 다른 코드를 거친다

setter의 길이 검사는 값을 넣을 때만 실행됩니다. 생성자는 _job에 바로 저장하므로, 같은 값이라도 어느 경로로 들어오느냐에 따라 결과가 달라집니다. 앞의 코드에 이어서 다음을 실행해 봅니다.

person1.job = "한";
console.log(person1.job);

const shortJobPerson = new Person("민지", 20, "한");
console.log(shortJobPerson.job);

직업명은 2글자 이상이어야 합니다.
개발자
한

첫 대입은 setter가 안내 문구를 출력하고 return하므로 person1의 직업은 개발자로 남습니다. 하지만 생성자에는 같은 검사가 없어서, new Person("민지", 20, "한")은 한 글자 직업을 그대로 저장합니다. 지켜야 할 조건이 있다면 생성자와 setter가 같은 검증 함수를 함께 쓰도록 만들어야 하며, 이 예제의 Person은 아직 그렇게 완성된 모델이 아닙니다.

더 깊이: 클래스 필드는 대입이 아니라 정의다

setter를 거치지 않는 길은 생성자만이 아닙니다. 타입스크립트는 클래스 필드(class field)가 자바스크립트 표준이 되기 훨씬 전에 이 문법을 먼저 구현했고, 처음에는 foo = 100 같은 필드 선언을 생성자 안의 this.foo = 100 대입으로 바꾸어 출력했습니다. 그런데 표준으로 정해진 클래스 필드는 대입이 아니라 Object.defineProperty처럼 객체에 속성을 직접 정의하는 방식으로 동작합니다. TypeScript 3.7은 이 표준 동작으로 바꾸는 useDefineForClassFields 옵션을 들였고, Handbook은 target이 ES2022 이상이거나 이 옵션이 켜져 있으면 표준 동작을 따른다고 설명합니다. 이 교재의 target인 es2022가 여기에 해당합니다.

TypeScript 3.7 릴리스 노트는 두 동작의 차이를 두 가지로 정리합니다. 첫째, 필드는 정의로 만들어지므로 부모 클래스에 같은 이름의 setter가 있어도 그 setter가 불리지 않고 덮어써집니다. 둘째, 초기값이 없는 필드 선언도 언제나 undefined로 정의됩니다. 그래서 자식 클래스가 부모에게서 받은 속성의 타입만 좁히려고 resident: Dog;처럼 다시 선언하면, 부모 생성자가 넣어 둔 값이 super() 뒤에 undefined로 덮입니다. 출력에 아무 코드도 남기지 않고 타입만 다시 적으려면 declare resident: Dog;처럼 declare를 붙입니다.

멤버의 접근 범위

타입스크립트는 멤버마다 접근할 수 있는 범위를 접근 제어자(access modifier)로 정합니다. 아무것도 적지 않은 멤버는 어디서나 쓸 수 있는 public이고, private는 그 클래스 안에서만, protected는 그 클래스와, 그 클래스를 상속한 자식 클래스(subclass) 안에서만 쓸 수 있습니다.

class PrivateExample {
  private secretCode: string;

  constructor(code: string) {
    this.secretCode = code;
  }

  revealCode(): string {
    return `비밀 코드: ${this.secretCode}`;
  }
}

const pve = new PrivateExample("MY_CODE");
console.log(pve.revealCode());

비밀 코드: MY_CODE

클래스 밖에서 pve.secretCode를 읽으면 Property 'secretCode' is private and only accessible within class 'PrivateExample'.이라는 TS2341이 나옵니다. 다만 타입스크립트의 private는 검사에서만 접근을 막고 컴파일한 자바스크립트에서는 지워지므로, 실행 중에는 일반 속성과 같습니다. 실행 중에도 감추려면 이름 앞에 #를 붙이는 자바스크립트의 비공개 필드(private field)를 쓰며, 두 방식의 차이와 protected는 다음 글에서 자세히 봅니다.

생성자의 매개변수 앞에 접근 제어자나 readonly를 붙이면, 같은 이름의 속성을 선언하고 값을 넣는 일을 한 번에 할 수 있습니다. 이것을 매개변수 속성(parameter property)이라고 합니다.

class CompactPerson {
  constructor(public name: string, public age: number, private secretInfo: string) {}

  hint(): string {
    return `${this.secretInfo.length}글자의 비밀`;
  }
}

const compactP = new CompactPerson("김효진", 28, "비밀 일기");
console.log(compactP.name, compactP.age, compactP.hint());

김효진 28 5글자의 비밀

public name: string은 name 속성을 선언하고, 생성자가 시작할 때 this.name = name;을 실행하는 코드로 바뀝니다. 이름만 적은 매개변수는 생성자 안에서만 쓰는 지역 변수이고, 제어자를 붙여야 객체의 속성으로 남습니다. 이 문법은 새 자바스크립트 코드를 만들어 내므로, 1장에서 본 Node.js의 타입 제거 실행이나 erasableSyntaxOnly와는 함께 쓸 수 없습니다.

static 멤버

static을 붙인 멤버는 각 인스턴스가 아니라 클래스 자체에 속합니다. 그래서 new로 인스턴스를 만들지 않고 MathUtil.PI처럼 클래스 이름으로 바로 쓰며, 모든 인스턴스가 함께 쓰는 값이나 인스턴스의 상태가 필요 없는 도구 함수를 둘 때 씁니다.

class MathUtil {
  static PI: number = 3.14159;

  static calculateCircleArea(radius: number): number {
    return this.PI * radius * radius;
  }

  getInstancePi(): number {
    return MathUtil.PI;
  }
}

console.log(MathUtil.PI);
console.log(MathUtil.calculateCircleArea(5));

const util = new MathUtil();
console.log(util.getInstancePi());

3.14159
78.53975
3.14159

MathUtil.calculateCircleArea(5)는 클래스를 통해 부른 정적 메서드이므로, 그 안의 this는 클래스 자체를 가리키고 this.PI가 3.14159를 읽습니다. 인스턴스 메서드인 getInstancePi에서는 this가 인스턴스이므로 클래스 이름으로 MathUtil.PI를 읽었습니다. 정적 메서드를 인스턴스로 부른 util.calculateCircleArea(10)은 Property 'calculateCircleArea' does not exist on type 'MathUtil'. Did you mean to access the static member 'MathUtil.calculateCircleArea' instead?라는 TS2576으로 진단됩니다.

위 그림처럼 멤버가 어디에 속하는지와 어디서 접근할 수 있는지는 서로 다른 기준입니다. 인스턴스의 상태는 각 객체에, static 멤버는 클래스 객체에 속하고, public과 protected, private는 그와 별개로 접근할 수 있는 코드의 범위를 정합니다. 멤버를 설계할 때는 객체마다 다른 상태인지, 바깥에 공개할 기능인지, 클래스 전체가 함께 쓰는 도구인지를 먼저 나누면 제어자와 static을 고르기 쉽습니다.

정리

• 클래스는 속성과 생성자, 메서드를 묶어 같은 모양의 객체를 만들며, new가 생성자를 실행해 각 인스턴스의 상태를 따로 만듭니다.
• strictPropertyInitialization은 초기값도 없고 생성자에서 값을 넣지도 않은 속성을 TS2564로 알려 줍니다.
• getter와 setter는 속성처럼 쓰는 함수이며, setter의 검사는 생성자를 거치는 값에는 적용되지 않습니다.
• private와 protected는 검사에서만 접근을 막고, 실행 중에도 감추려면 # 비공개 필드를 씁니다.
• 매개변수 속성은 속성의 선언과 대입을 한 번에 하지만, 새 코드를 만드는 문법이어서 타입 제거 실행과는 함께 쓸 수 없습니다.
• static 멤버는 클래스 자체에 속해 클래스 이름으로 쓰며, 인스턴스로 부르면 TS2576이 나옵니다.

연습 문제

1. 인스턴스와 클래스의 상태

이 글의 코드를 모두 실행한 상태에서 person2.name = "지수";로 바꾸면, person1.name과 person2.greet()는 무엇을 돌려주나요? MathUtil.PI = 3;을 넣은 뒤 util.getInstancePi()는 무엇을 돌려주고, util.PI는 읽을 수 있나요?

2. 초기화하지 않은 속성

class Box { width: number; height = 10; }을 선언하면 어떤 진단이 나오나요? 이 진단을 없애는 방법을 두 가지 적어 보세요.

3. 매개변수 속성과 지역 매개변수

class Item { constructor(public title: string, price: number) {} }로 만든 new Item("펜", 1000)에서 item.title과 item.price는 각각 읽을 수 있나요?

다음 글 접근 제어자에서는 public과 private, protected가 각각 어디서 접근을 허용하는지와, 타입스크립트의 private와 자바스크립트의 # 비공개 필드가 어떻게 다른지 자세히 비교합니다.