(SEB_FE) Section4 Unit5 TypeScript의 클래스(Class)

JavaScript와 TypeScript 모두 객체 지향 프로그래밍을 지원하며 클래스(class)를 사용하여 객체를 생성할 수 있다.
그러나 두 언어의 클래스는 몇 가지 차이점이 있다.

💚JavaScript에서의 클래스(Class)

JavaScript에서 클래스는 ES6(ECMAScript 2015)에서 처음 도입되었다.
클래스를 사용하면 객체를 생성하고 객체의 속성과 메서드를 정의할 수 있다.
아래 예시를 살펴보자.

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  
  greet() {
    console.log(`안녕하세요, 제 이름은 ${this.name}이고, ${this.age}살 입니다.`);
  }
}

• 위 코드에서 Person 클래스는 name과 age 속성을 가지고 greet() 메서드를 정의한다.

• 이 클래스를 사용하여 객체를 생성하려면 다음과 같이 할 수 있다.

  const person = new Person('Alice', 30);
  person.greet(); // "안녕하세요, 제 이름은 Alice이고, 30살 입니다."

💚TypeScript에서의 클래스(Class)

TypeScript의 클래스는 JavaScript의 클래스와 비슷하지만 몇 가지 추가된 기능이 있다.

예를 들어, TypeScript에서는 클래스의 속성과 메서드에 대한 타입을 명시할 수 있다. 아래는 TypeScript의 클래스 예시이다.

class Person {
  name: string;
  age: number;

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

  greet(): void {
    console.log(`안녕하세요, 제 이름은 ${this.name}이고, ${this.age}살 입니다.`);
  }
}

• 위 코드에서 name 속성과 age 속성은 문자열과 숫자 타입으로 정의되어 있다.

• 약간의 차이점은 TypeScript에서 클래스를 정의할 때, constructor를 이용하여 초기화하는 멤버들은 전부 상단에서 정의를 해줘야 한다는 것!

• 또한 contructor 내 인자로 받을 때도 정확히 타입을 명시해 줘야 한다.

• 객체 생성할때도 JS와 비슷하게 할 수 있다.

  const person = new Person('Alice', 30);
  person.greet(); // "안녕하세요, 제 이름은 Alice이고, 30살 입니다."

💚클래스와 상속(Inheritance)

TypeScript의 클래스(class)는 인터페이스(interface)와 마찬가지로
extends 키워드를 사용하여 기존에 존재하던 클래스를 상속받아 확장하여 새로운 클래스를 만들 수 있다.

class Animal {
    move(distanceInMeters: number): void {
        console.log(`${distanceInMeters}m 이동했습니다.`);
    }
}

class Dog extends Animal {
    speak(): void {
        console.log("멍멍!");
    }
}

const dog = new Dog();
dog.move(10);
dog.speak();

• 위의 코드에서 Animal이라는 클래스를 Dog라는 클래스가 상속받고 있다.

• Dog 클래스는 Animal 클래스로부터 프로퍼티와 메서드를 상속받는다.

• Dog 클래스는 파생 클래스라고도 불리며, 하위클래스(subclasses)라고도 불린다.

• 여기서 Animal 클래스는 기초 클래스, 상위클래스(superclasses)라고 불린다.

💚public, private 키워드

기본적으로 클래스 내에 선언된 멤버는 외부로 공개되는 것이 디폴트 값이다.
그러나 공개된다고 명시적으로도 표시해 줄 수 있다. 이때 public 키워드를 사용한다.

class Person {
  public name: string;
  public age: number;

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

  greet(): void {
    console.log(`안녕하세요, 제 이름은 ${this.name}이고, ${this.age}살 입니다.`);
  }
}

혹은 외부에 드러내지 않을 멤버가 있다면 아래 코드처럼 private 키워드로 명시한다.

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

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

  greet(): void {
    console.log(`안녕하세요, 제 이름은 ${this.name}이고, ${this.age}살 입니다.`);
  }
}

💚readonly 키워드

readonly 키워드를 사용하여 프로퍼티를 읽기 전용으로 만들 수 있다. 읽기 전용 프로퍼티들은 선언 또는 생성자에서 초기화해야 한다.

class Mydog {
    readonly name: string;
    constructor(theName: string) {
        this.name = theName;
    }
}
let spooky = new Mydog("스푸키");
spooky.name = "멋진 스푸키"; // 에러

• 위의 코드는 name이 readonly로 명시되어 있기 때문에, 값을 변경할 수 없다.

• 이런 식으로 변경되면 안 될 값을 readonly로 명시하여 보호할 수 있다.