[TS] 타입스크립트 클래스(class) 문법, 추상 클래스와 메서드

클래스 정의

---

자바스크립트에선 생성자 내부에서 프로퍼티를 선언하고 초기화한다. 클래스 필드를 사용하는 경우를 제외하곤 클래스 바디에 프로퍼티를 따로 선언할 필요가 없다. 반면 타입스크립트에선 먼저 클래스 바디에 프로퍼티를 미리 선언하고 타입을 지정해야 한다. 클래스 바디에 프로퍼티를 선언하지 않으면 에러가 발생한다.

class User {
  name: string; // 프로퍼티 선언 및 타입 지정

  constructor(name: string) {
    this.name = name; // 프로퍼티 초기화
  }
}

const user = new User('John');
console.log(user); // { name: 'John' }

 

타입스크립트에선 public, protected, private 접근 제한자를 별도로 제공하는데, 생성자 파라미터에 접근 제한자를 사용하면 암묵적으로 클래스 프로퍼티를 선언하고 초기화가 진행된다. 즉, 생성자 파라미터에 접근 제한자를 사용하면 클래스 바디에 프로퍼티를 선언한 것과 동일한 효과를 얻을 수 있다. 일일이 프로퍼티를 선언하고 생성자 내에 초기화 코드를 작성하지 않아도 돼서 코드가 더욱 간결해진다.

class User {
  constructor(public name: string) {}
}

const user = new User('John');
console.log(user); // { name: 'John' }

 

 

접근 제한자 Access Modifier

---

자바스크립트에서 클래스와 프로퍼티는 기본적으로 public으로 선언된다. 타입스크립트 역시 동일하지만 이를 더 명시적으로 표현할 수 있는 public 접근 제한자를 제공한다.

 

자바스크립트에서 프로퍼티 혹은 메서드 이름 앞에 # 기호를 붙이면 클래스 내부에서만 접근할 수 있는 private 멤버로 선언된다. 타입스크립트에선 private 키워드를 사용하여 접근 제한을 더 명시적으로 표현할 수 있다.

 

접근 가능한 곳	public	protected	private
클래스 내부	O	O	O
자식 클래스 내부	O	O	X
클래스 인스턴스	O	X	X

 

💡 프로토타입에 저장된 메서드도 클래스 내부로 취급한다

 

public

public 접근 제한자는 클래스 내부, 자식 클래스 내부, 인스턴스에서 자유롭게 접근할 수 있는 멤버를 의미한다. 아무런 키워드를 붙이지 않았을 땐 기본적으로 public 멤버로 취급된다.

class User {
  constructor(public name: string) {}

  public printName() {
    console.log(this.name); // 클래스 내부에서 public 프로퍼티 접근
  }
}

const user = new User('John'); // { name: 'John' }
user.name; // 'John'
user.printName(); // 'John'

 

protected

protected 접근 제한자는 해당 클래스와 자식 클래스 내부에서만 접근할 수 있는 멤버를 의미한다. 아래 예시에서 name 프로퍼티와 sayHello() 메서드는 protected 멤버이므로 인스턴스에선 직접 접근할 수 없다.

class User {
  constructor(protected name: string) {}

  protected sayHello() {
    console.log(`${this.name}, Hello`);
  }
}

class PaidUser extends User {
  public printName() {
    console.log(this.name); // 자식 클래스 내부에서 protected 프로퍼티 접근
  }

  public callSayHello() {
    this.sayHello(); // 자식 클래스 내부에서 protected 메서드 접근
  }
}

const paidUser = new PaidUser('John'); // { name: 'John' }
paidUser.name; // Error! (인스턴스에서 접근 불가)
paidUser.sayHello(); // Error! (인스턴스에서 접근 불가)

paidUser.printName(); // 'John'
paidUser.callSayHello(); // 'John, Hello'

 

한편 paidUser.printName() 메서드를 호출하면 에러가 발생하지 않는다. printName() 메서드를 호출하면 상속 받은 자식 클래스인 PaidUser 내부에서 name 프로퍼티에 접근하기 때문이다.

 

callSayHello() 메서드 역시 자식 클래스 내부에서 부모 클래스의 protected 메서드인 sayHello()를 호출하고 있기 때문에 에러가 발생하지 않는다.

 

💡 상속 받고 있는 클래스의 constructor 인자가 부모 클래스와 같다면 constructor를 생략할 수 있다. 생략시 암묵적으로 constructor(...args) { super(...args) }를 호출한다.

 

private

private 접근 제한자는 해당 클래스 내부에서만 접근할 수 있는 멤버를 의미한다. 이름에서 알 수 있듯 접근 범위가 가장 제한적이다. 아래 코드에서 name 프로퍼티는 paidUser 인스턴스에 저장되지만 User 클래스에서 private으로 선언된 멤버이기 때문에 PaidUser 자식 클래스 내부에선 직접 접근할 수 없다.

class User {
  constructor(private name: string) {}

  public get getName() {
    return this.name; // 클래스 내부에서 private 프로퍼티 접근
  }
}

class PaidUser extends User {
  public printName() {
    console.log(this.name); // Error! 자식 클래스 내부에서 private 프로퍼티 접근 불가
  }
}

const paidUser = new PaidUser('John');
paidUser.name; // Error! (인스턴스에서 접근 불가)
paidUser.printName(); // Error! (자식 클래스에서 접근 불가)
paidUser.getName; // 'John'

 

 

readonly 키워드

---

자바스크립트에선 클래스의 특정 프로퍼티를 읽기 전용으로 설정하는 기능을 따로 제공하지 않기 때문에 Setter 없이 Getter만 선언하는 방식을 사용해야 한다.

class User {
  constructor(name) {
    this._name = name;
  }

  get name() {
    return this._name;
  }
}

const user = new User('John');
console.log(user.name); // 'John'
user.name = 'Bill'; // Cannot set property name of #<User> which has only a getter

 

타입스크립트에선 위 같은 번거로운 코드없이 readonly 키워드를 이용해서 특정 프로퍼티를 읽기 전용으로 설정할 수 있다. readonly로 선언된 프로퍼티는 초기 선언 시 또는 생성자 내부에서만 값을 할당할 수 있고, 이후부턴 오직 읽기만 가능해진다. 상수 혹은 변경하면 안되는 값을 정의할 때 유용하다.

class User {
  public readonly name: string;

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

const user = new User('John');
console.log(user); // 'John'
user.name = 'Bill'; // Error! 읽기 전용 속성이므로 'name'에 할당할 수 없습니다.ts(2540)

 

 

implement 키워드

---

implements 키워드는 인터페이스에 정의한 모든 프로퍼티와 메서드가 클래스에서 반드시 구현되도록 강제할 때 사용한다. 즉, 인터페이스가 설정된 클래스는 인터페이스의 모든 요구사항을 충족해야한다. 만약 인터페이스에 정의한 프로퍼티나 메서드가 클래스에 구현되어 있지 않다면 컴파일 시점에 에러가 발생한다.

interface UserClass {
  name: string;
  age: number;
  printName(): void;
}

// Error! age, printName 속성이 없습니다.ts(2420)
class User implements UserClass {
  name: string;

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

 

UserClass에 있는 모든 프로퍼티와 메서드를 구현해두니 에러가 발생하지 않는다. 아래 코드에선 클래스 바디 대신 생성자 함수 파라미터에 접근 제한자를 사용해서 프로퍼티를 선언하고 타입을 지정했다.

class User implements UserClass {
  constructor(
    public name: string,
    public age: number,
  ) {}

  printName() {
    console.log(this.name);
  }
}

const user = new User('John', 30);
console.log(user); // { name: 'John', age: 30 }

 

 

abstract 키워드

---

abstract 키워드는 추상 클래스와 추상 메서드를 정의할 때 사용한다.

 

추상 클래스는 다른 클래스가 상속받을 수 있는 기본 클래스로(상속만을 위해 사용), 클래스의 공통 기능이나 구조를 제공하는 템플릿 역할을 수행한다. 일반 클래스와 달리 인스턴스를 생성할 수 없으며, 구체적인 구현은 상속받는 클래스에서 이루어진다. 공통된 프로퍼티와 메서드의 구조를 정의하는 점은 interface와 유사하지만, 추상 클래스는 세부사항이 구현된 일반 메서드와 멤버 변수(인스턴스에 속하는 변수)를 가질 수 있는 점이 다르다.

 

💡 interface에 정의한 모든 메서드는 추상 메서드다.

 

추상 메서드는 선언만 되어 있고 실제 구현은 포함하지 않는 메서드를 가리킨다. 구현 내용 없이 이름, 파라미터 타입, 반환 타입만 선언된 메서드라고 보면 된다. 추상 메서드는 추상 클래스 내에 선언하고, 상속받는 클래스에서 반드시 구현돼야 한다.

abstract class UserClass {
  name: string; // 멤버 변수
  age: number; // 멤버 변수

  constructor(name: string, age: number) {
    this.name = name; // 멤버 변수 초기화
    this.age = age; // 멤버 변수 초기화
  }

  // 세부사항이 구현된 일반 메서드
  printName() {
    console.log(this.name);
  }

  // 세부사항이 구현되지 않은 추상 메서드
  abstract printAge(): void;
}

class User extends UserClass {
  // 추상 클래스를 상속 받은 클래스는 반드시 추상 메서드를 구현해야 한다
  printAge() {
    console.log(this.age);
  }
}

const abUser = new UserClass('John', 30); // Error! 추상 클래스의 인스턴스를 만들 수 없습니다.ts(2511)
const user = new User('John', 30);
console.log(user); // { name: 'John', age: 30 }
user.printName(); // 'John'

 

 

레퍼런스

---

TypeScript - Class | PoiemaWeb

 

---

글 수정사항은 노션 페이지에 가장 빠르게 반영됩니다. 링크를 참고해 주세요