📗 Classes

📑 Classes

Classes란 object(객체)를 만드는 blueprint (청사진, 설계도)라고 할 수 있다.
클래스 이전에 object를 만드는 기본적인 방법은 function이다.
JavaScript에도 class는 es6 부터 사용 가능하지만 접근제어자 같은 몇가지 기능이 부족하다.
typescript에서 OOP을 위한 초석으로 class의 여러가지 기능을 제공하고 있다.
또한 TypeScript 에서는 클래스도 사용자가 만드는 타입 중의 하나라고 할 수 있다.

class Person {}
  const p1 = new Person(); 
  console.log(p1);

class Person { 
        name;
      constructor(name: string) { 
          this.name = name;
    } 
  }
  const p1 = new Person('Mark'); 
  console.log(p1);

• class 키워드를 이용하여 클래스를 만들고 class 이름은 보통 대문자를 이용한다.
• 또한 new 를 이용하여 class 를 통해 object 를 만들 수 있고 constructor 를 이용하여 object 를 생성하면서 값을 전달할 수 있다.
• this 를 이용해서 만들어진 object 를 가리킬 수 있고 JS 로 컴파일되면 es5 의 경우 function 으로 변경된다.

🎈 constructor & initialize

// strict : true 
  class Person {
    name: string = "Mark"; //초기값 설정 방법1
    age: number; 

    constructor(age: number) { //초기값 설정 방법2
        this.age = age;
    }  
  }

  const p1: Person = new Person(20); 
  console.log(p1); // Person1 {}
  console.log(person.age); // 20

• 생성자 함수가 없으면, 디폴트 생성자가 불리고 프로그래머가 만든 생성자가 하나라도 있으면, 디폴트 생성자는 사라진다.
• strict 모드에서는 프로퍼티를 선언하는 곳 또는 생성자에서 값을 할당해야 한다.
• 프로퍼티를 선언하는 곳 또는 생성자에서 값을 할당하지 않는 경우에는 ! 를 붙여서 위험을 표현한다.
• 클래스의 프로퍼티가 정의되어 있지만, 값을 대입하지 않으면 undefined 이다.
• 생성자에는 async 를 설정할 수 없다.

⛔ 접근 제어자 (Access Modifiers)

class Person {
    public name: string = "Mark"; 
    private _age: number; 

    public constructor(age: number) { 
        this.age = age;
    }  
  }

  const p1: Person = new Person(20); 
  console.log(p1); // p1.age 접근 불가
  

• 접근 제어자에는 public, private, protected 가 있고 설정하지 않으면 public 이다.
• 클래스 내부의 모든 곳에 (생성자, 프로퍼티, 메서드) 설정 가능하다.
• private 으로 설정하면 클래스 외부에서 접근할 수 없다.
• protected는 외부에서는 접근이 불가하지만 상속관계에서는 접근이 가능하다.
• 자바스크립트에서 private 지원하지 않아 오랫동안 프로퍼티나 메서드 이름 앞에 _ 를 붙여서 표현했다.

💨 initialization in constructor parameters

생성자의 파라미터를 받아서 바로 클래스의 프로퍼티로 초기화하는 방법으로 자주 사용하는 방법이다.

class Person {
     public constructor(public name: string, private age: number) {}  
  }

  const p1: Person = new Person({"Mark", 20); 
  console.log(p1); // p1.age 접근 불가

🖐 Getters & Setters

값을 받아오는 것을 get, 값을 새로 설정하는 것을 set이라고 한다.

class Person {
     public constructor(public name: string, private age: number) {}  
  }

  const p1: Person = new Person({"Mark", 20); 
  console.log(p1); // get
  p1.name = "yuni" //set

값을 받아오는 get을 하는 함수를 getter, 값을 새로 설정하는 set을 하는 함수를 setter 라고 한다.
get과 set은 같이 설정되어야 한다.

class Person {
     public constructor(public _name: string, private age: number) {}

     get name() {
          return this._name + "kim"; 
     }

     set name(n: string) {
             this._name = n;
     }
  }


  const p1: Person = new Person({"Mark", 20); 
  console.log(p1.name); // Mark kim
  p1.name = "yuni" //
  console.log(p1.name) // yuni kim

📛 readonly properties

readonly가 있는 경우 초기화되는 영역에서만 값을 세팅할 수 있고 다른 곳에선 바꿀 수 없다.
따라서 초기값을 변경하고 싶지 않을 때 readonly를 붙이면 된다.

class Person {
      public readonly name: string = "Mark";
      private readonly country: string;

         public constructor(public _name: string, private age: number) {
          this.county = "Korea";
      }

      hello() {
          this.country = "China"; //readonly가 있어서 변경 불가
      }
  }


  const p1: Person = new Person({"Mark", 20); 
  p1.name = "yuni" //readonly가 있어서 변경 불가

➰ Index Signatures in class

원래 클래스 안에서 프로퍼티를 선언하면 항상 초기화를 해줬어야 하는데 Index Signatures는 프로퍼티가 있을 수도 없을 수도 있는 동적인 경우에 유용하게 쓸 수 있다.

class Student {
      [index: string]: "male" | "female";
  }

  const a = new Students();
  a.mark = "male";
  a.jade = "male";

  const b = new Students();
  b.chloe = "female";
  b.alex = "male";

  console.log(a); //Students { mark: 'male', jade: 'male'}
  console.log(b); //Students { chloe: 'female', alex: 'male', anna: 'female'}

⭕ Static Properties & Methods

공통적으로 사용하고 싶은 프로퍼티가 있다면 앞에 static을 붙이면 된다.

class Person {
      public hello() {
          console.log('안녕');
      }
  }

  const p1 = new Person();
  p1.hello();

  //static을 붙이면 
  class Person {
      public static hello() {
          console.log('안녕');
      }
  }

  const p1 = new Person();
  p1.hello(); //에러
  Person.hello();
  

static이 붙은 함수는 함수로 생각하지 않으므로 p1.hello()로는 접근 불가하다.

class Person {
      private static CITY = "Seoul";
      public hello() {
          console.log('안녕', Person.CITY);
      }
      public change() {
          person.CITY = "LA";
      }
  }

  const p1 = new Person();
  p1.hello(); //안녕 Seoul

  const p2 = new Person();
  p2.hello(); //안녕 Seoul

  p1.change(); 
  p2.hello(); //안녕 LA
  

1️⃣ Singletons

Singletons pattern이란 어플이 실행되는 중간에 클래스로부터 단 하나의 객체만 생성해서 사용하는 것이다.

class ClassName {

  const a = new ClassName();
  const b = new ClassName();

먼저 new로 클래스 객체가 생성되는 것을 막아보자.

class ClassName {
      private constructor(){}
  }

  const a = new ClassName();
  const b = new ClassName();

이번에는 다른 매개체를 이용해 생성된 객체를 달라고 하여 싱글톤 패턴을 만들 수 있다.

class ClassName {
      private static instance = ClassName | null = null;
      public static getInstance(): ClassName {

          //ClassName으로 부터 만든 객체가 있으면 리턴, 없으면 만들어서 리턴
          if (ClassName.instance === null){
              ClassName.instance = new ClassName();
          }    
          return ClassName.Instance;
      }

      private constructor(){}
  }

  const a = ClassName.getInstance();
  const b = ClassName.getInstance();

  console.log(a === b); //true

👪 상속 (Inheritance)

클래스가 다른 클래스를 가져다가 자신만의 기능을 추가하는 것이 상속이다.
부모 클래스인 Parent를 상속받은 자식 클래스 Child는 생성자를 그대로 받아오게 된다.

//부모 클래스
  class Parent {
      constructor(protected _name: string, private _age: number) {}

      public print(): void {
          console.log(`이름은 ${this._name}이고 나이는 ${this._age}입니다`);
      }
  }

  const p = new Parent("yuni", 27);
  p.print();//이름은 yuni이고 나이는 27입니다

부모 클래스에서 정의된 것을 자식 클래스에서 재정의 하는 것이 오버라이딩이다.

//상속
  class Child extends Parent {
      //오버라이딩
      // public _name = "mark";

      //새로 추가
      public gender = 'male';

      //오버라이딩
      constructor(age: number) {
          //super로 부모 생성자 호출
          super('mark',age);
      }

  }
  const c = new Child(2);
  c.print();//이름은 mark이고 나이는 2입니다

부모 클래스에 있는 함수를 가져오려면 super가 먼저오고 그 다음에 this.함수가 와야 함에 주의하자.

class Parent {
      constructor(protected _name: string, private _age: number) {}

      public print(): void {
          console.log(`이름은 ${this._name}이고 나이는 ${this._age}입니다`);
      }

      protected printName(): void {
          console.log(this._name); //mark
      }
  }

  //상속
  class Child extends Parent {

      //오버라이딩
      constructor(age: number) {
          super('mark',age);
          this.printName();
      }

  }
  const c = new Child(2);
  c.print(); //이름은 mark이고 나이는 2입니다

❓ Abstract Classes

Abstract를 사용하면 완전하지 않은 클래스를 표현할 수 있다.
클래스 이름 맨 앞에 abstract를 붙이면 그 클래스 안에 있는 기능이 완전하지 않아도 되며 그 기능 앞에도 abstract를 붙여주면 된다.

abstract class AbstractPerson {
      protected _name: string = 'yuni';

      abstract setName(name: string): void;
  }

  new AbstractPerson(); //abstract라서 불가

abstract 클래스는 기능이 완전하지 않기 때문에 new를 할 수 없다.
상속을 통해 오버라이딩으로 abstract클래스를 완전하게 만든 후 사용 가능하다.

abstract class AbstractPerson {
      protected _name: string = 'yuni';

      abstract setName(name: string): void;
  }

  new AbstractPerson(); //abstract라서 불가

  //상속
  class Person extends AbstractPerson {
      setName(name: string): void {
          this._name = name;
      }
  }

  const p = new Person();
  p.setName();