TypeScript 인터페이스 사용법

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

• 대상자: TypeScript를 사용하는 프론트엔드 및 백엔드 개발자
• 난이도: 중급~고급 (인터페이스 정의, 제네릭, 팩토리 패턴 등 고급 개념 포함)

핵심 요약

• 인터페이스 정의: interface 키워드를 사용하여 객체의 구조를 명확히 정의함 (interface Product { name: string; price: number; }).
• 옵셔널 프로퍼티: ?를 사용하여 필수 여부를 유연하게 설정 (name?: string).
• 프레임워크 적용: React, Angular, Vue, Node.js 등 다양한 환경에서 인터페이스를 활용한 예시 제공.

섹션별 세부 요약

1. TypeScript 인터페이스 소개

• 인터페이스는 객체의 구조를 명시하고 타입 검사를 강제하는 도구.
• 기능 구현 없이 오직 구조 및 타입 검증에 집중.
• 예: interface Product { name: string; price: number; }

2. 인터페이스 정의 및 사용

• 인라인 정의: function getProductInfo(product: {name: string, price: number})
• 별도 인터페이스 사용: interface Product { name: string; price: number; }
• 옵셔널 프로퍼티: name?: string; age?: number;

3. 클래스에서 인터페이스 구현

• class Person implements PersonInterface { ... }
• 인터페이스를 구현하는 클래스는 인터페이스의 모든 필수 프로퍼티를 포함해야 함.

4. 인터페이스 합성 및 병합

• 인터페이스 병합: 동일한 이름의 인터페이스를 병합하여 확장 가능 (interface Person { name: string; } interface Person { age: number; }).
• 제네릭 인터페이스: interface Cache { data: T; }

5. 프론트엔드 프레임워크 예시

• React: ProductDisplay.tsx에서 Product 인터페이스를 사용하여 컴포넌트 props 정의.
• Angular: @Input()로 인터페이스 기반 데이터 전달.
• Vue 3: defineProps<{ product: Product }>()로 타입 안전한 props 정의.

6. 백엔드 예시 (Node.js + Express)

• User 인터페이스 정의: export interface User { id: number; firstName: string; ... }
• REST API 구현: /people 라우트에서 User 인터페이스 기반 데이터 처리.

7. 인터뷰 질문 및 최고 실천 방법

• 인터뷰 주제: 인터페이스의 주요 특성, 제네릭 활용, 팩토리 패턴 적용.
• 최고 실천:

- 인터페이스 이름은 PascalCase 사용.

- 옵셔널 프로퍼티는 유연성을 위해 적절히 사용.

- 인터페이스 병합으로 중복 정의를 피함.

결론

TypeScript 인터페이스는 타입 안전성을 높이고 코드 가독성을 개선하는 핵심 도구로, React, Angular, Vue, Node.js 등 다양한 프레임워크에서 활용 가능. 옵셔널 프로퍼티, 제네릭, 인터페이스 병합 등 고급 패턴을 통해 실무에서 유연하게 적용할 수 있음.