TypeScript - 클래스: 초보자 가이드

안녕하세요, 미래의 코딩 슈퍼스타! ? TypeScript 클래스의 흥미로운 세상으로 뛰어들 준비가 되었나요? 코드를 한 줄도 적어보지 않았다면 걱정하지 마세요 - 우리는 처음부터 시작해 점진적으로 올라갈 거예요. 이 튜토리얼의 끝을 맞아서, 당신은 마치 프로처럼 클래스를 만들 수 있을 거예요! 그럼 이 모험을 함께 시작해 보겠습니다.

TypeScript - Classes

클래스는 무엇인가요?

자, 구체적인 내용으로 들어가기 전에 클래스가 무엇인지 이해해 보겠습니다. 클래스는 객체를 만드는 블루프린트라고 생각해 보세요. 건축가가 집을 짓기 위해 블루프린트를 사용하는 것처럼, 우리는 코드에서 객체를 만들기 위해 클래스를 사용합니다. 이러한 객체는 속성(예: 집의 색상)과 메서드(예: 문 열기)를 가질 수 있습니다.

클래스 만들기

우리는まず 간단한 Car 클래스를 만들어 보겠습니다.

class Car {
make: string;
model: string;
year: number;

constructor(make: string, model: string, year: number) {
this.make = make;
this.model = model;
this.year = year;
}

honk() {
console.log("Beep beep!");
}
}

이를 간단히 설명하자면:

class 키워드로 시작하여 클래스의 이름을 지정합니다. 여기서는 Car입니다.
클래스 내부에 속성을 정의합니다: make, model, year.
constructor는 새로운 Car 객체를 만들 때 호출되는 특별한 메서드입니다. 이 메서드는 속성의 초기 값을 설정합니다.
또한 honk 메서드를 정의하여, 호출될 때 "Beep beep!"를 콘솔에 출력합니다.

인스턴스 객체 만들기

이제 Car 클래스가 완성되었으니, 실제 차 객체를 만들어 보겠습니다!

let myCar = new Car("Toyota", "Corolla", 2020);
let yourCar = new Car("Honda", "Civic", 2019);

여기서 우리는 두 개의 Car 객체를 만들었습니다: myCar과 yourCar. new 키워드는 TypeScript에 새로운 Car 클래스의 인스턴스를 만들도록 지시합니다.

속성과 함수 접근하기

이제 차 객체가 있으니, 어떻게 사용할 수 있을까요? 보겠습니다:

console.log(myCar.make);  // 출력: Toyota
console.log(yourCar.year);  // 출력: 2019

myCar.honk();  // 출력: Beep beep!

우리는 점(.)을 사용하여 객체의 속성과 메서드에 접근합니다. 마치 "Hey, myCar! What's your make?" 혹은 "Hey, myCar! Give us a honk!"라고 말하는 것과 같습니다.

클래스 상속

상속은 기존 클래스를 기반으로 새로운 클래스를 만드는 강력한 기능입니다. Car 클래스를 상속하여 SportsCar 클래스를 만들어 보겠습니다:

class SportsCar extends Car {
topSpeed: number;

constructor(make: string, model: string, year: number, topSpeed: number) {
super(make, model, year);
this.topSpeed = topSpeed;
}

race() {
console.log(`Racing at ${this.topSpeed} mph!`);
}
}

let mySpeedster = new SportsCar("Ferrari", "F8", 2021, 210);
mySpeedster.honk();  // 출력: Beep beep!
mySpeedster.race();  // 출력: Racing at 210 mph!

이제 무슨 일이 일어나고 있는지 설명해 보겠습니다:

extends 키워드를 사용하여 Car을 상속받습니다.
새로운 속성 topSpeed를 추가합니다.
생성자에서 super()를 호출하여 부모 클래스의 속성을 초기화합니다.
SportsCar에 특화된 새로운 race 메서드를 추가합니다.

우리의 SportsCar는 Car의 모든 속성과 메서드를 가지고 있으며, 자신만의 추가 기능을 가지고 있습니다!

메서드 오버라이딩

occasionally, we want to change how a method from the parent class works in our child class. This is called method overriding. Let's override the honk method in our SportsCar:

class SportsCar extends Car {
// ... previous code ...

honk() {
console.log("Vroom vroom!");
}
}

mySpeedster.honk();  // 출력: Vroom vroom!

이제 SportsCar에서 honk()을 호출하면 더 스포티한 소리가 나옵니다!

정적 키워드

정적 키워드는 클래스 자신에 속하는 속성과 메서드를 만들 수 있게 해줍니다. Car 클래스에 정적 메서드를 추가해 보겠습니다:

class Car {
// ... previous code ...

static numberOfWheels() {
return 4;
}
}

console.log(Car.numberOfWheels());  // 출력: 4

이 메서드는 Car 클래스 자신을 호출하여 인스턴스를 만들지 않고도 호출할 수 있습니다.

instanceof 연산자

instanceof 연산자는 객체가 특정 클래스의 인스턴스인지 확인할 수 있게 해줍니다:

console.log(myCar instanceof Car);  // 출력: true
console.log(mySpeedster instanceof SportsCar);  // 출력: true
console.log(mySpeedster instanceof Car);  // 출력: true
console.log(myCar instanceof SportsCar);  // 출력: false

이는 특정 객체의 타입을 확인할 때 유용합니다.

데이터 가리기

TypeScript에서는 접근 제한자를 사용하여 클래스 멤버의 가시성을 제어할 수 있습니다. 세 가지 접근 제한자는 public, private, protected입니다:

class BankAccount {
private balance: number;

constructor(initialBalance: number) {
this.balance = initialBalance;
}

public deposit(amount: number) {
this.balance += amount;
}

public withdraw(amount: number) {
if (amount <= this.balance) {
this.balance -= amount;
} else {
console.log("Insufficient funds!");
}
}

protected getBalance() {
return this.balance;
}
}

private: 클래스 내부에서만 접근할 수 있습니다.
public: 어디서나 접근할 수 있습니다 (지정되지 않으면 기본값).
protected: 클래스 내부와 자식 클래스에서 접근할 수 있습니다.

클래스와 인터페이스

TypeScript의 인터페이스는 클래스의 계약을 정의하는 데 사용됩니다. Car 클래스에 대해 인터페이스를 만들어 보겠습니다:

interface Vehicle {
make: string;
model: string;
year: number;
honk(): void;
}

class Car implements Vehicle {
// ... 구현 ...
}

인터페이스를 구현함으로써, 우리는 클래스가 특정 구조를 따르도록 보장할 수 있습니다.

메서드 요약

이 튜토리얼에서 다룬 메서드의 요약입니다:

메서드	설명
`constructor()`	클래스의 새로운 인스턴스를 초기화합니다
`honk()`	차가 징징 소리를 내습니다
`race()`	경주를 시뮬레이션합니다 (SportsCar 전용)
`static numberOfWheels()`	차의 바퀴 수를 반환합니다 (Car 클래스 전용)
`deposit()`	은행 계좌에 돈을 입금합니다
`withdraw()`	은행 계좌에서 돈을 인출합니다
`getBalance()`	은행 계좌의 현재 잔액을 반환합니다

이제 TypeScript 클래스의 세계로 첫 걸음을 내디디셨습니다. 연습이 완벽을 이루는 것이니, 이 개념들을 실험하고 다양한 기능을 조합해 보세요. 그리고 가장 중요한 것은, 코딩을 즐기세요! 누구라도 다음 번에는 이 튜토리얼을 가르칠 수 있을지도 모릅니다! ?

Credits: Image by storyset

이전 튜토리얼:

TypeScript - 인터페이스 확장

다음 튜토리얼:

TypeScript - 객체