🧩 Contents Table

타입스크립트를 사용하면 객체지향형 프로그래밍을 사용하기에 용이한 점이 있음.

객체 지향에 대해 알아 보기 앞서, 함수의 오버로딩과 오버라이딩에 대해 먼저 알아보겠음.

함수 오버로딩에 대해서

함수 오버로딩 시그니처 overloading signature

자바스크립트는 타입 시스템이 없고 인수에 대한 제한도 없기 때문에 오버로딩의 개념이 존재하지 않음.

하지만 타입스크립트에서는 함수 오버로딩을 정의할 수 있음.

이는 진짜 오버로딩은 아니고 타입에 대한 정의를 추가하는 것 뿐이며 자바스크립트 구현부는 하나임.

오버로딩 시그니처는 타입에 대한 검사를 해줌으로써 잘못된 함수 호출을 미리 검사해줄 수 있음.

예를 들어 특정 글꼴이 폰트 디자인 시스템 중 하나만 사용하는 상황이라고 가정한다면 아래와 같이 오버로딩을 통해 타입에러를 발생시켜 잘못된 함수 호출을 막을 수 있음.

// 폰트 타입 정의
type FontType = 'Pretendard' | 'Numans';

// 디자인 시스템 스타일 정의
type DesignSystem = 'Body' | 'Caption';

// 각 디자인 시스템별 스타일 정의
interface FontStyle {
  fontSize: number;
  fontWeight: number;
  fontFamily: string;
}

// 함수 오버로딩 시그니처 정의
// 1. Pretendard 폰트는 Body, Caption 모두 사용 가능
function getFontStyle(font: 'Pretendard', system: DesignSystem): FontStyle;
// 2. Numans 폰트는 Caption만 사용 가능
function getFontStyle(font: 'Numans', system: 'Caption'): FontStyle;

const fontStyles = {
  Body: {
    fontSize: 16,
    fontWeight: 400,
  },
  Caption: {
    fontSize: 12,
    fontWeight: 300,
  },
};

const fontFamily = {
  Pretendard: "'Pretendard Variable', 'Pretendard', sans-serif",
  Numans: "'Numans', serif",
};

// 실제 구현부
function getFontStyle(font: FontType, system: DesignSystem): FontStyle {
  // Numans 폰트가 Body 시스템과 사용될 경우 런타임 에러 (실제로는 타입 검사에서 미리 막힘)
  if (font === 'Numans' && system === 'Body') {
    throw new Error('Numans 폰트는 Body 시스템에서 사용할 수 없습니다.');
  }

  return {
    fontSize: fontStyles[system].fontSize,
    fontWeight: fontStyles[system].fontWeight,
    fontFamily: fontFamily[font],
  };
}

getFontStyle('Pretendard', 'Body');
getFontStyle('Pretendard', 'Caption');
getFontStyle('Numans', 'Body');
/*
No overload matches this call.
  Overload 1 of 2, '(font: "Pretendard", system: DesignSystem): FontStyle', gave the following error.
    Argument of type '"Numans"' is not assignable to parameter of type '"Pretendard"'.
  Overload 2 of 2, '(font: "Numans", system: "Caption"): FontStyle', gave the following error.
    Argument of type '"Body"' is not assignable to parameter of type '"Caption"'.
*/
getFontStyle('Numans', 'Caption');

인터페이스 implements

오버로딩할 대상 메서드를 인터페이스에 선언하고 implements 를 통해 실제 구현부는 각각의 클래스에 정의.

interface UserInfo {
  getDisplayName(): string;
}

class User implements UserInfo {
  constructor(
    public id: number,
    public name: string,
    public email: string
  ) {}
  
  getDisplayName(): string {
    return `${this.name} (${this.email})`;
  }
}

class Admin implements UserInfo {
  constructor(
    public id: number,
    public name: string,
    public permissions: string[]
  ) {}
  
  getDisplayName(): string {
    return `${this.name} - Admin with ${this.permissions.length} permissions`;
  }
}

function displayUserInfo(user: UserInfo): string {
  return user.getDisplayName();
}

// Example
const user = new User(1, 'zzin', '[email protected]');
const admin = new Admin(2, 'Lee', ['read', 'write', 'delete']);

console.log(getUserInfo(user)); // "zzin ([email protected])"
console.log(getUserInfo(admin)); // "Lee - Admin with 3 permissions"