티스토리 뷰

🎃 인터페이스 선언 합침

타입 별칭은 동일한 스코프 내에 중복된 이름으로 선언할 수 없지만 인터페이스는 가능하다.

인터페이스는 중복된 이름의 인터페이스 선언은 모두 하나로 합치기 때문에 중복된 이름으로 선언이 가능하다.

// 타입 별칭은 동일한 스코프 내에 중복된 이름으로 선언 불가능
type Person = { // ❌
    name: string; 
};
type Person = { // ❌
    age: number;
};

// 인터페이스는 중복된 이름으로 선언 가능
interface Person {
    name: string;
};
interface Person {
    age: number;
};
// -> 중복된 이름의 인터페이스 선언은 모두 하나로 합쳐지기 때문
// 즉, 위에서 선언한 Person 인터페이스들은 모두 합쳐져서 아래와 같은 인터페이스가 됨
interface Person { 
    name: string;
    age: number;
};

따라서 Person 인터페이스들은 결국 합쳐져서 마지막 Person 인터페이스와 같게 된다.

 

이렇게 동일한 이름의 인터페이스들이 합쳐지는 것을 '선언 합침(Declaration Merging)' 이라고 한다.

 

 

 

 

 

 

⚠️ 주의할 점 ⚠️

동일한 이름의 인터페이스들은 동일한 이름의 프로퍼티를 서로 다른 타입으로 정의하면 오류가 발생한다.
interface Person { 
    name: string;
    age: number;
};

// 주의점
// 동일한 이름의 인터페이스들이 동일한 이름의 프로퍼티를 서로 다른 타입으로 정의하면 오류 발생
interface Person {
    name: number; // ❌
};

동일한 프로퍼티의 타입을 다르게 정의한 상황을 '충돌'이라고 표현하며 선언 합침에서 충돌은 허용되지 않는다.

 

 

 

 

 

 

 

🎃 모듈 보강

선언 합침은 보통 모듈 보강을 위해 이용한다.

interface Lib {
    a: number;
    b: number;
};

// 모듈 보강을 위한 추가 인터페이스
interface Lib {
    c: string;
};

const lib: Lib = {
    a: 1,
    b: 2,
    // 사용 중간에 프로퍼티를 추가해야하는 경우
    // 바로 추가하면 오류 발생
    // -> 선언 함침으로 해결
    c: "hello",
};

위와 같이 인터페이스 Lib 타입으로 선언된 lib을 사용 중에 프로퍼티를 추가해야 하는 경우가 발생했다면 선언 합침을 통해 모듈을 보강해준다.

 

 

 

 

 

 


🔗 타입스크립트 강의

 

한 입 크기로 잘라먹는 타입스크립트(TypeScript) - 인프런 | 강의

문법을 넘어 동작 원리와 개념 이해까지 배워도 배워도 헷갈리는 타입스크립트 이제 제대로 배워보세요! 여러분을 타입스크립트 마법사🧙🏻‍♀️로 만들어드립니다., 프론트엔드의 피할 수

www.inflearn.com

 

728x90