타입스크립트 | 클래스

1. 자바스크립트의 클래스 소개

타입스크립트의 클래스를 살펴보기에 앞서, 자바스크립트의 클래스부터 살펴보자.

 

클래스는 동일한 모양의 객체들을 간단하게 생성하도록 도와주는 문법이다. 자바나 파이썬의 클래스와 동일한 개념으로 쓰인다.

 

참고로, 클래스의 이름은 기본적으로 파스칼 표기법(앞글자 대문자)을 따르는 것이 관습이다.

 

기본적인 클래스 선언 방법은 아래와 같다.

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

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

  // 메서드 정의
  study() {
    console.log("study");
  }

  introduce() {
    console.log("hello this is", this.name);
  }
}

첫 번째로 필드를 선언한다. 필드란 이 클래스가 생성할 객체가 갖는 프로퍼티를 의미한다.

 

이후 생성자 constructor를 선언한다. 생성자는 특수한 메서드로 실질적인 객체를 생성하는 역할을 수행한다. 생성자에서는 매개변수로 프로퍼티 값을 받아 this.프로퍼티의 형태로 값을 할당한다.

 

필요하다면 클래스가 생성할 객체의 메서드도 정의한다.

• 참고로 this 키워드는 현재 만들고 있는 객체를 의미한다.

 

클래스를 이용해 새로운 객체를 생성하는 방법은 다음과 같다. 이때 만들어진 객체를 인스턴스라고 한다. new 클래스명 형태로 클래스의 행성자 함수를 인자와 함께 호출한다.

let studentB = new Student("홍길동", "A", 60);
console.log(studentB);
studentB.study();
studentB.introduce();

 

클래스 상속(확장)

앞서 만든 Student 클래스를 기반으로 추가적인 필드와 메서드를 갖는 클래스를 선언할 수 있다. 이때 활용되는 것이 상속이다. 인터페이스의 확장과 동일하게 extends 키워드로 클래스를 상속받을 수 있다.

// 클래스 상속(확장)
class StudentDeveloper extends Student {
  // 필드
  favoriteSkill;

  // 생성자
  constructor(name, grade, age, favoriteSkill) {
    super(name, grade, age); // 부모 클래스의 생성자 불러오기
    this.favoriteSkill = favoriteSkill;
  }

  // 메서드
  programming() {
    console.log("coding with ", this.favoriteSkill);
  }
}

const studentDeveloper = new StudentDeveloper("홍길동", "A", 50, "typescript");
console.log(studentDeveloper);
studentDeveloper.study();
studentDeveloper.introduce();
studentDeveloper.programming();

이때 super()를 활용하여 자식 클래스의 생성자 안에서 부모 클래스의 생성자를 호출해야 한다.

 

2. 타입스크립트의 클래스

타입스크립트에서 클래스를 사용하는 방법은 다음과 같다. 클래스의 필드를 선언할 때는 타입 주석으로 타입을 정의해주면 된다.

 

기본적으로 필드 선언시 초기값도 명시해주여야 하지만, 만약 아래 예시와 같이 생성자 함수에서 필드의 값을 잘 초기화 해준다면 필드 선언시 초기값은 생략해도 된다.

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

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

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

 

추가로 클래스 자체가 하나의 타입이 될 수도 있다.

class Employee {
    (...)
}

const employeeB: Employee = {
  name: "홍",
  age: 30,
  position: "",

  work() {},
};

 

 

상속

자바스크립트의 상속과 동일하게 자식 클래스의 생성자에서 super()를 활용하여 부모 클래스의 생성자를 호출해야 한다. 이때 호출 위치는 생성자의 최상단이어야 한다.

// 상속
class ExecutiveOfficer extends Employee {
  // 추가 필드
  officeNumber: number;

  // 생성자
  constructor(
    name: string,
    age: number,
    position: string,
    officeNumber: number
  ) {
    super(name, age, position); // 부모 클래스의 생성자 호출
    this.officeNumber = officeNumber;
  }
}


// 상속받은 클래스의 인스턴스 만들기
const Eofficer = new ExecutiveOfficer("홍", 100, "developter", 879);
console.log(Eofficer);
Eofficer.work();

 

3. 접근 제어자

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

종류는 아래의 3가지가 있다.

• public : 모든 범위에서 접근 가능
  • 기본적으로 접근 제어자가 아무것도 선언되어 있지 않다면 public으로 간주되고 인스턴스의 프로퍼티에 자유롭게 접근이 가능함.
• private : 클래스 내부에서만 접근 가능
  • private으로 정의된 프로퍼티는 외부에서 접근할 수 없으며 파생 클래스 내부에서도 접근 불가능함.
• protected : 클래스 내부 또는 파생 클래스 내부에서만 접근 가능
  • protected로 정의된 프로퍼티는 외부에서 접근할 수는 없지만 파생 클래스 내부에서는 접근 가능함.

class Employee {
  // 필드
  private name: string; // private
  protected age: number; // protected
  position: string; // public(자동)

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

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

// public
const employeeA = new Employee("홍길동", 80, "developer");
employeeA.position = "designer"; // 자유롭게 접근 가능
console.log(employeeA); // 변경 사항 적용됨

// private
class ExecutiveOfficer1 extends Employee {
  constructor(name: string, age: number, position: string) {
    super(name, age, position);
  }

  // 메서드
  func() {
    // this.name; // 오류 발생 : 파생클래스에서 private 프로퍼티 접근 불가능
  }
}

// protected
class ExecutiveOfficer2 extends Employee {
  constructor(name: string, age: number, position: string) {
    super(name, age, position);
  }

  // 메서드
  func() {
    this.age; // 접근 허용
  }
}
// employeeA.age = 100; // 외부에서는 접근 불가능

 

필드 생략하기

생성자 안에서 매개변수에 접근 제어자를 달면 그 정보를 가지고 필드를 자동으로 생성하고 초기화해준다.
이런 경우에는 필드 정의는 생략해줘야 하며 초기화 과정도 생략 가능하다.

class Employee2 {
  // 필드 : 생략됨
  // 생성자
  constructor(
    private name: string,
    protected age: number,
    public position: string
  ) {
    // 초기화 생략가능
  }

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

const employeeC = new Employee2("홍길동", 50, "developer");
employeeC.position = "designer";
console.log(employeeC);

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

 

4. 인터페이스와 클래스

타입스크립트의 인터페이스는 클래스의 설계도 역할을 할 수 있다.
쉽게 말해 인터페이스를 이용해 클래스에 어떤 필드들이 존재하고, 어떤 메서드가 존재하는 지 정의할 수 있다.

interface CharacterInterface {
  name: string;
  moveSpeed: number;
  move(): void;
}

class Character implements CharacterInterface {
  constructor(public name: string, public moveSpeed: number) {}

  move(): void {
    console.log(`${this.moveSpeed} 속도로 이동`);
  }
}

implements 키워드와 함꼐 사용하면 이제부터 이 클래스가 생성하는 객체는 모두 이 인터페이스 타입을 만족하도록 클래스를 구현해야 한다.

 

참고로, 인터페이스로 정의된 필드는 무조건 public 이다.

---

본 포스팅은 인프런 한 입 크기로 잘라먹는 타입스크립트 강의를 기반으로 작성되었습니다. 사용된 이미지들은 모두 위 강의에서 가져왔습니다. 문제시 알려주세요.