[TypeScript] 인터페이스

ttining·2025년 4월 4일

☘️ Interface

  • 타입에 이름을 지어주는 문법 중 하나이다.
  • 객체의 구조를 정의하는 데 특화되어 있다.
  • 상속(확장), 선언 합치기(declaration merging) 등의 기능을 제공한다.

📍 interface 예시

// 타입 별칭
type A = {
	a : string;
	b : number;
}

// 인터페이스
interface A = {
	a : string;
	b : number;
}
  • typeinterface는 기본적으로 유사하게 동작하지만,
    interface객체 타입에 특화되어 있고 선언 합치기, 클래스 구현에 유리하다.



📍 interface 확장하기

interface가 객체 타입이면 확장 가능하다.


1️⃣ 확장 없이 동일 구조 정의 시

  • name, color 등의 중복이 많아진다. ➡️ 유지보수에 불리하다.
interface Dog {
  name: string;
  color: string;
  isBark: boolean;
}

interface Cat {
  name: string;
  color: string;
  isScratch: boolean;
}

interface Chicken {
  name: string;
  color: string;
  isFly: boolean;
}



2️⃣ extends로 상속(확장)하기

  • 중복된 속성을 상위 인터페이스로 추출할 수 있다.
  • 재정의 시, 상위 타입의 서브 타입이어야 한다.
interface Animal {
  name: string;
  color: string;
}

interface Dog extends Animal {
  isBark: boolean;
}

const dog: Dog = {
  name: "hello",
  color: "brown",
  isBark: true,
};

interface Cat extends Animal {
  isScratch: boolean;
}

interface Chicken extends Animal {
  isFly: boolean;
}
  • ✅ 상속받은 타입의 필드를 서브 타입으로 재정의하는 것은 가능하다.
    • 예시) name: "hello"string의 리터럴 서브 타입

3️⃣ 다중 확장하기

  • 여러가지 interface를 동시에 확장할 수 있다.
interface DogCat extends Dog, Cat {}

const dogCat: DogCat = {
  name: "Mix",
  color: "gray",
  isBark: true,
  isScratch: true,
};
  • ⚠️ 다중 상속 시 충돌하는 필드가 있다면 오류가 발생한다.



📍 interface 선언 합치기 (Declaration Merging)

1️⃣ 타입 별칭(type)은 선언 합치기 불가능

type Person = {
  name: string;
};

type Person = {
  // 오류 발생: Duplicate identifier 'Person'
  age: number;
};

2️⃣ 인터페이스(interface)는 선언 합치기 가능

interface Person {
  name: string;
}

interface Person {
  age: number;
}

const person: Person = {
  name: "홍길동",
  age: 30,
};

⚠️ 주의사항

  • 동일한 속성 이름의 타입이 다르면 오류가 발생한다.
  • 서브 타입도 안 됨, 반드시 정확히 동일한 타입이어야 한다.
interface Person {
  name: string;
}

interface Person {
  name: number; // ❌ 오류 발생 (충돌)
  age: number;
}

✅ 확장은 충돌하지 않는 선에서 서브타입 지정 가능

interface Person {
  name: string;
}

interface Developer extends Person {
  name: "hello"; // 가능 (string의 서브타입)
}

3️⃣ 모듈 보강 (Module Augmentation)

  • 라이브러리 타입이 불완전하거나 누락된 경우 사용할 수 있다.
  • 기존 인터페이스에 속성을 추가하여 사용한다. (보통 declare module과 함께 사용됨)
interface Lib {
  a: number;
  b: number;
}

// 선언 합치기
interface Lib {
  c: string;
}

const lib: Lib = {
  a: 1,
  b: 2,
  c: "hello", // 정상 동작
};
profile
내가 보려고 만든 벨로그 *'-'*

0개의 댓글