[TypeScript]클래스와 상속

01 개요

클래스와 상속은 새로운 개념은 아니지만, 스크립트 언어인 JavaScript에서 사용하는 데에는 기존의 언어와 몇가지 차이점이 있었다. 본 문서에서는 TypeScript에서 개선된 클래스와 상속 개념을 살펴본다.

최종수정일 : 2023.08.03

---

02 클래스 요소

type Color = 'Black' | 'White'
type Row = 'a' | 'b' | 'c'
type Column = 1 | 2 | 3

class Position {
	constructor(
		private row: Row,
		private column: Column
	) {}
}

class Piece {
	protected position: Position
	constructor(
		private readonly color: Color,
		row: Row,
		column: Column
	) {
		this.position = new Position(row, column)
	}
}

02.01 접근 한정자

TypeScript도 여타 프로그래밍 언어와 마찬가지로 클래스의 멤버에 대해 세 가지 접근 한정자를 제공한다.

public
어디에서나 접근할 수 있다.

protected
해당 클래스 또는 서브클래스의 인스턴스에서만 접근할 수 있다.

private
해당 클래스에서만 접근할 수 있다.

02.02 인스턴스화(abstract)

abstract class Piece {
	constructor(
// ...
	)
	abstract canMoveTo(position: Position): boolean

서브클래스에서만 인스턴스화 할 수 있도록 한다. 추상 메서드가 구현되지 않은 클래스는 구현할 수 없다.

02.03 부모 메서드 호출(super)

자식 클래스가 부모 클래스에 정의된 메서드를 덮어쓴 경우에 사용할 수 있다.

02.04 해당 클래스 타입 반환(this)

부모클래스에서 본인의 타입을 반환하고 싶을 때, 반환타입을 "부모 클래스" 타입으로 지정하면, 상속 시에 이러한 메서드를 모두 오버라이드 해주어야 한다. "본인의 클래스"를 표현하는 this 타입으로 반환하면, 언제나 자기 자신의 클래스 타입을 반환한다.

class ParentType {
	addMember(value: number): ParentType {
	//...
	}
}

class SubType extemds ParentType {
	addMember(value: number): SubType {	//Bothersome override
	//...
	}
}


//Recommendable method
class ParentType {
	addMember(value: number): this {
	//...
	}
}

02.05 인터페이스

인터페이스는 추상관념과 구현 사이의 인터페이스를 말한다. 컴파일 타임에만 존재한다. 즉 가상의 형태(象)에 불과하다.
따라서 추상 클래스가 생성자와 기본 구현을 가질 수 있고 프로퍼티와 메서드에 접근 한정자를 지정할 수 있는 데에 비해, 인터페이스는 이것들 중 어떠한 것도 할 수 없다.

//type style definition
type Food = {
	calories: number
	tasty: boolean
}
type Cake = Food & {
	sweat: boolean
}

//interface style definition
interface Food {
	calories: number
	tasty: boolean
}
interface Cake extends Food {
	sweet: boolean
}

02.05.01 타입(type) 방식과 인터페이스(interface) 방식의 차이

타입(type)

• 오른편에 타입표현식 사용 가능( type, &, | )
• 확장 타입을 최대한의 노력으로 조합한다(시그너쳐 다른 상속 시 오버로드 시그너쳐 생성).
• 별칭이 같은 타입 객체가 여러개 선언되면 컴파일 에러가 발생한다.

인터페이스(interface)

• 오른편에 구체적 형태가 나와야 한다(타입 표현식 사용 불가능).
• 상속받는 인터페이스가 올바르게 할당되었는지 체크한다(시그너쳐 다른 상속 시 컴파일 에러 발생).
• 이름과 범위가 같은 인터펭치스가 여러개 있으면 자동으로 합쳐진다.

02.05.02 인터페이스의 구현(implements)

interface Animal {
	readonly name: string
	eat(food: string): void
	sleep(hour: number): void
}

interface Feline {
	meow(): void
}

class Cat implements Animal, Feline {
	name = 'Whiskers'
	eat(food: string) {
		console.info('eat ', food);
	}
	sleep(hours: number) {
		console.info('sleep ', hours, ' hours')
	}
	meow() {
		console.info('Meow')
	}
}