본문 바로가기
📌 Front End/└ TypeScript

[TypeScript] 타입스크립트 클래스 · 객체 지향 문법 총 정리

by 쫄리_ 2024. 7. 31.
728x90
반응형

📝 클래스(Class)

멤버 필드의 타입을 정의하고 생성자로 선언한다.

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

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

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

📝 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;
  }
  
}

 


728x90
반응형