interface와 type의 차이, 객체 타입, 선택적·readonly 프로퍼티, 확장과 교차를 배운다.
인터페이스와 타입 별칭
객체의 "모양(shape)"을 정의하는 두 가지 도구가 interface 와 type 입니다. 둘은 비슷하지만 쓰임새에 차이가 있습니다. 객체 타입을 깔끔하게 표현하는 법을 익혀 봅시다.
학습 목표
interface로 객체 타입을 정의한다.- 선택적 프로퍼티와
readonly를 사용한다. interface와type의 차이를 안다.- 확장(
extends)과 교차(&)로 타입을 조합한다.
객체 타입 정의
객체가 어떤 속성을 가지는지 interface 로 선언합니다.
interface User {
name: string;
age: number;
}
const user: User = { name: '민수', age: 20 };
선언한 속성이 빠지거나 타입이 다르면 오류가 납니다.
const wrong: User = { name: '영희' }; // ❌ age가 없음
선택적 프로퍼티
? 를 붙이면 있어도 되고 없어도 되는 속성이 됩니다.
interface Profile {
name: string;
bio?: string; // 선택적
}
const p1: Profile = { name: '민수' }; // OK
const p2: Profile = { name: '영희', bio: '개발자' }; // OK
readonly 프로퍼티
readonly 는 한 번 정해지면 다시 바꿀 수 없는 속성입니다.
interface Point {
readonly x: number;
readonly y: number;
}
const point: Point = { x: 10, y: 20 };
point.x = 5; // ❌ 읽기 전용 속성은 수정 불가
💡 TIP —
readonly는 "이 값은 절대 바뀌지 않는다"는 의도를 코드로 못 박는 방법입니다. 좌표·ID처럼 불변이어야 하는 값에 쓰세요.
타입 별칭 (type)
type 키워드로도 객체 모양을 정의할 수 있습니다. 또한 유니온·튜플 등 객체가 아닌 타입에도 이름을 붙일 수 있습니다.
type User = {
name: string;
age: number;
};
type ID = string | number; // 유니온에 이름 붙이기
type Pair = [string, number]; // 튜플에 이름 붙이기
interface vs type
대부분의 객체 타입은 둘 다 쓸 수 있습니다. 차이는 다음과 같습니다.
| 구분 | interface | type |
|---|---|---|
| 객체 모양 | O | O |
| 유니온·튜플 등 | X | O |
| 선언 병합 | O (같은 이름 합쳐짐) | X |
| 확장 방법 | extends | & (교차) |
💡 TIP — 일반적인 권장: 객체·클래스 모양은
interface, 유니온이나 복잡한 조합은type. 한 프로젝트 안에서 일관성만 지키면 됩니다.
확장 — extends
interface 는 다른 인터페이스를 상속받아 속성을 더할 수 있습니다.
interface Animal {
name: string;
}
interface Dog extends Animal {
breed: string;
}
const d: Dog = { name: '바둑이', breed: '진돗개' };
교차 타입 — &
type 은 & 로 여러 타입을 합칩니다. 두 타입의 속성을 모두 가진 타입이 됩니다.
type Animal = { name: string };
type Pet = { owner: string };
type PetAnimal = Animal & Pet;
const cat: PetAnimal = { name: '나비', owner: '민수' };
요약
interface와type으로 객체의 모양을 정의한다.?는 선택적 프로퍼티,readonly는 수정 불가 프로퍼티.type은 유니온·튜플 등 객체가 아닌 타입에도 쓸 수 있다.- 확장은
interface의extends, 조합은type의&. - 객체엔
interface, 복잡한 조합엔type을 쓰면 무난하다.
댓글 0
“TypeScript” 강좌에 대한 댓글입니다.