TypeScript : Class와 Interface

소개

타입스크립트는 자바스크립트에 강력한 타입 시스템을 추가하여 더욱 안전하고 유지보수 가능한 코드를 작성할 수 있도록 지원합니다. 이 중 Class와 Interface는 객체지향 프로그래밍에서 핵심적인 역할을 수행하는 두 가지 개념입니다. 이 글에서는 Class와 Interface의 개념, 차이점, 그리고 사용 예시를 통해 자세히 알아보겠습니다.

Class (클래스)

• 정의: 객체를 생성하기 위한 템플릿입니다. 클래스는 속성(property)과 메서드(method)를 정의하며, 이를 기반으로 객체를 생성할 수 있습니다.
• 특징:
  • 상속: 다른 클래스를 상속하여 기능을 확장할 수 있습니다.
  • 생성자: 객체 생성 시 초기화 작업을 수행하는 특별한 메서드입니다.
  • 접근 제한자: public, private, protected 키워드를 사용하여 멤버에 대한 접근을 제한할 수 있습니다.
• 예시:

class Person {
  public name: string;
  private age: number;

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

  greet() {
       console.log(`Hello, my name is ${this.name}`);
  }
}

const person1 = new Person('Alice', 30);
person1.greet   (); // Hello, my name is Alice

Interface (인터페이스)

• 정의: 객체가 가져야 할 속성과 메서드의 형태를 정의하는 추상적인 타입입니다. 클래스는 인터페이스를 구현하여 해당 인터페이스에서 정의된 멤버를 가지게 됩니다.
• 특징:
  • 구현: 클래스는 implements 키워드를 사용하여 인터페이스를 구현합니다.
  • 타입 검사: 인터페이스는 컴파일 시 타입 검사를 강화하여 오류를 미리 방지합니다.
  • 다중 상속: 클래스는 여러 개의 인터페이스를 구현할 수 있습니다.
• 예시:

interface Shape {
  area(): number;
}

class Circle implements Shape {
  radius: number;

  constructor(radius: number) {
    this.radius = radius;
  }

  are   a(): number {
    return Math.PI * this.radius * this.   radius;
  }
}

const circle = new Circle(5);
console.log(circle.area()); // 78.53981633974483

Class와 Interface의 차이점

특징 Class Interface

개념	객체 생성 템플릿	객체의 형태 정의
구현	속성, 메서드를 직접 구현	속성, 메서드의 형태만 정의
상속	다른 클래스 상속 가능	클래스가 구현
다형성	오버라이딩 가능	다중 구현 가능
인스턴스 생성	가능	불가능

언제 어떤 것을 사용해야 할까요?

• Class:
  • 객체를 생성하고 복잡한 로직을 구현해야 할 때
  • 상속을 통해 코드를 재사용하고 확장해야 할 때
• Interface:
  • 타입을 명확히 하고 코드의 가독성을 높이고 싶을 때
  • 다양한 객체들이 공통적으로 가져야 할 형태를 정의하고 싶을 때
  • 함수의 매개변수나 반환 값의 타입을 제한하고 싶을 때

결론

Class와 Interface는 타입스크립트에서 객체지향 프로그래밍을 구현하는 데 필수적인 요소입니다. Class를 사용하여 객체를 생성하고, Interface를 사용하여 객체의 형태를 정의함으로써 더욱 안전하고 유지보수 가능한 코드를 작성할 수 있습니다.

주의: 위 예시는 간단한 예시이며, 실제 개발에서는 더욱 복잡하고 다양한 상황에서 Class와 Interface를 활용하게 됩니다.

핵심:

• Class는 객체의 청사진이고, Interface는 객체의 계약입니다.
• Class는 구체적인 구현을 포함하고, Interface는 추상적인 형태만 정의합니다.
• 적절한 Class와 Interface를 사용하여 코드의 가독성과 유지보수성을 높일 수 있습니다.

더 깊이 있는 학습을 위해 추가 학습 요소

1. 추상 클래스 (Abstract Class)

정의: 클래스를 부분적으로 구현하고, 자식 클래스에서 나머지 부분을 구현하도록 강제하는 클래스입니다. 추상 클래스는 직접 인스턴스화할 수 없으며, 자식 클래스에서 상속받아 사용해야 합니다.

특징:

• 추상 메서드: 구현 없이 메서드의 시그니처만 정의하는 메서드입니다. 자식 클래스에서 반드시 구현해야 합니다.
• 부분적인 구현: 추상 클래스는 공통적인 속성과 메서드를 구현하고, 자식 클래스에서 특정 기능을 추가하도록 할 수 있습니다.

abstract class Animal {
  name: string;

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

  abstract makeSound(): void; // 추상 메서드
}

class Dog extends Animal {
  makeSound() {
    console.log('멍멍');
  }
}

const dog = new Dog('멍멍이');
dog.makeSound(); // 멍멍

2. 제네릭 (Generics)

정의: 코드의 재사용성을 높이고, 다양한 타입의 데이터를 안전하게 처리하기 위해 사용되는 기능입니다. 제네릭은 타입을 매개변수처럼 사용하여 코드를 작성할 수 있도록 합니다.

특징:

• 타입 안전성: 컴파일 시 타입 체크를 통해 오류를 미리 방지합니다.
• 코드 재사용성: 다양한 타입의 데이터를 처리하는 함수나 클래스를 하나로 만들 수 있습니다.

function identity<T>(arg: T): T {
  return arg;
}

let output = identity<string>("myString");  // 타입을 명시적으로 지정

3. 네임스페이스 (Namespace)

정의: 코드를 논리적으로 분리하고 충돌을 방지하기 위해 사용하는 기능입니다. 네임스페이스는 모듈 시스템이 도입되기 전에 많이 사용되었으며, 여전히 유용한 경우가 있습니다.

특징:

• 코드 조직화: 큰 프로젝트에서 코드를 모듈화하여 관리하기 쉽게 합니다.
• 충돌 방지: 동일한 이름의 변수나 함수를 다른 네임스페이스에 정의하여 이름 충돌을 방지합니다.

namespace MyMath {
  export function square(x: number) {
    return x * x;
  }
}

console.log(MyMath.square(5)); // 25

4. 모듈 (Module)

정의: 코드를 독립적인 단위로 분리하여 관리하는 기능입니다. 모듈은 다른 모듈에 의존하거나, 다른 모듈에 의존될 수 있습니다.

특징:

• 모듈 시스템: CommonJS, AMD, ES Modules 등 다양한 모듈 시스템을 지원합니다.
• 코드 재사용성: 모듈을 재사용하여 대규모 프로젝트를 효율적으로 개발할 수 있습니다.
• 의존성 관리: npm과 같은 패키지 관리 시스템을 사용하여 모듈의 의존성을 관리합니다.

// myModule.ts
export function greet(name: string) {
  console.log(`Hello, ${name}!`);
}

// main.ts
import { greet } from './myModule';
greet('Alice');

추가 학습 방향

• 타입스크립트 컴파일 옵션: tsc 컴파일러 옵션을 이용하여 다양한 설정을 할 수 있습니다.
• 데코레이터: 클래스, 메서드, 프로퍼티에 추가적인 메타데이터를 제공하는 기능입니다.
• 믹스인: 여러 클래스의 기능을 합성하여 새로운 클래스를 만들 수 있는 기법입니다.
• 조건부 타입: 타입을 동적으로 조건에 따라 결정할 수 있습니다.
• 매핑된 타입: 기존 타입을 기반으로 새로운 타입을 생성할 수 있습니다.

참고: 위 내용은 타입스크립트의 핵심적인 기능들을 간략하게 설명한 것입니다. 더 자세한 내용은 공식 문서나 관련 자료를 참고하시기 바랍니다.

TypeScript 공식 문서: https://www.typescriptlang.org/docs/handbook/intro.html