[TypeScript] 타입스크립트 클래스(Class)

▶타입스크립트 클래스(Class)

타입스크립트에서의 클래스를 알아봅시다😀

 

🔎 클래스?

자바스크립트에서는 ES6에서부터 클래스 문법을 지원하고 있습니다.

클래스를 사용하는 가장 큰 이유는 재사용성 입니다.

 

객체를 직접 작성하여 정의하고 생성할 수도 있지만, 클래스로 만들어주면 여러 객체를 더 쉽게 만들 수 있습니다.

 

→ 클래스는 객체를 생성하기 위한 틀 💡

 

🔎 ES6 이전에는 객체를 그냥 다 작성해줬을까?

ES6 이전 문법에서도 재사용성을 위해 생성자 함수라는 것을 통해 ES6에서의 클래스와 동일한 역할을 수행했는데요.

 

📄 class.js 코드

// ES6 이전 - 생성자 함수
function Person(name, age) {
  this.name = name;
  this.age = age;
}
var doeunn = new Person('doeunn', 23);

// ES6 - 클래스 문법
class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}
var seho = new Person('세호', 30);

윗부분 코드와 아랫부분 코드는 완전히 동일한 역할을 수행합니다.

 

여기까지는 자바스크립트에서의 클래스를 살펴보았고 이제 타입스크립트에서의 클래스 문법을 살펴봅시다!

 

🔎 클래스 살펴보기

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  
  addAge(age) {
    return this.age + age;
  }
}

var doeunn = new Person('doeunn', 23);

1️⃣ 클래스 내에 정의된 함수를 method 라고 부른다.

→ Person 클래스의 메서드인 addAge

 

2️⃣ 클래스를 통해 생성된 객체를 인스턴스(instance)라고 부른다.

→ Person 클래스를 통해 정의한 doeunn은 Person 클래스의 인스턴스

 

3️⃣ 클래스 이름은 항상 대문자로 시작한다.

→ class Person

 

4️⃣ constructor는 class에서 필요한 기초 정보를 세팅하는 곳이다. 객체를 new로 생성할 때 가장 먼저 자동으로 호출된다.

 

5️⃣ this는 본인 객체를 의미한다. 클래스 내에서 메소드끼리 소통하기 위해서는 this가 필요하다.

 

🔎 클래스 상속 - extends

프로토타입 글에서 상속에 대해 공부해 보았었습니다.

그때 자바스크립트에서의 상속은 복제의 개념이 포함되어 있다고 했었습니다.

클래스에서도 다른 클래스를 상속받았다는 의미는 상속받은 클래스의 값을 사용할 수 있다는 말과 동일합니다.

class Cat {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  eat() {
    return `${this.name} is eating!`;
  }
  meow() {
    return 'MEOWWW';
  }
}

class Dog {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  eat() {
    return `${this.name} is eating!`;
  }
  bark() {
    return 'WOOF';
  }
}

이 두 개의 클래스를 보면 중복되는 기능들이 보입니다.

중복되는 기능들을 별도의 클래스를 만들어 상속해 주어 재활용 하는 방법을 생각할 수 있겠습니다.

 

Pet 이라는 클래스를 만들어 위에서 Cat 클래스와 Dog 클래스에서 중복되는 부분을 넣어주려고 합니다.

 

처음부터 생각을 해보면, Pet이라는 큰 틀을 만들고 Cat과 Dog라는 인스턴스를 만드는 것입니다.

class Pet {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  eat() {
    return `${this.name} is eating!`;
  }
}

class Cat extends Pet {
  meow() {
    return 'MEOWWW';
  }
}

class Dog extends Pet {
  bark() {
    return 'WOOF';
  }
}

이처럼 extends 키워드를 사용하면 자식 클래스들은 부모 클래스의 기능을 모두 사용 가능해지게 됩니다.

var mondol = new Dog('mondol', 7);
mondol.eat(); // mondol is eating!

 

🔎 클래스 상속받고 재사용 - super

부모 클래스의 값을 상속 받고, 추가적으로 자식만의 값을 사용하고 싶다면 super 키워드를 사용할 수 있습니다.

class Pet {
  constructor(name, age) {
    console.log('IN PET CONSTRUCTOR!');
    this.name = name;
    this.age = age;
  }
  eat() {
    console.log(`${this.name} is eating!`);
  }
}

class Cat extends Pet {
  constructor(name, age, color = 'yellow') {
    console.log('IN CAT CONSTRUCTOR!');
    super(name, age);
    this.color = color;
  }
  meow() {
    return 'MEOWWW';
  }
}

var bom = new Cat('bom', 5);
// IN CAT CONSTRUCTOR!
// IN PET CONSTRUCTOR!
console.log(bom); // Cat { name: 'bom', age: 5, color: 'yellow' }

위 코드를 보게 되면 super 키워드를 통해 부모 클래스의 constructor(Pet의 생성자)에서 온 기능을 재사용하고,

Cat에 따로 또 추가할 수도 있었습니다.

---

🔎 타입스크립트에서 클래스 문법

자바스크립트의 클래스 문법과 가장 크게 다른 점은

최상단에 멤버 변수에 대한 정의 입니다.

 

📄 class.ts 파일

class Person {
  // 클래스 안에서 사용할 멤버 변수 정의
  name: string;
  age: number;
  
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
}

 

추가적으로 멤버 변수의 유효범위에 대해서도 설정이 가능합니다.

 

클래스 안에서만 사용 → private

그렇지 않으면 기본적으로 → public

변경하지 않고 읽기만 → readonly

class Person {
  private name: string;
  public age: number;
  readonly log: string;

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