
타입스크립트에서 객체의 구조를 정의하는 방법에는 두 가지가 있는데, 바로 1)
interface(인터페이스) 와 2)type(타입 별칭) 이다.
둘 다 비슷한 역할을 하지만 차이점이 있다고 하니 하나씩 알아보자!
interface User {
name: string;
age: number;
}
const user: User = {
name: "Alice",
age: 25
};
name, age 같은 속성의 타입을 강제한다.const wrongUser: User = {
name: "Bob"
}; // ❌ 오류! age 속성이 없음
const anotherUser: User = {
name: "Charlie",
age: "30"
}; // ❌ 오류! age는 숫자여야 함
: 인터페이스에서 선택적으로 들어갈 속성을 만들고 싶다면 ?를 사용하면 된다.
interface User {
name: string;
age?: number; // 선택적 속성
}
const user1: User = { name: "Alice" }; // ⭕ 가능
const user2: User = { name: "Bob", age: 30 }; // ⭕ 가능
?가 붙은 age는 있어도 되고 없어도 되는 속성이 된다.readonly): 인터페이스는 객체의 속성을 변경하지 못하도록 만들 수도 있는데, 이는 readonly를 사용하면 된다.
interface Car {
readonly brand: string;
model: string;
}
const myCar: Car = {
brand: "Tesla",
model: "Model 3"
};
myCar.model = "Model S"; // ⭕ 가능
myCar.brand = "BMW"; // ❌ 오류 발생 (brand는 readonly)
extends): 인터페이스는 다른 인터페이스를 확장할 수도 있다. 즉, 기존 인터페이스를 기반으로 새로운 인터페이스를 만들 수도 있다!
interface Animal {
name: string;
}
interface Dog extends Animal {
breed: string;
}
const myDog: Dog = {
name: "Buddy",
breed: "Golden Retriever"
};
Dog는 Animal의 속성을 자동으로 상속받게 된다!type User = {
name: string;
age: number;
};
const user: User = {
name: "Alice",
age: 25
};
: type도 객체의 타입을 정의할 수 있는데, 인터페이스와의 다른 점은 아래와 같다.
type과 interface의 차이점| interface | type | |
|---|---|---|
| 객체 타입 정의 | ✅ 가능 | ✅ 가능 |
| 확장 (extends) | ✅ 가능 | ❌ 불가능 (대신 & 사용) |
| 유니온 타입 사용 | ❌ 불가능 | ✅ 가능 |
| 기본 사용 추천 | 객체 타입 | 복잡한 타입 조합 |
type에서 &(교차 타입, 인터섹션) 사용: type은 interface 처럼 extends를 쓸 수는 없지만, & 연산자를 사용해서 여러 타입을 합칠 수 있다.
type Person = {
name: string;
};
type Employee = {
company: string;
};
type Worker = Person & Employee;
const worker: Worker = {
name: "Alice",
company: "Google"
};
Worker는 Person과 mployee를 합친 타입이 된다.interface → 객체의 구조를 정의할 때 (extends로 확장 가능)type → 유니온 타입이나 & 연산자로 여러 타입을 합칠 때✅ 일반적으로는 interface를 추천한다고 한다!
하지만 상황에 따라 type이 더 유용할 수도 있으니 알아서.. 잘.. 네..^^
interface와 type을 사용할 수 있다.interface)는 extends를 사용해 확장이 가능하다.type)은 & 연산자로 여러 타입을 합칠 수 있다.readonly)을 사용하면 값 변경을 막을 수 있다.