[TypeScript] TypeScript에서 클래스(Class) 사용하기

 

저저번주에 모던 JS 스터디 하면서 클래스에 대해 공부했는데, 이번에는 TypeScript를 공부하며 또 만나게 되었다. 아직 class에 익숙하진 않지만, 알아갈 수록 유용하다고 생각된다.

 

오늘은 TypeScript에서 클래스를 사용하는 방법에 대해 살펴 볼 예정이다. 우선 JS 에서의 클래스를 먼저 간단하게 짚고가자.

 

 

1. JS Class

---

클래스 선언

---

class Student {
    
}

 

클래스는 객체를 생성하는 틀이다. 붕어빵이 객체라면 붕어빵 기계는 클래스라고 볼 수 있다.

 

 

 

필드 선언

---

class Student {
  // 필드
  name;
  age;
  grade;
}

 

 

 

생성자 선언

---

생성자는 특수한 메서드로, 실질적으로 객체를 생성하는 함수이다.

class Student {
  // 필드
  name;
  age;
  grade;

  // 생성자
  constructor(name, grade, age) {
    this.name = name;
    this.grade = grade;
    this.age = age;
  }
}

 

생성자에서는 매개변수로 프로퍼티 값을 받아 this.프로퍼티의 값으로 할당한다.

이때 this는 현재 만들고 있는 객체를 의미한다. 위의 생성자 메서드는 현재 만들고 있는 객체의 name, grade, age 프로퍼티의 값을 매개변수로 전달받은 값으로 설정하는 역할을 한다.

 

 

 

클래스 호출

---

'new 클래스 이름'의 형태로 생성자 함수를 호출하고 인수로 name, grade, age를 전달한다.

const studentB = new Student("홍길동", "A+", 27);

 

 

이후 생성자가 호출되어 아래와 같은 객체를 생성한다.

{ name: "홍길동", grade: "A+", age: 27 }

 

 

클래스가 생성할 객체의 메서드도 생성할 수 있다.

class Student {
  // 필드
  name;
  grade;
  age;

  // 생성자
  constructor(name, grade, age) {
    this.name = name;
    this.grade = grade;
    this.age = age;
  }

  // 메서드
  study() {
    console.log("열심히 공부 함");
  }

  introduce() {
    console.log(`안녕하세요!`);
  }
}

let studentB = new Student("홍길동", "A+", 27);

studentB.study(); // 열심히 공부 함
studentB.introduce(); // 안녕하세요!

 

 

 

this 활용하기

---

앞서 클래스 내부에서 this는 현재 만들고 있는 객체를 의미한다고 했다. 따라서 메서드에 다음과 같이 this를 활용해 객체 프로퍼티의 값을 활용하는 것 또한 가능하다.

class Student {
  (...)

  introduce() {
    console.log(`안녕하세요 ${this.name} 입니다!`);
  }
}

let studentB = new Student("홍길동", "A+", 27);

studentB.introduce(); // 안녕하세요 홍길동 입니다!

 

 

 

상속

---

만약 앞서 만든 Student 클래스를 기반으로 추가적인 필드와 메서드를 갖는 클래스를 선언하고 싶다면 다음과 같이 상속을 이용하면 된다.

class StudentDeveloper extends Student {
}

 

class StudentDeveloper extends Student {
  // 필드
  favoriteSkill;

  // 생성자
  constructor(name, grade, age, favoriteSkill) {
    this.favoriteSkill = favoriteSkill;
  }

  // 메서드
  programming() {
    console.log(`${this.favoriteSkill}로 프로그래밍 함`);
  }
}

 

 

 

 

그런데 이때 StudentDeveloper 클래스에서 Student 클래스의 생성자를 함께 호출해줘야 한다. 그렇지 않으면 생성되는 객체의 name, grade, age 값이 제대로 설정되지 않는다. 따라서 다음과 같이 super 라는 메서드를 호출한다.

class StudentDeveloper extends Student {
  // 필드
  favoriteSkill;

  // 생성자
  constructor(name, grade, age, favoriteSkill) {
    super(name, grade, age);
    this.favoriteSkill = favoriteSkill;
  }

  // 메서드
  programming() {
    console.log(`${this.favoriteSkill}로 프로그래밍 함`);
  }
}

 

super를 호출하고 인수로 name, grade, age를 전달하면 슈퍼 클래스(확장 대상 클래스)의 생성자를 호출한다. 따라서 this.name, this.grade, this.age의 값을 설정하게 된다.

 

 

 

2. TS Class

---

타입스크립트의 클래스

---

타입스크립트에서는 클래스의 필드를 선언할 때 타입 주석으로 타입을 함께 정의해주어야 한다. 그렇지 않으면 함수 매개변수와 동일하게 암시적 any 타입으로 추론되는데, 엄격한 타입 검사 모드 (strict 옵션이 true인 경우)일 때에는 오류가 발생한다.

 

추가로 생성자에서 각 필드의 값을 초기화하지 않을 경우 초기값도 함께 명시해주어야 한다. ( 생성자 함수에서 필드의 값들을 잘 초기화 해 준다면 필드 선언시의 초기값은 생략해도 된다.)

class Employee {
  // 필드
  name: string = "";
  age: number = 0;
  position: string = "";

  // 메서드
  work() {
    console.log("일함");
  }
}

 

 

만약 이 클래스가 생성하는 객체의 특정 프로퍼티를 선택적 프로퍼티로 만들고 싶다면 다음과 같이 필드의 이름 뒤에 물음표를 붙여주면된다.

class Employee {
  // 필드
  name: string = "";
  age: number = 0;
  position?: string = "";
  
  ...
  }
}

 

 

 

 

상속

---

타입스크립트에서 클래스의 상속을 이용할 때 파생 클래스(확장하는 클래스)에서 생성자를 정의 했다면 반드시 super 메서드를 호출해 슈퍼 클래스(확장되는 클래스)의 생성자를 호출해야 하며, 호출 위치는 생성자의 최상단 이어야만 한다.

class ExecutiveOfficer extends Employee {
  officeNumber: number;

  constructor(
    name: string,
    age: number,
    position: string,
    officeNumber: number
  ) {
    super(name, age, position);
    this.officeNumber = officeNumber;
  }
}

 

호출 위치가 최상단이어야 하는 이유는 다음과 같다.

1.부모 클래스의 초기화
부모 클래스가 자식 클래스보다 먼저 초기화되어야 하기 때문이다.

2. this 키워드의 사용 가능 시점
JavaScript에서 this 키워드는 객체의 현재 인스턴스를 참조한다. 파생 클래스의 생성자에서 super를 호출하기 전에는 this를 사용할 수 없다. 만약 super 호출 전에 this를 사용하려고 하면 오류가 발생한다.

이는 super 호출이 이루어지기 전에는 부모 클래스의 생성자가 실행되지 않기 때문에, 자식 클래스의 인스턴스가 완전히 초기화되지 않았기 때문이다. 따라서 this를 사용하려면 반드시 super를 먼저 호출해야 한다.

 

 

 

접근 제어자

---

접근 제어자는 타입스크리트에서만 제공되는 기능으로, 클래스의 특정 필드나 메서드를 접근할 수 있는 범위를 설정하는 기능이다.

• public : 모든 범위에서 접근 가능
• private : 클래스 내부에서만 접근 가능
• proteced : 클래스 내부 또는 파생 클래스 내부에서만 접근 가능

 

 

public

---

public은 어디서든지 이 프로퍼티에 접근할 수 있음을 의미한다. 따로 접근 제어자를 지정하지 않으면 기본적으로 public 접근 제어자를 갖게 된다.

 

 

 

private

---

특정 필드나 메서드의 접근 제어자를 private으로 설정하면 클래스 내부에서만 이 필드에 접근할 수 있게 된다.

class Employee {
  // 필드
  private name: string; // private 접근 제어자 설정
  public age: number;
  public position: string;

  ...

  // 메서드
  work() {
    console.log(`${this.name}이 일함`); // 여기서는 접근 가능
  }
}

const employee = new Employee("이정환", 27, "devloper");

employee.name = "홍길동"; // ❌ 오류
employee.age = 30;
employee.position = "디자이너";

 

위 코드에서는 name 필드를 private으로 설정했으므로 클래스 외부에서는 접근이 불가합니다. 그러나 클래스 내부에서는 work 메서드 처럼 접근이 자유롭게 가능하다.

 

 

 

protected

---

private과 public의 중간으로 클래스 외부에서는 접근이 안되지만 클래스 내부와 파생 클래스에서 접근이 가능하도록 설정하는 접근 제어자이다.

class Employee {
  // 필드
  private name: string; // private 접근 제어자 설정
  protected age: number; // protected 접근 제어자 설정
  public position: string;

  ...

  // 메서드
  work() {
    console.log(`${this.name}이 일함`); // 여기서는 접근 가능
  }
}

class ExecutiveOfficer extends Employee {
 // 메서드
  func() {
    this.name; // ❌ 오류 
    this.age; // ✅ 가능
  }
}

const employee = new Employee("이정환", 27, "devloper");

employee.name = "홍길동"; // ❌ 오류
employee.age = 30; // ❌ 오류
employee.position = "디자이너";

위 코드에서는 Employee 클래스를 확장(상속)하는 파생 클래스 ExecutiveOfficer를 선언한 다음 메서드 func를 만들었다. 이 메서드에서는 name과 age에 접근하는데, 이때 name은 private으로 접근이 불가하지만 age는 protected이므로 파생 클래스에서는 접근이 가능하다. 그러나 클래스 외부에서는 접근이 불가다.

 

 

 

필드 생략하기

---

접근 제어자는 다음과 같이 생성자의 매개변수에도 설정할 수 있다.

class Employee {
  // 필드
  private name: string;    // ❌
  protected age: number;   // ❌
  public position: string; // ❌

  // 생성자
  constructor(
    private name: string,
    protected age: number,
    public position: string
  ) {
    this.name = name;
    this.age = age;
    this.position = position;
  }

  // 메서드
  work() {
    console.log(`${this.name} 일함`);
  }
}

 

그러나 생성자에 접근 제어자를 설정하면 동일한 이름의 필드를 선언하지 못하게 된다. 이유는 생성자 매개변수에 name, age, position 처럼 접근 제어자가 설정되면 자동으로 필드도 함께 선언되기 때문이다. 따라서 동일한 이름으로 필드를 중복 선언할 수 없게 된다.

따라서 다음과 같이 중복된 필드 선언을 모두 제거해 주어야 한다.

class Employee {
  // 생성자
  constructor(
    private name: string,
    protected age: number,
    public position: string
  ) {
    this.name = name;
    this.age = age;
    this.position = position;
  }

  // 메서드
  work() {
    console.log(`${this.name} 일함`);
  }
}

또 다음과 접근 제어자가 설정된 매개변수들은 this.필드 = 매개변수가 자동으로 수행된다.

 

따라서 위 코드의 name, age, position은 모두 this 객체의 프로퍼티 값으로 자동 설정되기 때문에 다음과 같이 생성자 내부의 코드를 제거해도 된다.

class Employee {
  // 생성자
  constructor(
    private name: string,
    protected age: number,
    public position: string
  ) {}

  // 메서드
  work() {
    console.log(`${this.name} 일함`);
  }
}

그러므로 타입스크립트에서 클래스를 사용할 때는 보통 생성자 매개변수에 접근 제어자를 설정하여 필드 선언과 생성자 내부 코드를 생략하는것이 훨씬 간결하고 빠르게 코드를 작성할 수 있어 좋다.

 

 

출처

한 입 크기로 잘라먹는 타입스크립트