[TS] 🥦typescript의 class 사용법

자바스크립트에서의 class 사용법과 비슷하지만,
자바스크립트에서의 은닉화#와 타입스크립트에서의 은닉화private는 다르고,
자바스크립트에는 없지만 타입스크립트에서는 있는 것들이 있다.

그래서 정리해 보는 typescript에서의 class 사용법💨

🥦 기본 형태 예시

class Person {
  name: string;
  age: number;

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

  introduce(): string {
    return `제 이름은 ${this.name}이고, 나이는 ${this.age}살 입니다.`
  }
}

const a = new Person('taehyung', 29);
console.log(a.introduce()); // "제 이름은 taehyung이고, 나이는 29살 입니다."

---

🥦 extends

확장 (또는 상속이라 불림)

class Person {
  name: string;
  age: number;

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

  introduce(): string {
    return `제 이름은 ${this.name}이고, 나이는 ${this.age}입니다.`
  }
}

class Character extends Person {
  nickname: string;

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

  introduce2(): string {
    // 이렇게 super로 부모의 메소드를 사용할 수 있다.
    return `${super.introduce()} 닉네임은 ${this.nickname}입니다.`
  }
}

const b = new Character('taehyung', 29, 'TATA');
console.log(b.introduce2()); // "제 이름은 taehyung이고, 나이는 29입니다. 닉네임은 TATA입니다."

---

🥦 getter / setter

get : 인스턴스 변수의 값을 반환하는 메서드
set : 인스턴스 변수의 값을 설정하는 메서드

class Person {
  name: string;
  // private을 사용할 땐 _(언더바)를 붙이는 것이 좋다.
  // private은 .(점)으로 접근이 불가하다.
  private _age: number;

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

  // 참고) getter는 setter가 없으면 그냥 읽기 전용이 됨
  get age() {
    if (this._age <= 0 ) {
      return `나이를 다시 입력해 주세요.`
    }
    return `나이는 ${this._age}살 입니다.`
  }

  set changeAge(age: number) {
    this._age = age
  }

  introduce(): string {
    return `제 이름은 ${this.name}이고, 나이는 ${this._age}입니다.`
  }
}

const a = new Person('TATA', -1);
console.log(a.age) // "나이를 다시 입력해 주세요."

a.changeAge = 7
console.log(a.age) // "나이는 7살 입니다."

---

🥦 접근 제어자

public : 클래스의 내부나 외부, 어디서든 접근 가능
protected : 해당하는 클래스와 자식 클래스에서만 접근 가능
private : 해당하는 클래스에서만 접근 가능

class User {
  public nickname: string; // public은 생략 가능함. nickname: string이랑 같음.
  protected name: string; // 본인과 자식 클래스에서 사용 가능
  private _job: string; // 본인 클래스에서만 사용 가능

  constructor(nickname: string, name: string, job: string) {
    this.nickname = nickname;
    this.name = name;
    this._job = job;
  }

  // 메서드 앞에도 사용 가능
  protected introduceJob() {
    return `제 직업은 ${this._job} 입니다.`
  }

  // private이라서 자식 클래스에게 못 넘겨 줌
  private introduceName() {
    return `제 이름은 ${this.name} 입니다.`
  }
}

class Level extends User {
  level: number;

  constructor(nickname: string, name: string, job: string, level: number) {
    super(nickname, name, job);
    this.level = level;
  }

  gameIntroduce() {
    return `${super.introduceJob()} 레벨은 ${this.level} 입니다.`
  }
}

const a = new Level('TATA', 'taehyung', '마법사', 99)
console.log(a.gameIntroduce()) // "제 직업은 마법사 입니다. 레벨은 99 입니다."

---

🥦 static

new를 사용하여 인스턴트를 만들지 않고도
클래스의 속성과 메서드에 접근이 가능하다.

class User {
  static nickname = "TATA"

  static hi() {
    return `hello ${this.nickname}`
  }
}

console.log(User.nickname) // "TATA"
console.log(User.hi()) // "hello TATA"

---

🥦 추상 클래스

abstract

abstract으로 선언한 클래스는
new로 직접 인스턴스를 만들 수 없다.

extends로 만든 자식 클래스에게
인스턴스화하도록 만들어야 한다.

abstract class Game {
  // 자식 클래스에서 무조건 이 메서드를 구현해야 함
  abstract test1(): string

  // 그냥 작성한 메서드
  test2() {
    return "hello world!"
  }
}

class User extends Game {
  test1() {
    return "wow"
  }
}

const a = new User()
console.log(a.test1()) // "wow"

---

✚ 덤

아래처럼 적으면 가독성은 좋지 않지만,
여러번 적는 귀찮음을 없애줄 수 있다.

class User {
  constructor(public nickname: string, protected name: string, private _job: string) {
  }

  introduceJob() {
    return `제 직업은 ${this._job} 입니다.`
  }
}

const a = new User('TATA', 'taehyung', '마법사');
console.log(a.introduceJob()) // "제 직업은 마법사 입니다." 

🧪typescript 기본 타입 보러가기
👉 TypeScript - Playground