본문 바로가기

클라이언트/TypeScript
[타입스크립트(TypeScript)] 클래스(Class)

// Class

- 개념은 자바스크립트와 같기 때문에 타입스크립트로 클래스 작성하는 것에 초점을 맞출 예정이다.

- 참고 : https://sorrel012.tistory.com/349

 

[자바스크립트(JavaScript)] 클래스

// class - 객체를 생성하는 공장 class 클래스명 { constructor() { } } - constructor 함수를 이용하여 객체의 초기 값을 설정할 수 있다. (항상 추가하기) > 자바스크립트는 객체 생성 시 자동으로 constructor

sorrel012.tistory.com


class 클래스명 {
  멤버필드명: 타입;

  constructor(매개변수명: 타입) {
    this.멤버필드명 = 매개변수명;
  }
}

new 클래스명(타입에 맞는 값);


- 멤버 필드의 타입을 정의하고 생성자로 선언한다.(자바스크립트와 차이점!)


class Department {
  name: string;

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

new Department('Accounting');

// this

클래스 안에서 this를 사용하는 경우, 객체를 호출할 때 this가 가리키는 것이 결정되기 때문에 의도와 다르게 사용될 수 있다. 

이를 방지하기 위해 this에도 타입을 명시해 두면 오류를 줄일 수 있다.

class 클래스명 {
  멤버필드명: 타입;

  constructor(매개변수명: 타입) {
    this.멤버필드명 = 매개변수명;
  }
  
  메소드명(this: 클래스명) {
    //this 사용
  }
}

new 클래스명(타입에 맞는 값);

// 접근 제어자

- 해당 클래스의 property에 접근할 수 있는 권한을 제어한다.

~ private : 클래스 또는 생성된 객체 안에서만 property에 직접 접근할 수 있도록 설정한다.

class 클래스명 {
  멤버필드명: 타입;
  private 멤버필드명2: 타입;

  constructor(매개변수명: 타입) {
    this.멤버필드명 = 매개변수명;
  }
  
}

new 클래스명(타입에 맞는 값);

// 멤버 property 단순화

- 멤버필드에 property를 쓰고, 생성자에 또 쓰는 일을 한 번으로 줄일 수 있다.

class 클래스명 {

  constructor(접근제어자 매개변수명: 타입) {
  }
  
  메소드명1(this: 클래스명) {
    //this 사용
  }
  
  메소드명2() {
    //private 멤버 수정
  }
}

new 클래스명(타입에 맞는 값);

constructor(
  private id: string,
  public name: string,
) {
}

describe(this: Department) {
  console.log(`Department (${this.id}): ${this.name}`);
}

// readonly

- 초기화된 후 수정되지 않도록 설정한다.

- 타입 안전성을 유지하고 의도를 명확하게 표현할 수 있다.

class 클래스명 {

  constructor(접근제어자 readonly 매개변수명: 타입) {
  }
  
}

new 클래스명(타입에 맞는 값);

// 상속

- constructor에서 property를 추가하려면 super()을 통해 부모 클래스에 필요한 property는 그대로 넘겨준 후 추가해야 한다.

- 부모 클래스에서 private 으로 정의된 property는 해당 클래스에서만 사용할 수 있고, 상속받은 자식 클래스에서는 직접 접근할 수 없다. 
   > 자식 클래스에서는 접근할 수 있게 하려면 protected 사용

class 클래스명 extends 부모클래스명 {
  constructor(접근제어자 매개변수명: 타입,
  ) {
    super(매개변수명, 새로운값);
  }
}

class Department {
  private employees: string[] = [];

  constructor(
    private readonly id: string,
    public name: string,
  ) {
  }
}

class ITDepartment extends Department {
  constructor(
    id: string,
    public admins: string[],
  ) {
    super(id, 'IT');
  }
}

// getter & setter

- getter

get 함수명() {
  return this.property명;
}


- setter

set 함수명(매개변수명: 타입) {
  // property 수정 처리
}

// static

- 클래스의 인스턴스(객체)를 생성하지 않고 바로 접근할 수 있게 해준다.

- 클래스에서 사용할 유틸리티 함수를 정의하거나 클래스에 저장하는 전역 상수를 관리하는 데 사용된다.

class 클래스명 {
    static 함수명(매개변수명: 타입) {
      return { property명: 매개변수명 };
    }
}


const 변수명 = 클래스명.함수명(전달값);

// 추상 클래스

- 구조만 정의하고 내용은 정의하지 않는다.

- 상속받은 클래스에서 내용을 정의해야 한다.

- abstract 키워드를 붙인다.

abstract class 클래스명 {
   abstract 메소드명() {}
}

// 싱글톤 패턴(Singleton Pattern)

- 한 클래스의 인스턴스를 1개만 생성하도록 제한한다.

- 생성자를 private으로 만들고 인스턴스를 생성하는 것이 아니라 static 메소드를 통해 접근한다.

class 클래스명 {
  private static instance: 클래스명;
  
  private constructor() { 
  }
  
  static getInstance() {
    if (클래스명.instance) {
      return this.instance;
    }
    this.instance = new 클래스명();
    return this.instance;
  }
  
}