Typescript :기초부터 실전형 프로젝트까지 with React + NodeJS(유데미) TIL (3)

Typescript :기초부터 실전형 프로젝트까지 with React + NodeJS(유데미) TIL 3일차

section5. 클래스 & 인터페이스

클래스 = 청사진
객체 = 인스턴스

// 클래스 이름의 첫글자는 대문자
class Department {
  name: stirng;
  //생성자 함수
  constructor(n: string) {
  	this.name = n;
  }
  describe() {
  	console.log('Deparment: ' + this.name);
  }
}

const accounting = new Deaprtment('john');
console.log(accounting);

accounting.describe();

// 클래스 기반이 아닌 더미 객체로 생성
const accountCopy = {discribe: accounting.describe};
// undefined
accountCopy.discribe();

this

class Department {
  name: stirng;
  constructor(n: string) {
  	this.name = n;
  }
  describe(this: Department) {
  	console.log('Deparment: ' + this.name);
  }
}

const accounting = new Deaprtment('john');
console.log(accounting);

accounting.describe();

const accountCopy = {discribe: accounting.describe};
// Error : 인스턴스에서 호출 된 것이 아니므로 by this:Department!
accountCopy.discribe();

// 정상작동
const accountCopy = {name: 's', discribe: accounting.describe};
accountCopy.discribe();

private, public

class Department {
  name: string;
  private employees: string[] =[];
  
  constructor(n: string) {
  	this.name = n;
  }
  
  describe(this: Department) {
  	console.log('Deparment: ' + this.name);
  }
  
  addEmployee(employee: string){
    this.employees.push(employee)
  }
  
  printEmployeeInformation(){
    console.log(this.employees.length);
    console.log(this.employees);
  }
}

const accounting = new Department('Accounting')
accounting.addEmployee('Max');
accounting.addEmployee('Manu');

// 규모가 클 경우 적절하지 못한 방법. private로 막는다. 
accounting.employees[2] = 'Anna';

accounting.printEmployeeInformation();

약식 초기화

class Department {
  private employees: string[] =[];
  
  //동일한 이름의 속성이 생성되고 인수에 대한 값이 생성된 속성에 저장됨
  constructor(private readonly id: string, public name: string) {
  	this.name = n;
  }
  
  describe(this: Department) {
  	console.log(`Deparment(${this.id}): ${this.name}`);
  }
}

const accounting = new Department('d1','Accounting')
accounting.describe()

상속, protected

class Department {
  protected employees: string[] =[];
 
  constructor(private readonly id: string, public name: string) {
  	this.name = n;
  }
  describe(this: Department) {
  	console.log('Deparment: ' + this.name);
  }
  
  addEmployee(employee: string){
    this.employees.push(employee)
  }
  
  printEmployeeInformation(){
    console.log(this.employees.length);
    console.log(this.employees);
  }
}

class ITDepartment extends Department {
  admins: string[];
  constructor(id: string, pulbic admins: string[]) {
    // 기본 클래스의 생성자를 호출
    super(id, 'IT');
    this.admins = admins;
  }
}

class AccountingDepartment extends Department {
  constructor(id: string, private reports: string[]) {
    super(id, 'Accounting');
  }
  
  addEmployee(name: string){
    if(name === 'Max'){return;}
    this.employees.push(name);
  }
  
  addReport(text: string){
    this.reports.push(text);
  }
  
  printReports(){
  	console.log(this.reports);
  }
}

const it = new ITDepartment('d1',['Max']);
console.log(it); 

const accounting = new AccountingDepartment('d1',[]);
accounting.addReport('Something went wrong...');
accounting.addEmployee('Max');
accounting.addEmployee('Manu');

accounting.printEmployeeInformation();
accounting.printReports();