27일차

❤️‍🔥

27일차

 

Part 4. TypeScript Essentials

Ch 6. Classes

 

---

 

 

Ch 6. Classes (ES6~)

 

 

class는 object를 만드는 청사진이다.

 

// Quick Start

class Person {
  name;

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

const p1 = new Person("Mark");

console.log(p1);

 

 

 🔗 Constructor & Initialize 

class Person {
  name: string = "Mark"; // 방법 1) 디폴트 생성자
  age!: number; // 프로퍼티를 선언하는 곳 또는 생성자에서 값을 할당하지 않는 경우에는 !를 붙여서 위험을 표현한다.

  // 방법 2) 생성자 함수
  constructor(age?: number) {
    if (age === undefined) {
      this.age = 20;
    } else {
      this.age = age;
    }
  }

  async init() {}
}

const p1: Person = new Person(39);
const p2: Person = new Person();
console.log(p1);
console.log(p2);

 

 

 🔗 접근 제어자 (Access Modifiers) 

 

• public: 모든 곳에서 접근할 수 있다. default
• private: 클래스 외부에서 접근할 수 없다.
• protected: 외부에서 접근할 수 없지만, 상속 관계에 있는 곳에서는 접근할 수 있다.

 

 

 🔗 Initialization In Constructor Parameters 

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

const p1: Person = new Person("Mark", 39);
console.log(p1);

 

 

 🔗 Getters & Setters 

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

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

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

const p1: Person = new Person("Mark", 39);
console.log(p1.name); // get 을 하는 함수 getter
p1.name = "Woongjae"; // set 을 하는 함수 setter
console.log(p1.name); // get 을 하는 함수 getter

 

 

 🔗 Readonly Properties 

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

  public constructor(private _name: string, private age: number) {
    this.contry = "Korea"; // Error X
  }

  hello() {
    this.contry = "China"; // Error // read only 이기 때문에 변경 불가
  }
}

const p1: Person = new Person("Mark", 39);
console.log(p1.name);
p1.name = "Woongjae"; // Error // read only 이기 때문에 변경 불가
console.log(p1.name);

 

 

 🔗 Index Signatures In Class  => 동적으로 프로퍼티 이름이 사용될 때 사용

// class => object
// {mark: 'male', jade: 'male'}
// {chloe: 'female', alex: 'male', anna: 'female'}

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

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

console.log(a);

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

console.log(b);

 

 

 🔗 Static Properties & Methods  => 'static' 키워드를 붙여서 프로퍼티나 메소드를 클래스에서 사용할 수 있다.

class Person {
  private static CITY = "Seoul";

  public hello() {
    console.log("안녕하세요", Person.CITY);
  }

  public change() {
    Person.CITY = "LA";
  }
}

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

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

p1.change();
p2.hello();

 

 

 🔗 Singletons 

class ClassName {
  private static instance: ClassName | null = null;

  public static getInstance(): ClassName {
    // ClassName 으로부터 만든 object가 없으면, 만든다.
    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) 

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, this._age);
  }
}

const p = new Parent("Mark", 39);
p.print();

class Child extends Parent {
  // 추가
  public gender = "male";

  constructor(age: number) {
    super("Mark Jr", age); // ⭐ super(): 부모 생성자 호출 // 맨 처음에 호출 해야 함

    this.printName();
  }
}

const c = new Child(5);
c.print();

 

 

 🔗 Abstract Classes  => 완전하지 않은 class를 표현할 수 있다.

abstract class AbstractPerson {
  protected _name: string = "Mark";

  abstract setName(name: string): void; // abstract로 완전하지 않은 class를 표현할 수 있다.
}

// new AbstractPerson(); // 🚨 Error // class가 완전하지 않기 때문에 실행할 수 없다.

class Person extends AbstractPerson {
  setName(name: string): void {
    this._name = name;
    console.log(this._name);
  }
}

const p = new Person();
p.setName("Hong"); // Hong