타입스크립트 클래스 간단 정리

개요

타입스크립트에서도 Class 문법을 사용할 수 있다.

접근 제어자 알아보기

접근 제어자란, 클래스의 설계를 위해 클래스의 필드나 메서드에 대한 접근을 제어하기 위해 사용되는 키워드이다.

public

public 으로 선언된 메서드나 필드는 어디에서든 접근이 가능하다.

protected

protected 로 선언된 메서드나 필드는 해당 클래스의 바디 혹은 해당 클래스를 상속받은 클래스의 바디에서만 접근이 가능하다.

private

private 으로 선언된 메서드나 필드는 해당 클래스의 바디에서만 접근이 가능하다.

Private 과 Public field 선언하기

생성자를 이용해 선언할 수도 있고, 생성자에서는 말 그대로 초기화만 할 수도 있다.

생성자를 이용해서 선언하기

• constructor 내부에 접근자, 클래스 필드명, 타입 을 입력하면 된다.

class Person {
  constructor(
    private firstName: string,
    private lastName: string,
    public nickname: string
  ) {}
}

const me = new Person("Jake", "Seo", "Jake Seo");

me.firstName = "Jack"; // error: firstName is private. "only accessible in class body!"

• class body 밖에서는 오직 nickname 프로퍼티만 수정이 가능하다.

생성자 없이 선언하기

class Person {
  private firstName: string;
  public nickname: string;

  constructor() {
    this.firstName = "Jake";
    this.nickname = "Jack";
  }
}

위와 같이 생성자 안에서 선언해주지 않아도 private, public 필드를 선언할 수 있다. 단, 생성자에서 초기화해주지 않으면 에러가 날 것이다.

JS 코드로 변환 결과

"use strict";
class Person {
  constructor(firstName, lastName, nickname) {
    this.firstName = firstName;
    this.lastName = lastName;
    this.nickname = nickname;
  }
}
const me = new Person("Jake", "Seo", "Jake Seo");
me.firstName = "Jack"; // error: firstName is private

• public 과 private 키워드는 JS 로 변환된 이후에는 보이지 않는다.

추상 클래스 (abstract class) 사용하기

• 추상 클래스란, 그 자체로 인스턴스화되지는 못하고 상속을 이용해 사용해야 하는 클래스이다.

abstract class Person {
  constructor(
    private firstName: string,
    private lastName: string,
    public nickname: string
  ) {}

  getFullName() {
    return `${this.firstName} ${this.lastName}`;
  }
}

class User extends Person {}

• abstract class 키워드를 이용해서 만들 수 있다.
• 추상 클래스가 된 Person 클래스는 더이상 생성자로 즉시 인스턴스화 시킬 수 없다.
• Person 클래스를 상속받은 User 클래스를 통해 이용할 수 있다.
  • User 클래스는 Person 클래스의 필드, 메서드 둘 다 이용 가능하다.

추상 메서드 (abstract method()) 사용하기

• 추상 메서드란, 구체적인 구현은 나중으로 미루고 어떠한 인터페이스를 가지고 있는지만 알려주는 메서드이다.
• 상속받은 클래스마다 구현이 달라지는 경우에 유용하다.
  • ex) 자동차(Car) 클래스가 있고 운전자가 탑승(getIn())하는 메서드가 있다고 가정했을 때, 좌측통행인 국가의 자동차는 구체적인 구현이 우측 운전석에 탑승하는 것이고, 우측통행인 국가에서는 좌측 운전석에 탑승하는 것이다.

abstract class Car {
  constructor(public driverPosition: "LEFT" | "RIGHT") {}
  abstract getIn(): void; // 추상 메서드, 사용하는 쪽에서 반드시 구현해야 한다.
}

class KoreanCar extends Car {
  getIn() {
    this.driverPosition = "LEFT";
  }
}

• 위의 코드에서 KoreanCar 는 Car 추상 클래스를 상속받아 getIn() 이라는 추상 메서드를 구현하고 있다.
• abstract class 는 타입스크립트에서만 존재하는 개념이다. 자바스크립트로 해석된 이후에는 일반 class 와 동일해진다.

만일 driverPosition 이 private 이라면 자식 클래스에서도 접근이 불가능하다. 자식 클래스에서 접근이 가능하게 만드려면 public 혹은 protected 를 사용해야 한다.

인터페이스 이용하기

interface User {
  firstName: string;
  lastName: string;
  sayHi(name: string): string;
  fullName(): string;
}

class Player implements User {
  constructor(public firstName: string, public lastName: string) {}

  sayHi(name: string) {
    return "";
  }

  fullName() {
    return "";
  }
}

• 위 코드에서 Player 는 반드시 firstName, lastName, sayHi(), fullName() 을 가져야 한다.
  • 인터페이스를 구현할 때의 접근 제어자는 반드시 public 이어야 한다.
• 추상 클래스에 비교했을 때, 위의 방식이 갖는 장점은 인터페이스는 자바스크립트 코드로 변하지 않고 사라진다는 점이다.
  • 더 깔끔하고, 필요 없는 클래스가 남지 않는다.
  • 파일사이즈가 작아진다.
• implements 는 다중 상속도 가능하다.

static method 사용하기

static method 는 매 인스턴스마다 생성되는 것이 아니라 클래스에 정적으로 존재하는 메서드이다.

class MyClass {
  static hello() {
    return "hello";
  }
}
MyClass.hello(); // OK!

const instance = new MyClass();
instance.hello(); // ERROR: property 'hello' does not exist on type 'MyClass'.

hello() 가 static method 인 경우 위처럼 MyClass.hello() 로 호출이 가능하지만, instance.hello() 는 에러를 내뱉는다. static method 는 자바스크립트 클래스에도 존재하기 때문에, 타입스크립트에만 적용되는 것이 아니라 자바스크립트로 번역되어도 여전히 존재한다.