노트

TypeScript 클래스 문법

Classes in TypeScript

프런트엔드#ts · 연결된 개념 8개

쉽게 말하면

TypeScript 클래스 문법은 건물에 '직원만', '임원층까지' 같은 출입 구역 표시를 붙이듯, 클래스 멤버를 누가 쓰고 바꿀 수 있는지 정하는 문법이에요. 규칙을 어기면 컴파일할 때 잡아 줘요.

비유가 깨지는 곳 표시는 설계도에만 있고 완성된 건물인 출력 JS에서는 대부분 사라져요. TS의 private은 컴파일 타임 검사일 뿐이라, 런타임까지 숨기려면 JS 표준의 비공개 필드 문법을 써야 해요.

TypeScript는 JavaScript 클래스에 접근 제어자(Access Modifier), readonly, 추상 클래스(Abstract Class), 생성자 매개변수 프로퍼티(Parameter Properties) 같은 타입 수준 문법을 더한다. 이들은 컴파일 때 검사에만 쓰이고, 출력 JS에서는 대부분 사라진다.

abstract class Department {
  protected employees: string[] = []
  static fiscalYear = 2026
  constructor(private readonly id: string, public name: string) {} // 선언+초기화 한 번에
  abstract describe(): void                                      // 자식이 반드시 구현
}
class ITDepartment extends Department {
  describe() { console.log(`IT ${this.name}`) }
}
  • public(기본) / private(선언한 클래스 안에서만) / protected(자식 클래스까지). TS의 private은 컴파일 타임 검사일 뿐이다. 런타임까지 숨기려면 JS의 #field를 쓴다
  • readonly는 초기화 후 재할당을 막는다. 안쪽 객체의 내용까지 막지는 않는다
  • getter/setter로 private 필드 접근에 검증 로직을 넣는다. 변수·컬렉션 캡슐화과 같은 목적이다
  • static 멤버는 인스턴스가 아니라 클래스로 접근한다(Department.fiscalYear)
  • abstract 클래스는 인스턴스로 만들 수 없고, 추상 메서드의 구현을 자식에게 강제한다. 흐름은 부모가, 단계는 자식이 정하면 템플릿 메서드가 된다
  • 생성자를 private으로 막고 static getInstance()로만 만들면 싱글턴이다
  • implements로 interface 모양을 지키는지 검사할 수 있다(type과 interface). 클래스 상속이 깊어지면 상속보다 위임를 떠올린다

연결된 개념

이 노트를 가리키는 문서

뜻이 가까운 노트

  • tsconfig 핵심 옵션

    tsconfig.json은 TypeScript 컴파일러(tsc)에게 어떤 파일을, 어떤 규칙으로 검사하고, 무엇을 출력할지 알려 주는 프로젝트 설정 파일이다. tsc --init으로 만들고, 이 파일이 있으면 tsc만 쳐도 프로젝트 전체를 컴파일한다(-w는 감시 모드, watch mode).

  • TypeScript 데코레이터

    데코레이터(Decorator)는 클래스나 그 멤버 선언 앞에 @표현식을 붙여, 정의 시점에 대상을 감싸거나 메타데이터를 등록하는 문법이다. 기존 코드를 고치지 않고 기능을 덧붙인다는 점에서 데코레이터 패턴과 생각이 같다.

  • 기본형 집착

    전화번호·금액·우선순위 같은 도메인 개념을 끝까지 문자열이나 숫자로만 다루는 냄새. 같은 검증과 포맷 코드가 여기저기 반복되고, 문자열로 모든 걸 표현하는 "stringly typed" 코드가 된다.

  • 추상 기반 클래스 (ABC)

    추상 기반 클래스(Abstract Base Class, ABC)는 자식 클래스가 반드시 구현해야 할 메서드를 선언해 두는 클래스다. 추상 메서드를 하나라도 구현하지 않은 클래스는 인스턴스를 만들 때 TypeError가 난다.

  • 구조적 타이핑

    구조적 타이핑(Structural Typing)은 타입의 이름이 아니라 모양(가진 속성과 그 타입)이 맞으면 호환된다고 보는 타입 시스템이다. TypeScript가 이 방식을 쓴다. Java처럼 선언된 이름과 상속 관계로 판단하는 방식은 명목적 타이핑(Nominal Typing)이라 한다.

보기 옵션