TypeScript 인터페이스 | Interface 완벽 가이드
이 글의 핵심
TypeScript 인터페이스: Interface Interface 기본·함수 타입.
들어가며
Interface는 객체가 가져야 할 모양(shape)을 적은 규격입니다(인터페이스: 타입이 따라야 할 필드·메서드 약속을 적어 둔 것). 값마다 붙는 명찰을 “이 필드들은 꼭 있어야 한다” 수준으로 맞추는 도구라고 보시면 됩니다.
JavaScript에서 TypeScript로의 전환
“런타임 에러는 프로덕션에서 터진다”는 말이 있습니다. JavaScript로 개발하던 시절, 이 말을 뼈저리게 체감했습니다. 테스트는 다 통과했는데 배포 후 사용자가 이상한 데이터를 입력하면 앱이 터지는 거죠. 특히 팀 프로젝트에서 다른 사람이 작성한 함수의 반환 타입을 잘못 이해해서 버그가 발생하는 일이 잦았습니다. TypeScript를 도입한 후 가장 먼저 느낀 건 안심이었습니다. IDE가 자동완성을 정확히 해주고, 타입이 맞지 않으면 빨간 줄로 미리 알려줍니다. 리팩토링할 때도 “이 함수를 바꾸면 어디가 깨질까?” 걱정할 필요가 없어졌죠. 물론 처음엔 타입 정의 작성이 번거로웠지만, 몇 달 후 그 타입 정의 덕분에 버그를 미리 잡는 경험을 하고 나니 돌아갈 수 없었습니다.
1. Interface 기본
선언
Interface는 객체가 가져야 할 프로퍼티와 타입을 정의합니다:
// User 인터페이스 선언
// 객체의 "계약(contract)"을 정의
interface User {
id: string; // 필수 프로퍼티: 문자열 타입의 id
name: string; // 필수 프로퍼티: 문자열 타입의 name
age: number; // 필수 프로퍼티: 숫자 타입의 age
email: string; // 필수 프로퍼티: 문자열 타입의 email
}
// ✅ 올바른 사용: 모든 프로퍼티 제공
const user: User = {
id: "U001",
name: "홍길동",
age: 25,
email: "[email protected]"
};
// TypeScript 컴파일러가 User 인터페이스와 비교하여 검증
// 모든 필수 프로퍼티가 있고 타입이 일치하므로 통과
// ❌ 컴파일 에러: 프로퍼티 누락
// const user2: User = {
// id: "U002",
// name: "김철수"
// // age와 email이 없음!
// };
// 에러 메시지:
// Type '{ id: string; name: string; }' is not assignable to type 'User'.
// Property 'age' is missing in type '{ id: string; name: string; }'
// ❌ 컴파일 에러: 타입 불일치
// const user3: User = {
// id: "U003",
// name: "이영희",
// age: "25", // string이지만 number 타입 필요
// email: "[email protected]"
// };
// 에러 메시지:
// Type 'string' is not assignable to type 'number'.
// ❌ 컴파일 에러: 추가 프로퍼티
// const user4: User = {
// id: "U004",
// name: "박민수",
// age: 30,
// email: "[email protected]",
// phone: "010-1234-5678" // User에 정의되지 않은 프로퍼티
// };
// 에러 메시지:
// Object literal may only specify known propertiesInterface의 역할:
- 타입 체크: 컴파일 타임에 객체 구조 검증
- 자동 완성: IDE에서 프로퍼티 제안
- 문서화: 객체 구조를 명시적으로 표현
- 리팩토링: 타입 변경 시 모든 사용처 추적
선택적 프로퍼티
? 기호로 선택적 프로퍼티를 정의할 수 있습니다:
interface User {
id: string; // 필수 프로퍼티
name: string; // 필수 프로퍼티
age?: number; // 선택적 프로퍼티 (있어도 되고 없어도 됨)
email?: string; // 선택적 프로퍼티
}
// age?: number는 age: number | undefined와 동일
// ✅ OK: 선택적 프로퍼티 없이 생성
const user1: User = {
id: "U001",
name: "홍길동"
// age와 email이 없지만 선택적이므로 에러 없음
};
// ✅ OK: 선택적 프로퍼티 포함
const user2: User = {
id: "U002",
name: "김철수",
age: 30,
email: "[email protected]"
};
// 선택적 프로퍼티 사용 시 주의
function printAge(user: User) {
// user.age는 number | undefined 타입
// 직접 사용하면 에러 가능성
// ❌ 위험: age가 undefined일 수 있음
// console.log(user.age.toFixed(0)); // 런타임 에러 가능
// ✅ 안전: 타입 가드 사용
if (user.age !== undefined) {
// 이 블록 안에서 user.age는 number 타입으로 좁혀짐
console.log(user.age.toFixed(0));
}
// ✅ 안전: Optional Chaining
console.log(user.age?.toFixed(0)); // undefined면 undefined 반환
// ✅ 안전: 기본값 제공
const age = user.age ?? 0; // undefined면 0 사용
console.log(age);
}
printAge(user1); // age 없음
printAge(user2); // age 있음선택적 프로퍼티의 장점:
- 유연한 객체 구조 정의
- 부분 업데이트 시 유용
- API 응답처럼 일부 필드가 없을 수 있는 경우
읽기 전용 프로퍼티
readonly 키워드로 변경 불가능한 프로퍼티를 정의할 수 있습니다:
interface User {
readonly id: string; // 읽기 전용: 초기화 후 변경 불가
name: string; // 일반 프로퍼티: 변경 가능
age: number;
}
// 객체 생성 시 초기화
const user: User = {
id: "U001", // 초기화 ✅
name: "홍길동",
age: 25
};
// 일반 프로퍼티는 변경 가능
user.name = "김철수"; // ✅ OK
user.age = 30; // ✅ OK
// readonly 프로퍼티는 변경 불가
// user.id = "U002"; // ❌ 컴파일 에러
// 에러 메시지:
// Cannot assign to 'id' because it is a read-only property.
// 실전 예시: 데이터베이스 엔티티
interface Post {
readonly id: string; // DB에서 자동 생성된 ID
readonly createdAt: Date; // 생성 시간 (변경 불가)
title: string; // 제목 (수정 가능)
content: string; // 내용 (수정 가능)
updatedAt: Date; // 수정 시간 (수정 가능)
}
const post: Post = {
id: "POST001",
createdAt: new Date(),
title: "첫 게시글",
content: "내용",
updatedAt: new Date()
};
// 게시글 수정
post.title = "수정된 제목"; // ✅ OK
post.content = "수정된 내용"; // ✅ OK
post.updatedAt = new Date(); // ✅ OK
// post.id = "POST002"; // ❌ 에러: ID는 변경 불가
// post.createdAt = new Date(); // ❌ 에러: 생성 시간 변경 불가readonly vs const:
readonly: 프로퍼티에 사용 (객체의 속성)const: 변수에 사용 (변수 자체)
const user: User = { id: "U001", name: "홍길동", age: 25 };
// const: user 변수 자체를 재할당 불가
// user = { ....}; // ❌ 에러
// readonly: user.id 프로퍼티를 변경 불가
// user.id = "U002"; // ❌ 에러2. 함수 타입
메서드
interface Calculator {
add(a: number, b: number): number;
subtract(a: number, b: number): number;
multiply?(a: number, b: number): number; // 선택적
}
const calc: Calculator = {
add(a, b) {
return a + b;
},
subtract(a, b) {
return a - b;
}
};
console.log(calc.add(10, 5));
console.log(calc.subtract(10, 5));함수 타입
// 타입 정의
interface MathOperation {
(a: number, b: number): number;
}
const add: MathOperation = (a, b) => a + b;
const multiply: MathOperation = (a, b) => a * b;
console.log(add(10, 5));
console.log(multiply(10, 5));생성자 타입
interface ClockConstructor {
new (hour: number, minute: number): ClockInterface;
}
interface ClockInterface {
tick(): void;
}
class DigitalClock implements ClockInterface {
constructor(h: number, m: number) {}
tick() {
console.log("beep beep");
}
}
function createClock(
ctor: ClockConstructor,
hour: number,
minute: number
): ClockInterface {
return new ctor(hour, minute);
}
const clock = createClock(DigitalClock, 12, 17);
clock.tick();3. 인덱스 시그니처
문자열 인덱스
interface StringMap {
[key: string]: string;
}
const colors: StringMap = {
red: "#FF0000",
green: "#00FF00",
blue: "#0000FF"
};
console.log(colors[red]);
console.log(colors.green);숫자 인덱스
// 타입 정의
interface NumberArray {
[index: number]: string;
}
const fruits: NumberArray = ["사과", "바나나", "오렌지"];
console.log(fruits[0]);
console.log(fruits[1]);혼합 사용
interface Dictionary {
[key: string]: string | number;
length: number;
}
const dict: Dictionary = {
name: "홍길동",
age: 25,
length: 2
};4. Interface 확장
extends
interface Person {
name: string;
age: number;
}
interface Employee extends Person {
employeeId: string;
department: string;
}
const employee: Employee = {
name: "홍길동",
age: 30,
employeeId: "E001",
department: "개발팀"
};다중 확장
interface Timestamped {
createdAt: Date;
updatedAt: Date;
}
interface Identifiable {
id: string;
}
interface User extends Identifiable, Timestamped {
name: string;
email: string;
}
const user: User = {
id: "U001",
name: "홍길동",
email: "[email protected]",
createdAt: new Date(),
updatedAt: new Date()
};5. Interface 병합
Declaration Merging
interface User {
name: string;
}
interface User {
age: number;
}
const user: User = {
name: "홍길동",
age: 25
};라이브러리 확장
interface Window {
myCustomProperty: string;
}
window.myCustomProperty = "Hello!";
console.log(window.myCustomProperty);6. 클래스와 Interface
implements
interface Animal {
name: string;
makeSound(): void;
}
class Dog implements Animal {
name: string;
constructor(name: string) {
this.name = name;
}
makeSound() {
console.log("멍멍!");
}
}
const dog = new Dog("바둑이");
dog.makeSound();다중 구현
interface Flyable {
fly(): void;
}
interface Swimmable {
swim(): void;
}
class Duck implements Flyable, Swimmable {
fly() {
console.log("날아간다!");
}
swim() {
console.log("수영한다!");
}
}
const duck = new Duck();
duck.fly();
duck.swim();7. Interface vs Type Alias
비교
| 특징 | Interface | Type Alias |
|---|---|---|
| 객체 타입 | ✅ | ✅ |
| Union/Intersection | ❌ | ✅ |
| 확장 | extends | & |
| 병합 | ✅ | ❌ |
| 원시 타입 | ❌ | ✅ |
예제
// Interface
interface User {
name: string;
}
interface User {
age: number;
}
// Type Alias
type Person = {
name: string;
};
// Type Alias는 Union 가능
type ID = string | number;
type Status = "active" | "inactive";
// Intersection
type Employee = Person & {
employeeId: string;
};8. 실전 예제
예제 1: API 응답
interface ApiResponse<T> {
success: boolean;
data: T;
error?: string;
timestamp: Date;
}
interface User {
id: string;
name: string;
email: string;
}
async function fetchUser(id: string): Promise<ApiResponse<User>> {
try {
const response = await fetch(`/api/users/${id}`);
const data = await response.json();
return {
success: true,
data,
timestamp: new Date()
};
} catch (error) {
return {
success: false,
data: null as any,
error: "에러 발생",
timestamp: new Date()
};
}
}예제 2: 폼 검증
interface FormField {
value: string;
error: string | null;
touched: boolean;
}
interface LoginForm {
email: FormField;
password: FormField;
}
const form: LoginForm = {
email: {
value: "",
error: null,
touched: false
},
password: {
value: "",
error: null,
touched: false
}
};
function validateEmail(email: string): string | null {
const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return regex.test(email) ? null : "올바른 이메일 형식이 아닙니다";
}
form.email.value = "[email protected]";
form.email.error = validateEmail(form.email.value);
form.email.touched = true;예제 3: 이벤트 핸들러
interface ClickEvent {
x: number;
y: number;
button: "left" | "right";
}
interface EventHandler<T> {
(event: T): void;
}
const handleClick: EventHandler<ClickEvent> = (event) => {
console.log(`클릭: (${event.x}, ${event.y}), 버튼: ${event.button}`);
};
handleClick({ x: 100, y: 200, button: "left" });정리
핵심 요약
- Interface: 객체 구조 정의
- 선택적 프로퍼티:
? - 읽기 전용:
readonly - 확장:
extends(다중 가능) - 구현:
implements(다중 가능) - 병합: Declaration Merging
Interface 사용 시기
- 객체 타입 정의
- 클래스 구조 강제
- 라이브러리 확장
- API 응답 타입
다음 단계
관련 글
- TypeScript 고급 타입 | Union, Intersection, Literal 타입
- TypeScript 제네릭 | Generics 완벽 가이드
- C++ Adapter Pattern 완벽 가이드 | 인터페이스 변환과 호환성
- C++ numeric_limits |
- C++ 인터페이스 설계와 PIMPL: 컴파일 의존성을 끊고 바이너리 호환성(ABI) 유지하기 [#38-3]
심화 부록: 구현·운영 관점
이 부록은 앞선 본문에서 다룬 주제(「TypeScript 인터페이스 | Interface 완벽 가이드」)를 구현·런타임·운영 관점에서 다시 압축합니다. 도메인별 세부 구현은 글마다 다르지만, 입력 검증 → 핵심 연산 → 부작용(I/O·네트워크·동시성) → 관측의 흐름으로 장애를 나누면 원인 추적이 빨라집니다.
내부 동작과 핵심 메커니즘
flowchart TD A[입력·요청·이벤트] --> B[파싱·검증·디코딩] B --> C[핵심 연산·상태 전이] C --> D[부작용: I/O·네트워크·동시성] D --> E[결과·관측·저장]
sequenceDiagram participant C as 클라이언트/호출자 participant B as 경계(런타임·게이트웨이·프로세스) participant D as 의존성(API·DB·큐·파일) C->>B: 요청/이벤트 B->>D: 조회·쓰기·RPC D-->>B: 지연·부분 실패·재시도 가능 B-->>C: 응답 또는 오류(코드·상관 ID)
- 불변 조건(Invariant): 버퍼 경계, 프로토콜 상태, 트랜잭션 격리, FD 상한 등 단계별로 문장으로 적어 두면 디버깅 비용이 줄어듭니다.
- 결정성: 순수 층과 시간·네트워크·스케줄에 의존하는 층을 분리해야 테스트와 장애 분석이 쉬워집니다.
- 경계 비용: 직렬화, 인코딩, syscall 횟수, 락 경합, 할당·GC, 캐시 미스를 의심 목록에 둡니다.
- 백프레셔: 생산자가 소비자보다 빠를 때 버퍼·큐·스트림에서 속도를 줄이는 신호를 어디에 둘지 정의합니다.
프로덕션 운영 패턴
| 영역 | 운영 관점 질문 |
|---|---|
| 관측성 | 요청 단위 상관 ID, 에러율·지연 p95/p99, 의존성 타임아웃·재시도가 대시보드에 보이는가 |
| 안전성 | 입력 검증·권한·비밀·감사 로그가 코드 경로마다 일관적인가 |
| 신뢰성 | 재시도는 멱등 연산에만 적용되는가, 서킷 브레이커·백오프·DLQ가 있는가 |
| 성능 | 캐시·배치 크기·커넥션 풀·인덱스·백프레셔가 데이터 규모에 맞는가 |
| 배포 | 롤백 룬북, 카나리/블루그린, 마이그레이션·피처 플래그가 문서화되어 있는가 |
| 용량 | 피크 트래픽·디스크·FD·스레드 풀 상한을 주기적으로 검증하는가 |
스테이징은 데이터 양·네트워크 RTT·동시성을 프로덕션에 가깝게 맞출수록 재현율이 올라갑니다.
확장 예시: 엔드투엔드 미니 시나리오
앞선 본문 주제(「TypeScript 인터페이스 | Interface 완벽 가이드」)를 배포·운영 흐름에 맞춰 옮긴 체크리스트입니다. 도메인에 맞게 단계 이름만 바꿔 적용할 수 있습니다.
- 입력 계약 고정: 스키마·버전·최대 페이로드·타임아웃·에러 코드를 경계에 둔다.
- 핵심 경로 계측: 요청 ID, 단계별 지연, 외부 호출 결과 코드를 로그·메트릭·트레이스에서 한 흐름으로 본다.
- 실패 주입: 의존성 타임아웃·5xx·부분 데이터·락 대기를 스테이징에서 재현한다.
- 호환·롤백: 설정/마이그레이션/클라이언트 버전을 되돌릴 수 있는지 확인한다.
- 부하 후 검증: 피크 대비 p95/p99, 에러율, 리소스 상한, 알림 임계값을 점검한다.
handle(request):
ctx = newCorrelationId()
validated = validateSchema(request)
authorize(validated, ctx)
result = domainCore(validated)
persistOrEmit(result, idempotentKey)
recordMetrics(ctx, latency, outcome)
return result문제 해결(Troubleshooting)
| 증상 | 가능 원인 | 조치 |
|---|---|---|
| 간헐적 실패 | 레이스, 타임아웃, 외부 의존성, DNS | 최소 재현 스크립트, 분산 트레이스·로그 상관관계, 재시도·서킷 설정 점검 |
| 성능 저하 | N+1, 동기 I/O, 락 경합, 과도한 직렬화, 캐시 미스 | 프로파일러·APM으로 핫스팟 확인 후 한 가지씩 제거 |
| 메모리 증가 | 캐시 무제한, 구독/리스너 누수, 대용량 버퍼, 커넥션 미반납 | 상한·TTL·힙/FD 스냅샷 비교 |
| 빌드·배포만 실패 | 환경 변수, 권한, 플랫폼 차이, lockfile | CI 로그와 로컬 diff, 런타임·이미지 버전 핀 |
| 설정 불일치 | 프로필·시크릿·기본값, 리전 | 스키마 검증된 설정 단일 소스와 배포 매트릭스 표준화 |
| 데이터 불일치 | 비멱등 재시도, 부분 쓰기, 캐시 무효화 누락 | 멱등 키·아웃박스·트랜잭션 경계 재검토 |
권장 순서: (1) 최소 재현 (2) 최근 변경 범위 축소 (3) 환경·의존성 차이 (4) 관측으로 가설 검증 (5) 수정 후 회귀·부하 테스트.
배포 전에는 git add → git commit → git push 후 npm run deploy 순서를 권장합니다.
자주 묻는 질문 (FAQ)
Q. 이 내용을 실무에서 언제 쓰나요?
A. TypeScript 인터페이스: Interface 완벽 가이드. Interface 기본·함수 타입로 흐름을 잡고 원리·코드·실무 적용을 한글로 정리합니다. TypeScript·Interface·인터페이스 중심으로 설… 실무에서는 위 본문의 예제와 선택 가이드를 참고해 적용하면 됩니다.
Q. 선행으로 읽으면 좋은 글은?
A. 각 글 하단의 이전 글 또는 관련 글 링크를 따라가면 순서대로 배울 수 있습니다. C++ 시리즈 목차에서 전체 흐름을 확인할 수 있습니다.
Q. 더 깊이 공부하려면?
A. cppreference와 해당 라이브러리 공식 문서를 참고하세요. 글 말미의 참고 자료 링크도 활용하면 좋습니다.
같이 보면 좋은 글 (내부 링크)
이 주제와 연결되는 다른 글입니다.
- TypeScript 고급 타입 | Union, Intersection, Literal 타입
- TypeScript 제네릭 | Generics 완벽 가이드
- [TypeScript Interfaces | Complete Guide](/en/blog/typescript-series-03-interface/
이 글에서 다루는 키워드 (관련 검색어)
TypeScript, Interface, 인터페이스, 타입 등으로 검색하시면 이 글이 도움이 됩니다.