TypeScript 개념 정리 - 클래스

자바스크립트의 클래스

let studentA = {
 name: '수연',
 grade: 'A+',
 age: 26,
 study() {
  console.log('열심히 공부 중'); 
 },
 introduce() {
  console.log('hello!'); 
 }
}

class Student {
  // 필드
  name;
  grade;
  age;
  
  // 생성자
  constructor(name, grade, age) {
   this.name = name;
   this.grade = grade;
   this.age = age;
  }
  
  // 메서드
  study() {
   console.log('열심히 공부 중'); 
  }
  introduce() {
   console.log(`${this.name} hello!`); 
  }
}

// 클래스를 이용해서 만든 객체 -> 인스턴스 라고 한다.
// 스튜던트 인스턴스
let studentB = new Student('수연', 'B+', 26);

class StudentDeveloper extends Student {
 favoriteSkill;
  
  constructor(name, grade, age, favoriteSkill) {
   super(name, grade, age); // 부모 클래스의 생성자에서 필드 초기화
   this.favoriteSkill = favoriteSkill;
  }
  
  programming() {
   console.log(`${this.favoriteSkill}로 프로그래밍 함`); 
  }
}

타입스크립트의 클래스

const employee = {
 name: 'dobby',
 age: 26,
 position: 'developer',
 work() {
  console.log('work'); 
 }
}

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('work'); 
 }
}

const employeeB = new Employee('도비', 26, '개발자');
const employeeC: Employee = { // 클래스가 타입으로도 될 수 있다.
  name: '',
  age: 0,
  position: '',
  work() {},
}

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

접근 제어자

public, private, protected

class Employee {
 private name: string;
 public age: number;
 protected position: string;
  
 contructor(name: string, age: number, position: string) {
  this.name = name;
  this.age = age;
  this.position = position;
 }
  
 work() {
  console.log('work'); 
 }
}

class ExecutiveOfficer extends Employee {
 officeNumber: number;
  
 constructor(name: string, age: number, position: string, officeNumber: number) {
  super(name, age, position);
  this.officeNumber = officeNumber;
 }
  
 func() {
  // position은 protected이기 때문에 파생 클래스에서 사용 가능
  this.position;
   
  // name은 private 이기 때문에 접근 불가(선언한 클래스 내부에서만 사용 가능)
  // this.name;
  
  // age는 public 이기 때문에 접근 가능 (어디서든 접근 가능)
  this.age
 }
}

const employee = new Employee('도비', 26, 'developer');
// employee.name = 'sooyeon';
employee.age = 25;
// employee.position = 'designer';

인터페이스와 클래스

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

// implements: 구현하다 (설계도)
// interface로 구현한 것은 무조건 Public 이다.
class character implements CharacterInterface {
 // 생성자의 매개변수에 접근 제어자를 붙이면 필드를 작성하지 않아도 된다.
 constructor(public name: string, public moveSpeed: number) {}
 
  move(): void {
   console.log(`${this.moveSpeed} 속도`); 
  }
}

추상 클래스와 메소드

추상 클래스는 interface를 만들 수 없다.
그저 상속받는 것만 가능하다.

추상 클래스는 설계도와 같다.
추상 메소드가 있는 경우, 추상 클래스를 상속받는 클래스에서 추상 메소드를 필수로 구현해주어야 한다.

추상 메소드는 구현이 되어 있지 않은 call signature 이다.

// 추상 클래스
abstract class User {
 constructor(protected firstName: string, protected lastName: string, protected nickname: string) {}

 abstract getNickName(): void; // 추상 메소드

 getFullName() {
  return `${this.firstName} ${this.lastName}`;
 }
}

class Player extends User {
 // 상속한 추상 클래스의 추상 메소드를 필수로 구현해주어야 한다.
 getNickName() {
   console.log(this.nickname);
 }
}

interface의 역할도 동일하다고 볼 수 있다.
대신, interface는 상속 시 extends가 아닌 implements 단어를 써야 한다.