프로그래밍/Typescript

TypeScript에서의 인터페이스 확장: 코드 재사용과 유지보수의 핵심

shimdh 2025. 3. 30. 11:44
728x90

TypeScript는 강력한 타입 시스템을 제공하여 개발자들이 더 안전하고 효율적인 코드를 작성할 수 있도록 돕습니다. 그 중에서도 인터페이스는 객체의 구조를 정의하는 데 있어 매우 중요한 역할을 합니다. 특히, 인터페이스 확장은 기존의 인터페이스를 기반으로 새로운 속성이나 메서드를 추가하여 더 구체적이고 세부적인 형태로 발전시키는 과정으로, 코드의 재사용성과 유지보수성을 높이는 데 기여합니다. 이번 포스트에서는 인터페이스 확장의 필요성과 기본 문법, 다중 상속, 선택적 및 읽기 전용 프로퍼티에 대해 자세히 살펴보겠습니다.

1. 인터페이스 확장의 필요성

코드 재사용

인터페이스 확장은 여러 곳에서 사용되는 공통적인 속성을 가진 객체들을 정의할 때 매우 유용합니다. 예를 들어, 다양한 동물 객체를 정의할 때 기본적인 속성을 가진 인터페이스를 만들어 두면, 이를 상속받아 다양한 동물 객체를 쉽게 생성할 수 있습니다.

유지보수 용이성

기본 인터페이스를 수정하게 되면, 이를 상속받은 모든 인터페이스에 자동으로 변경 사항이 적용되므로 코드 관리가 훨씬 수월해집니다. 이는 특히 대규모 프로젝트에서 코드의 일관성을 유지하는 데 큰 도움이 됩니다.

구조적 타이핑

TypeScript의 장점 중 하나인 구조적 타이핑을 활용하여 서로 다른 타입 간의 관계를 명확히 할 수 있습니다. 이를 통해 코드의 가독성을 높이고, 타입 안전성을 강화할 수 있습니다.

2. 기본 문법

인터페이스는 extends 키워드를 사용하여 다른 인터페이스로부터 속성과 메서드를 상속받습니다. 아래의 예제를 통해 이 개념을 좀 더 명확히 이해해봅시다.

interface Animal {
    name: string;
    sound(): void;
}

interface Dog extends Animal {
    breed: string; // Dog 특유의 속성 추가
}

const myDog: Dog = {
    name: "Buddy",
    breed: "Golden Retriever",
    sound() {
        console.log("Woof!");
    }
};

myDog.sound(); // 출력: Woof!

위의 예제에서 Animal이라는 기본 인터페이스가 존재하며, 이를 상속받아 Dog라는 새로운 인터페이스를 정의했습니다. Dognamesound() 메서드 외에도 추가적으로 breed라는 속성을 포함하고 있습니다. 이러한 구조는 객체 지향 프로그래밍의 원칙을 잘 반영하고 있습니다.

3. 다중 상속

TypeScript에서는 하나의 인터페이스가 여러 개의 다른 인터페이스로부터 상속받을 수 있는 기능을 제공합니다. 이 경우, 상속받고자 하는 인터페이스들을 쉼표로 구분하여 나열합니다.

interface Pet {
    ownerName: string;
}

interface DomesticAnimal extends Animal, Pet {}

const myCat: DomesticAnimal = {
    name: "Whiskers",
    ownerName: "Alice",
    sound() {
        console.log("Meow!");
    }
};

console.log(myCat.ownerName); // 출력: Alice
myCat.sound(); // 출력: Meow!

여기서는 DomesticAnimal이라는 새로운 인터페이스가 두 개의 부모인 AnimalPet을 동시에 상속받고 있습니다. 이를 통해 DomesticAnimal은 두 부모의 속성을 모두 포함하게 되어, 더욱 풍부한 객체 모델을 구성할 수 있습니다.

4. 선택적 프로퍼티와 읽기 전용 프로퍼티

인터페이스 확장에서 선택적 프로퍼티(?)나 읽기 전용 프로퍼티(readonly)를 사용할 수 있는 점도 주목할 만합니다:

interface Vehicle {
    brand: string;
}

interface Car extends Vehicle {
    readonly vinNumber?: string; // 선택적이며 읽기 전용 속성
}

const myCar: Car = { brand: "Toyota" };
myCar.vinNumber = "12345"; // 오류 발생! readonly 이므로 변경 불가능함.

위의 코드는 VIN 번호를 선택적으로 포함할 수 있지만, 한 번 설정된 후에는 변경할 수 없음을 보여줍니다. 이러한 속성들은 객체의 불변성을 보장하는 데 중요한 역할을 합니다.

결론

인터페이스 확장은 TypeScript에서 코드의 조직화 및 관리에 큰 도움을 줍니다. 복잡한 애플리케이션을 개발할 때 중복 코드를 줄이고, 각 객체들이 필요한 구조에 맞추어 설계될 수 있도록 합니다. 이러한 기법들은 협업 시에도 매우 유용하며, 팀원 간의 의사소통을 원활하게 해주는 역할을 하여, 전체적인 개발 효율성을 높이는 데 기여합니다. TypeScript의 인터페이스 확장을 통해 더 나은 코드 품질과 유지보수성을 경험해보세요.

728x90