TS Programming / Week3 클래스와 상속

sunaaa·2022년 4월 11일
0

this p110

반환타입을 this로 지정하면 클래스를 상속받을 때 메서드 각각을 오버라이드할 필요 없음. TS가 알아서 해줌

class Set {
 add(value: number): this {
 	//...
 }
}

인터페이스와 타입

공통점

type Sushi = {
	salty: boolean
  	tasty: boolean
}

interface Sushi {
	salty: boolean
	tasty: boolean
}

차이점

  1. 타입별칭의 오른편에는 타입 표현식(타입, & , | 등 타입 연산자)을 포함한 모든 타입이 등장할 수 있음.
  2. 인터페이스를 상속할 때 TS는 상속받는 인터페이스의 타입에 상위 인터페이스를 할당할 수 있는 지 확인함(상속받는 타입과 상속받은 인터페이스의 타입이 일치해야함)
  3. 이름과 범위가 같은 인터페이스가 여러개 있다면, 자동으로 인터페이스가 합쳐진다.(=선언 합침) 반면에 type을 중복된 식별자로 선언하면 에러가 뜬다.(단, 인터페이스끼리 타입의 프로퍼티가 다르면 에러가 발생한다)
type Food = {
 calories: number
 tasty: boolean
}

type Sushi = Food & {
	salty: boolean
}

interface Food {
  calories: number
  tasty: boolean
}

interface Sushi extends Food {
  	salty: boolean
}

implements

  • implements : 특정 인터페이스를 만족시킴을 표현(implements를 선언하면) 모든 메서드를 구현해야 함. 메서드나 프로퍼티 추가 구현 가능)
  • 하나의 클래스가 여러개의 인터페이스를 구현할 수 있음(implements 여러개로 표현)
  • 인퍼테이스로 인스턴스 프로퍼티를 정의할 수 있지만, 가시성 한정자(private, proteted, public)은 선언할 수 없음. static 키워드도 사용할 수 없음. readonly는 설정 가능.

추상클래스 vs 인터페이스

  • 추상 클래스는 런타임의 JS 클래스 코드를 만듦.
  • 생성자와 기본 구현을 가짐.
  • 프로퍼티와 메서드에 접근 한정자를 지정할 수 있음.
  • 여러 클래스에서 공유하는 구현이면 추상클래스를 씀
  • 인터페이스는 형태를 정의하는 수단.
  • JS 코드를 만들지 않고 컴파일 타임에만 존재
  • 접근 한정자를 지정할 수 있음.
  • 가볍게 이 클래스는 T다 라고 말할 때 씀
profile
Be Playful Front-end Developer

0개의 댓글