[TS] 기초(2)

클래스

타입스크립트에서는 클래스를 정의할 때, 생성자 내부가 아닌 클래스 내부에 프로퍼티 타입을 미리 선언해야 한다.

class Person {
  // 프로퍼티 타입을 미리 선언
  name: string
  
  constructor(name: string) {
    this.name = name
  }
  
  say() {
    console.log(`my name is ${this.name}`);
  }
}

const my = new Person('John');
my.say();

class Person {  
  constructor(public name: string) {}
}

const my = new Person('John');
console.log(my);
//Person: {
//  "name": "John"
//} 

접근제한자가 사용된 생성자 파라미터는 클래스 내부에 미리 선언하지 않아도 암묵적으로 해당 클래스의 프로퍼티로 지정된다.

접근 제한자

프로퍼티 또는 메서드 접근을 제어할 때 사용하는 키워드

• Public: 클래스의 외부에서 자유롭게 접근 가능 (따로 선언하지 않았다면 암묵적으로 Public이 선언)

• Private: 클래스 내에서만 접근 가능(클래스의 외부에서 접근 불가능)

• Protected: 클래스 내부와 상속받은 자식 클래스에서만 접근 가능

class Animal {
  // private
  private name: string

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

class Dog extends Animal {
  constructor(name: string) {
    super(name);    
  }
  
  makeSound() {
    console.log(this.name + " 멍멍!!")
  }
}

const dog = new Dog("진돗개")
dog.makeSound() // 진돗개 멍멍!! 출력

해당 코드는 접근제한자로 인한 오류가 뜨며 상속받은 자식 클래스에서도 name 프로퍼티에 접근하고 싶다면 protected로 변경해주어야 한다.

private name: string -> protected name: string

추상 클래스

• 다른 클래스들이 파생될 수 있는 기초클래스

• 직접 인스턴스화 불가능 (new 연산자 불가능)

• 하나 이상의 추상 메서드를 포함하는 클래스

abstract class Animal {
  protected name: string;

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

  abstract makeSound(): void
}

class Dog extends Animal {

  constructor(name: string) {
    super(name);
  }
  
  // 추상 클래스를 상속한 클래스는 반드시 추상 메서드에 대해서 구현
  makeSound(): void{
    console.log(`${this.name} 멍멍!!`);
  }
}

const dog = new Dog('진돗개');
dog.makeSound() // 진돗개 멍멍!!

인터페이스와 차이점이 있다면 추상 클래스는 일반 메서드도 포함시킬 수 있다.

Static

static 키워드를 사용하면 따로 인스턴스화를 하지 않아도 프로퍼티 또는 메서드를 이용할 수 있다.

class Grid {
  static origin = { x:0, y:0 }
}

Grid.origin = { x:3, y:3 } 
console.log(Grid.origin); //  {"x": 3,"y": 3} 

class User {
  static staticMethod() {
    console.log(this === User);
  }
}

User.staticMethod(); // true

---

Reference

• https://poiemaweb.com/typescript-class