🚀 타입스크립트 클래스 작성법 마스터하기 🚀

안녕하세요, 여러분! 오늘은 타입스크립트의 꽃이라고 할 수 있는 클래스 작성법에 대해 깊이 있게 파헤쳐볼 거예요. 타입스크립트 클래스를 마스터하면 여러분의 코딩 실력이 한 단계 업그레이드될 거라고 장담할 수 있어요! 😎

타입스크립트는 자바스크립트의 슈퍼셋으로, 정적 타입을 지원하는 강력한 프로그래밍 언어예요. 특히 클래스를 사용하면 객체 지향 프로그래밍의 장점을 최대한 활용할 수 있죠. 그럼 이제부터 타입스크립트 클래스의 세계로 빠져볼까요? 🏊‍♂️

💡 Pro Tip: 타입스크립트 클래스를 마스터하면 코드의 재사용성과 유지보수성이 크게 향상돼요. 이는 대규모 프로젝트에서 특히 중요하답니다!

자, 그럼 본격적으로 시작해볼까요? 준비되셨나요? 타입스크립트 클래스의 세계로 Go Go! 🚗💨

1. 타입스크립트 클래스의 기본 구조 🏗️

타입스크립트 클래스의 기본 구조부터 살펴볼게요. 클래스는 객체를 생성하기 위한 템플릿이라고 생각하면 돼요. 마치 쿠키 틀처럼요! 🍪


class Cookie {
  flavor: string;

  constructor(flavor: string) {
    this.flavor = flavor;
  }

  describe(): string {
    return `This is a ${this.flavor} flavored cookie.`;
  }
}

const chocolateCookie = new Cookie('chocolate');
console.log(chocolateCookie.describe()); // "This is a chocolate flavored cookie."

이 예제에서 우리는 'Cookie'라는 클래스를 만들었어요. 이 클래스는 'flavor'라는 속성과 'describe'라는 메서드를 가지고 있죠. 'constructor'는 클래스의 인스턴스를 생성할 때 호출되는 특별한 메서드예요.

클래스를 사용하면 비슷한 특성을 가진 객체들을 쉽게 만들 수 있어요. 예를 들어, 다양한 맛의 쿠키를 만들 수 있겠죠?


const strawberryCookie = new Cookie('strawberry');
const vanillaCookie = new Cookie('vanilla');

console.log(strawberryCookie.describe()); // "This is a strawberry flavored cookie."
console.log(vanillaCookie.describe()); // "This is a vanilla flavored cookie."

이렇게 클래스를 사용하면 코드의 재사용성이 높아지고, 구조화된 프로그래밍이 가능해져요. 마치 재능넷에서 다양한 재능을 체계적으로 관리하는 것처럼 말이에요! 😉

🍬 Sweet Tip: 클래스 이름은 항상 대문자로 시작하는 것이 관례예요. 'cookie'가 아니라 'Cookie'처럼요!

자, 이제 기본 구조를 알았으니 더 깊이 들어가볼까요? 타입스크립트 클래스의 다양한 특성들을 하나씩 살펴보겠습니다! 🕵️‍♀️

2. 접근 제어자 (Access Modifiers) 🔐

타입스크립트 클래스에서는 멤버(속성과 메서드)의 접근성을 제어할 수 있어요. 이를 위해 세 가지 접근 제어자를 사용할 수 있죠. 바로 public, private, protected예요.

public: 기본값이에요. 클래스 외부에서 자유롭게 접근 가능해요.
private: 해당 클래스 내부에서만 접근 가능해요.
protected: 해당 클래스와 상속받은 자식 클래스에서만 접근 가능해요.

예제를 통해 살펴볼까요?


class BankAccount {
  public accountHolder: string;
  private balance: number;
  protected accountNumber: string;

  constructor(accountHolder: string, initialBalance: number) {
    this.accountHolder = accountHolder;
    this.balance = initialBalance;
    this.accountNumber = Math.random().toString(36).substr(2, 9);
  }

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

  public withdraw(amount: number): boolean {
    if (this.balance >= amount) {
      this.balance -= amount;
      return true;
    }
    return false;
  }

  private calculateInterest(): number {
    return this.balance * 0.05;
  }

  protected getAccountDetails(): string {
    return `Account Number: ${this.accountNumber}, Balance: ${this.balance}`;
  }
}

const myAccount = new BankAccount('홍길동', 1000000);

console.log(myAccount.accountHolder); // '홍길동'
myAccount.deposit(500000);
console.log(myAccount.withdraw(200000)); // true

// 아래 코드들은 컴파일 에러를 발생시킵니다.
// console.log(myAccount.balance); // Error: Property 'balance' is private and only accessible within class 'BankAccount'.
// console.log(myAccount.calculateInterest()); // Error: Property 'calculateInterest' is private and only accessible within class 'BankAccount'.
// console.log(myAccount.getAccountDetails()); // Error: Property 'getAccountDetails' is protected and only accessible within class 'BankAccount' and its subclasses.

이 예제에서 'BankAccount' 클래스는 다양한 접근 제어자를 사용하고 있어요. 'accountHolder'는 public이라 외부에서 자유롭게 접근할 수 있지만, 'balance'는 private이라 클래스 내부에서만 접근 가능해요. 'accountNumber'는 protected라서 이 클래스와 상속받은 클래스에서만 접근할 수 있죠.

💰 Money Tip: 실제 은행 시스템처럼, 중요한 정보는 private으로 설정하고, 필요한 기능만 public으로 제공하는 것이 좋아요. 이렇게 하면 데이터의 무결성을 지킬 수 있답니다!

접근 제어자를 잘 활용하면 클래스의 내부 구현을 숨기고 필요한 인터페이스만 외부에 노출시킬 수 있어요. 이를 통해 코드의 안정성과 유지보수성을 높일 수 있죠. 마치 재능넷에서 사용자의 개인정보를 안전하게 보호하는 것처럼 말이에요! 🔒

자, 이제 접근 제어자에 대해 알았으니, 다음으로 넘어가볼까요? 타입스크립트 클래스의 또 다른 중요한 특성인 상속에 대해 알아보겠습니다! 🧬

3. 클래스 상속 (Inheritance) 👨‍👩‍👧‍👦

상속은 객체 지향 프로그래밍의 핵심 개념 중 하나예요. 기존 클래스의 특성을 새로운 클래스가 물려받을 수 있게 해주죠. 이를 통해 코드의 재사용성을 높이고, 구조를 체계적으로 만들 수 있어요.

타입스크립트에서는 'extends' 키워드를 사용해 클래스를 상속받을 수 있어요. 한번 예제를 통해 살펴볼까요?


class Animal {
  name: string;

  constructor(name: string) {
    this.name = name;
  }

  makeSound(): void {
    console.log("Some generic animal sound");
  }
}

class Dog extends Animal {
  breed: string;

  constructor(name: string, breed: string) {
    super(name);  // 부모 클래스의 constructor를 호출
    this.breed = breed;
  }

  makeSound(): void {
    console.log("Woof! Woof!");
  }

  fetch(): void {
    console.log(`${this.name} is fetching the ball!`);
  }
}

const myDog = new Dog("뽀삐", "푸들");
console.log(myDog.name);  // "뽀삐"
console.log(myDog.breed);  // "푸들"
myDog.makeSound();  // "Woof! Woof!"
myDog.fetch();  // "뽀삐 is fetching the ball!"

이 예제에서 'Dog' 클래스는 'Animal' 클래스를 상속받고 있어요. 'Dog' 클래스는 'Animal' 클래스의 모든 특성(여기서는 'name' 속성과 'makeSound' 메서드)을 가지면서, 자신만의 특성('breed' 속성과 'fetch' 메서드)도 추가할 수 있죠.

'super' 키워드는 부모 클래스의 constructor를 호출하는 데 사용돼요. 이를 통해 부모 클래스에서 정의된 초기화 로직을 재사용할 수 있죠.

또한, 'Dog' 클래스에서 'makeSound' 메서드를 새로 정의했는데, 이를 메서드 오버라이딩(method overriding)이라고 해요. 부모 클래스의 메서드를 자식 클래스에서 재정의하는 거죠.

🐾 Paw Tip: 상속을 사용할 때는 "is-a" 관계를 고려해보세요. "개는 동물이다(A dog is an animal)"라는 관계가 성립하므로 이 경우 상속이 적절해요!

상속을 활용하면 코드의 중복을 줄이고, 구조를 체계적으로 만들 수 있어요. 예를 들어, 재능넷에서 다양한 유형의 사용자(일반 사용자, 프리미엄 사용자, 관리자 등)를 구현할 때 상속을 활용하면 효율적으로 코드를 관리할 수 있을 거예요! 👨‍💼👩‍💼

자, 이제 상속에 대해 알아봤으니, 다음으로 인터페이스에 대해 알아볼까요? 인터페이스는 타입스크립트에서 매우 중요한 개념이에요. 함께 살펴보죠! 🧐

4. 인터페이스 (Interface) 🤝

인터페이스는 타입스크립트의 핵심 기능 중 하나예요. 인터페이스를 통해 객체의 구조를 정의할 수 있죠. 클래스가 특정 구조를 따르도록 강제할 수도 있고, 함수의 매개변수나 반환값의 타입을 지정할 때도 사용할 수 있어요.

인터페이스의 기본 사용법부터 살펴볼까요?


interface Person {
  name: string;
  age: number;
  greet(): void;
}

class Student implements Person {
  name: string;
  age: number;

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }

  greet(): void {
    console.log(`안녕하세요, 저는 ${this.name}이고 ${this.age}살입니다.`);
  }

  study(): void {
    console.log(`${this.name}이(가) 공부 중입니다.`);
  }
}

const student1 = new Student("김철수", 20);
student1.greet();  // "안녕하세요, 저는 김철수이고 20살입니다."
student1.study();  // "김철수이(가) 공부 중입니다."

이 예제에서 'Person' 인터페이스는 'name'과 'age' 속성, 그리고 'greet' 메서드를 가져야 한다고 정의하고 있어요. 'Student' 클래스는 이 인터페이스를 구현(implement)하고 있죠.

'implements' 키워드를 사용해 클래스가 특정 인터페이스를 따르도록 할 수 있어요. 이렇게 하면 해당 클래스는 반드시 인터페이스에 정의된 모든 속성과 메서드를 구현해야 해요. 구현하지 않으면 컴파일 에러가 발생하죠.

인터페이스는 여러 개를 동시에 구현할 수도 있어요. 예를 들어볼까요?


interface Printable {
  print(): void;
}

class Book implements Person, Printable {
  name: string;
  age: number;
  author: string;

  constructor(name: string, age: number, author: string) {
    this.name = name;
    this.age = age;
    this.author = author;
  }

  greet(): void {
    console.log(`이 책의 제목은 ${this.name}이고, 출간된 지 ${this.age}년 되었습니다.`);
  }

  print(): void {
    console.log(`${this.name} by ${this.author}`);
  }
}

const myBook = new Book("TypeScript 마스터하기", 2, "김개발");
myBook.greet();  // "이 책의 제목은 TypeScript 마스터하기이고, 출간된 지 2년 되었습니다."
myBook.print();  // "TypeScript 마스터하기 by 김개발"

여기서 'Book' 클래스는 'Person'과 'Printable' 두 개의 인터페이스를 동시에 구현하고 있어요. 이렇게 하면 여러 인터페이스의 특성을 한 클래스에 조합할 수 있죠.

📚 Book Tip: 인터페이스를 사용하면 코드의 구조를 명확히 하고, 타입 안정성을 높일 수 있어요. 특히 큰 프로젝트에서 여러 개발자가 협업할 때 매우 유용하답니다!

인터페이스는 재능넷 같은 플랫폼을 개발할 때 특히 유용할 거예요. 예를 들어, 다양한 유형의 재능(음악, 미술, 프로그래밍 등)을 표현하는 인터페이스를 만들고, 각 재능 유형별로 클래스를 구현할 수 있겠죠? 이렇게 하면 코드의 구조가 명확해지고, 새로운 재능 유형을 추가하기도 쉬워질 거예요! 🎨🎵💻

자, 이제 인터페이스에 대해 알아봤으니, 다음으로 제네릭에 대해 알아볼까요? 제네릭은 타입스크립트의 강력한 기능 중 하나예요. 함께 살펴보죠! 🚀

5. 제네릭 (Generics) 🧬

제네릭은 타입스크립트의 가장 강력한 기능 중 하나예요. 제네릭을 사용하면 여러 타입에서 작동할 수 있는 컴포넌트를 만들 수 있죠. 즉, 타입을 마치 함수의 매개변수처럼 사용할 수 있는 거예요.

제네릭의 기본 사용법부터 살펴볼까요?


class Box<T> {
  private content: T;

  constructor(content: T) {
    this.content = content;
  }

  getContent(): T {
    return this.content;
  }
}

const numberBox = new Box<number>(42);
console.log(numberBox.getContent());  // 42

const stringBox = new Box<string>("Hello, TypeScript!");
console.log(stringBox.getContent());  // "Hello, TypeScript!"

이 예제에서 'Box' 클래스는 제네릭 타입 'T'를 사용하고 있어요. 이 클래스의 인스턴스를 생성할 때 실제 타입을 지정할 수 있죠. 'numberBox'는 숫자를, 'stringBox'는 문자열을 담고 있어요.

제네릭을 사용하면 타입 안정성을 유지하면서도 재사용 가능한 컴포넌트를 만들 수 있어요. 컴파일 시점에 타입 체크가 이루어지기 때문에, 런타임 에러를 줄일 수 있죠.

제네릭은 클래스뿐만 아니라 함수에서도 사용할 수 있어요. 예를 들어볼까요?


function swap<T, U>(tuple: [T, U]): [U, T] {
  return [tuple[1], tuple[0]];
}

const result1 = swap<string, number>(["hello", 42]);
console.log(result1);  // [42, "hello"]

const result2 = swap(["TypeScript", true]);  // 타입 추론으로 인해 제네릭 타입을 명시적으로 지정하지 않아도 돼요
console.log(result2);  // [true, "TypeScript"]

이 'swap' 함수는 두 개의 제네릭 타입 'T'와 'U'를 사용해요. 이 함수는 튜플의 두 요소의 위치를 바꿔주는 역할을 하죠.

제네릭은 인터페이스에서도 사용할 수 있어요. 재능넷의 예를 들어볼까요?


interface Talent<T> {
  name: string;
  description: string;
  level: number;
  details: T;
}

interface MusicTalentDetails {
  instrument: string;
  genre: string;
}

interface ProgrammingTalentDetails {
  language: string;
  yearsOfExperience: number;
}

const musicTalent: Talent<MusicTalentDetails> = {
  name: "기타 연주",
  description: "락부터 재즈까지 다양한 장르의 기타 연주",
  level: 8,
  details: {
    instrument: "기타",
    genre: "락/재즈"
  }
};

const programmingTalent: Talent<ProgrammingTalentDetails> = {
  name: "웹 개발",
  description: "프론트엔드부터 백엔드까지 풀스택 웹 개발",
  level: 9,
  details: {
    language: "TypeScript",
    yearsOfExperience: 5
  }
};

console.log(musicTalent);
console.log(programmingTalent);

이 예제에서는 'Talent' 인터페이스가 제네릭 타입 'T'를 사용해요. 이를 통해 다양한 종류의 재능에 대한 세부 정보를 유연하게 표현할 수 있죠. 음악 재능과 프로그래밍 재능은 서로 다른 세부 정보를 가지지만, 같은 'Talent' 인터페이스를 사용할 수 있어요.

🧠 Brain Teaser: 제네릭을 사용하면 코드의 재사용성이 높아지고, 타입 안정성도 유지할 수 있어요. 하지만 너무 많은 제네릭 타입을 사용하면 코드가 복잡해질 수 있으니 주의해야 해요!

제네릭을 잘 활용하면 재능넷 같은 플랫폼에서 다양한 종류의 재능을 효율적으로 관리할 수 있을 거예요. 각 재능 유형별로 다른 세부 정보를 가질 수 있지만, 동일한 인터페이스를 사용해 일관성 있게 처리할 수 있죠. 이렇게 하면 새로운 재능 유형을 추가하기도 쉬워질 거예요! 🎭🏋️‍♀️🎨

자, 이제 제네릭에 대해 알아봤으니, 다음으로 데코레이터에 대해 알아볼까요? 데코레이터는 타입스크립트의 실험적 기능이지만, 매우 유용하답니다. 함께 살펴보죠! 🎁

6. 데코레이터 (Decorators) 🎀

데코레이터는 클래스 선언, 메서드, 접근자, 프로퍼티 또는 매개변수에 첨부할 수 있는 특별한 종류의 선언이에요. 데코레이터는 '@' 기호를 사용하여 표현하며, 함수처럼 평가돼요.

데코레이터를 사용하려면 tsconfig.json 파일에서 "experimentalDecorators" 옵션을 활성화해야 해요.


{
  "compilerOptions": {  네, 계속해서 데코레이터에 대해 설명드리겠습니다.

<pre><code>
{
  "compilerOptions": {
    "experimentalDecorators": true
  }
}

이제 데코레이터의 기본 사용법을 살펴볼까요?


function logged(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
  const originalMethod = descriptor.value;
  descriptor.value = function (...args: any[]) {
    console.log(`Calling ${propertyKey} with`, args);
    const result = originalMethod.apply(this, args);
    console.log(`${propertyKey} returned`, result);
    return result;
  };
  return descriptor;
}

class Calculator {
  @logged
  add(a: number, b: number): number {
    return a + b;
  }
}

const calc = new Calculator();
calc.add(5, 3);
// 출력:
// Calling add with [5, 3]
// add returned 8

이 예제에서 '@logged' 데코레이터는 메서드가 호출될 때와 반환될 때 로그를 출력해요. 이런 방식으로 코드의 동작을 수정하거나 확장할 수 있죠.

데코레이터는 다양한 용도로 사용될 수 있어요. 예를 들어, 클래스 데코레이터를 사용해 클래스에 새로운 속성이나 메서드를 추가할 수 있죠.


function reportableClass(constructor: Function) {
  constructor.prototype.reportingURL = "http://www.example.com/report";
}

@reportableClass
class BugReport {
  type = "report";
  title: string;

  constructor(t: string) {
    this.title = t;
  }
}

const bug = new BugReport("Needs dark mode");
console.log((bug as any).reportingURL); // "http://www.example.com/report"

이 예제에서 '@reportableClass' 데코레이터는 'BugReport' 클래스에 'reportingURL' 속성을 추가해요.

재능넷 플랫폼에서 데코레이터를 활용하는 예를 들어볼까요?


function validateSkillLevel(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
  const originalMethod = descriptor.value;
  descriptor.value = function (...args: any[]) {
    const level = args[0];
    if (level < 1 || level > 10) {
      throw new Error("Skill level must be between 1 and 10");
    }
    return originalMethod.apply(this, args);
  };
  return descriptor;
}

class Talent {
  name: string;
  level: number;

  constructor(name: string) {
    this.name = name;
    this.level = 1;
  }

  @validateSkillLevel
  setSkillLevel(level: number) {
    this.level = level;
    console.log(`${this.name} skill level set to ${this.level}`);
  }
}

const coding = new Talent("Coding");
coding.setSkillLevel(7); // "Coding skill level set to 7"
// coding.setSkillLevel(11); // Error: Skill level must be between 1 and 10

이 예제에서 '@validateSkillLevel' 데코레이터는 스킬 레벨이 유효한 범위 내에 있는지 검증해요. 이런 방식으로 데이터의 무결성을 보장할 수 있죠.

🎈 Decorator Tip: 데코레이터를 사용하면 코드의 재사용성을 높이고, 관심사를 분리할 수 있어요. 하지만 아직 실험적 기능이므로, 프로덕션 환경에서 사용할 때는 주의가 필요해요!

데코레이터를 활용하면 재능넷 플랫폼에서 다양한 기능을 효율적으로 구현할 수 있을 거예요. 예를 들어, 사용자 인증, 로깅, 성능 측정 등의 기능을 데코레이터로 구현하면 코드의 가독성과 유지보수성을 높일 수 있죠. 🔐📊⏱️

자, 이제 타입스크립트 클래스의 주요 특성들을 모두 살펴봤어요. 이 개념들을 잘 활용하면 더 안전하고, 유지보수가 쉬운 코드를 작성할 수 있을 거예요. 타입스크립트의 강력한 기능들을 활용해 여러분만의 멋진 프로젝트를 만들어보세요! 🚀👨‍💻👩‍💻