Typescript : 기초부터 실전형 프로젝트까지 with React + NodeJS / 4. 클래스 & 인터페이스

hatban·2023년 3월 22일
0
post-thumbnail

Class

객체의 형태, 포함해야할 속성과 메소드를 정의

  • 클래스의 객체가 인스턴스

private, public, readonly

타입스크립트의 클래스도 접근제한자를 지원한다

  • public : 클래스 내부 o , 자식 클래스 내부 o , 클래스 인스턴스 o
  • protected : 클래스 내부 o , 자식 클래스 내부 o , 클래스 인스턴스 x
  • private : 클래스 내부 o , 자식 클래스 내부 x , 클래스 인스턴스 x

readonly

  • 값의 속성을 읽기 전용으로 설정해준다
  • 함수가 매개변수로 받는 값을 변경없이 그대로 사용해야할 때 적합
  • 외부 클래스나 함수에서도 호출이 가능하지만 값의 변경은 불가능해 내부에서 미리 값을 초기화 해줘야한다
  • ex ) 회원 조회를 위한 id

상속

공통된 요소를 묶는다고 생각하기

  • extends 키워드 사용

오버라이드

상위 class에서 정의된 method를 하위 class 에서 재 정의하기

  • overriden method의 매개변수 타입은 overriding method의 매개변수 타입과 같거나 상위 타입이어야 한다.(단, overrding method의 매개 변수 타입이 Any 타입이면 예외)
  • overriden method의 매개변수 개수가 overrding method의 매개변수 개수와 같거나 많아야 한다.

getter & setter

값을 할당하거나 가져오려고 할 때 직접 할당하고 가져오지 않고 getter와 setter를 호출해서 객체의 무결성을 보장!

무결성 : 데이터의 정확성과 일관성을 유지하고 보증하는 것
  • 메소드가 아닌 속성으로 가져와야한다

static

클래스의 각 인스턴스가 일부 프로퍼티를 공유하기 위해 static 키워드가 사용된다

  • this는 생성한 인스턴스 기반으로 불러오기때문에 static으로 선언한것은 this로 불러올 수 없다

🔥 타입스크립트에서 싱글톤 패턴을 사용하기 위해 사용된다

class AppState {
  counter = 0;
  private static instanceRef: AppState // AppStore의 단일 인스턴스에 대한 참조
  private constructor(){} // new 연산자 사용 불가하도록 막기
  static getInstance(): AppState{
    if(AppState.instanceRef === undefined){
      AppState.instanceRef = new AppState()
    }
    return AppState.instanceRef
  }
}
// const app = new AppState()  생성불가
// a, b가 동일한 인스턴스를 리턴받음.
const a = AppState.getInstance()
const b = AppState.getInstance()


Interface

객체의 구조를 설명하고 구체적인 구현은 하지 않는다

  • 자바스크립트에는 없고 타입스크립트에만 있는 기능으로 컴파일되면 js파일에는 흔적을 찾아볼 수 없다

🔥 type과 다른점 🔥
1. 인터페이스는 선언적 확장(동일한 이름으로 선언할 경우, 자동적으로 하나로 합쳐짐)이 가능

interface PositionInterface {
  x: number;
  y: number;
}
// only interfaces can be merged.
interface PositionInterface {
  z: number;
}
  1. 인터페이스는 객체에서만 사용가능

Typescript 팀에서는 가능한 Type Alias 보다는 Interface를 사용하고, 유니온타입 혹은 튜플타입을 반드시 써야 되는 상황이면 Type Alias를 사용하도록 권장한다고 한다.

인터페이스를 자주사용하는 이유 => 클래스가 인터페이스를 이행하고 준수해야하는 약속처럼 사용가능해서라고 한다


optional property

인터페이스 사용할 때 인터페이스에 정의되어 있는 속성을 모두 사용하지 않고 싶을 경우 물음표(?)를 사용할 수 있다

0개의 댓글