TypeScript - Class

참고

TypeScript - Class | PoiemaWeb

ES6 클래스는 클래스 몸체에 메소드만 포함할 수 있다.
클래스 몸체에 클래스 프로퍼티를 선언할 수 없고 반드시 생성자 내부에서 클래스 프로퍼티를 선언하고 초기화를 해줘야한다.

---

예시

// 잘못된 예시
class Person {
  constructor(name) {
    // 클래스 프로퍼티의 선언과 초기화
    this.name = name;
  }

  walk() {
    console.log(`${this.name} is walking`);
    
  }
}

// 올바른 예시
class Person {
  // 클래스 프로퍼티를 사전 선언하여야 한다.
  name: string;

  constructor(name: string) {
    // 클래스 프로퍼티수에 값을 할당
    this.name = name;
  }

  walk() {
    console.log(`${this.name} is walking`);
    
  }
}

const person3 = new Person('Lee');
person3.walk(); // Lee is walking

---

접근제한자

public	디폴트값, 자식 클래스, 클래스 인스턴스 모두 접근 가능하다.
protected	자식 클래스에서 접근 가능하다.
private	#으로 사용 가능, 해당 클래스 내부에서만 접근 가능하다.

private 예시

class Test {
	private name: string;
}

class Test {
	#name: string;
}

접근제한자 예시

class Foo {
  public x: string;
  protected y: string;
  private z: string;

  constructor(x: string, y: string, z: string) {
    // public, protexted, private 접근 제한자 모두 클래스 내부에서 참조 가능
    this.x = x;
    this.y = y;
    this.z = z;
  }
}

const foo = new Foo('x', 'y', 'z');

// public 접근 제한자는 클래스 인스턴스를 통해 클래스 외부에서 참조 가능
console.log(foo.x);

// protexted 접근 제한자는 클래스 인스턴스를 통해 클래스 외부에서 참조 불가능
console.log(foo.y);
// error TS2445: Property 'y' is protected and only accessible within class 'Foo' and its subclasses.

// private 접근 제한자는 클래스 인스턴스를 통해 클래스 외부에서 참조 불가능
console.log(foo.z);
// error TS2341: Property 'z' is private and only accessible within class 'Foo'.

class Bar extends Foo {
  constructor(x: string, y: string, z: string) {
    super(x, y, z);

    // public 접근 제한자는 자식 클래스 내부에서 참조 가능
    console.log(this.x);
    
    // protexted 접근 제한자는 자식 클래스 내부에서 참조 가능
    console.log(this.y);
    
    // private 접근 제한자는 자식 클래스 내부에서 참조 불가능
    console.log(this.z);
    // error TS2341: Property 'z' is private and only accessible within class 'Foo'.
  }
}

---

static

static로 선언된 정적 변수나 메소드는 this. 로 부르는게 아니라 해당 클래스로 불러줘야한다.

class Car7 {
  readonly name: string = "car";
  color: string;
  static wheels = 4;
  constructor(color: string, name: string) {
    this.color = color;
    this.name = name;
  }
  start() {
    console.log("start");
    console.log(this.name);
    // console.log(this.wheels); // Error
    console.log(Car7.wheels);
  }
}

class Bmw9 extends Car7 {
  constructor(color: string, name: string) {
    super(color, name);
  }
  showName() {
    console.log(super.name);
  }
}

const z4 = new Bmw9("black", "zzzz4");
console.log(Car7.wheels);
// console.log(this.wheels); // Error

추상 class

프로퍼티나 메소드를 이름만 선언한다.
구체적인 구현은 상속 받은 곳에서 구현한다.
하나의 프로퍼티나 메소드여도 각각 다르게 구현할 수 있다.

// 추상 class

abstract class Car6 { // abstract = 추상 class
  color: string;
  constructor(color: string) {
    this.color = color;
  }
  start() {
    console.log("start");
  }
  abstract doSomething(): void;
  // 추상 클래스 내부에 추상 메소드는
  // 반드시 상속 받은 곳에서 구체적인 구현을 해줘야 한다.
}

// const car = new Car6("red"); // Error
// new를 이용해서 객체를 만들 수 없다.

class Bmw8 extends Car6 {
  constructor(color: string) {
    super(color);
  }
  doSomething() {
    alert(3)
  }
}
// 상속을 통해서만 사용이 가능

const z5 = new Bmw8("black");