[TypeScript] Record랑 Interface 뭐가 다르지 .. ?

✨ Record<K, T>

K는 key, T는 value라고 보면 된다.

그래서 Record는 사실상 key와 value의 타입을 지정한다.

type User = Record<string, number>;

const userAge: User = {
  Alice: 25,
  Bob: 30,
  Charlie: 22,
};

 

예시를 보면 바로 이해하기 쉬운데 여기서 key는 String, 값은 Number만 가능하다.

 

type StatusCodes = Record<"success" | "error" | "loading", string>;

const status: StatusCodes = {
  success: "Operation was successful",
  error: "There was an error",
  loading: "Loading...",
};

이렇게 더 구체적으로 key를 정의할 수도 있는데,

key에는  "success", "error", "loading"만 들어갈 수 있도록 고정되어 있고

value는 string만 들어갈 수 있다.

 

type Item = Record<"id" | "name" | "price", string | number>;

const product: Item = {
  id: 101,
  name: "Laptop",
  price: 1200,
};

여기 좀 더 복잡한 예시가 있는데 key에는 id,name,price만 들어갈 수 있고 value는 String이나 Number가 들어갈 수 있다.

 

 

📍 Record는 이렇게 정해진 키에 대해 일관된 값을 가지도록 타입을 정의할 때 유용하다.

 

음 그러면 Interface랑은 어떻게 다를까 ? 🤔

---

✨ interface

interface는 객체에 포함될 속성의 이름과 타입을 지정하여 객체 구조를 더 명확하게 정의할 수 있다.

interface User {
  name: string;
  age: number;
}

const user: User = {
  name: 'Alice',
  age: 30,
};

 

여기서는 name의 value는 string이어야 하고 age는 numer여야 한다는 것을 명확하게 정의하고 있다.

 

이걸 만약 Record로 바꿔본다면 어떨까?

type User = Record<'name' | 'age', string|number>;

const user: User = {
  name: 'Alice',
  age: '30',  // 주의! 값이 'string'으로 지정되었음
};

 

Record를 사용하면 name과 age라는 key의 value로 string, number 둘 다 허용하는데, 여기서 문제가 발생한다.

value로 String과 Number 모두를 받을 수 있기 때문에

name에 Number가 들어가도, age에 String이 들어가도 에러가 나지 않는다.

이건 개발자가 원하던 그림은 아닐 것이다.

결론적으로 Record는 value의 타입이 모두 동일할 때 사용해야 안정적으로 사용할 수 있다.

---

🧐 언제 interface를 사용하고, 언제 Record를 사용해야 할까?

1. interface 사용 상황

• 구체적인 구조를 명시적으로 정의하고, 객체가 특정 속성을 가져야 할 때 사용.
• 확장하거나, 인터페이스를 다른 타입과 합성할 때 유용.
• interface는 다양한 속성을 다루는 복잡한 객체에 사용.

interface Person {
  name: string;
  age: number;
  greet(): void;
}

const person: Person = {
  name: 'John',
  age: 25,
  greet() {
    console.log(`Hello, my name is ${this.name}`);
  },
};

 

2. Record 사용 상황

• 정해진 키에 대해 동일한 타입의 값을 가지는 객체를 다룰 때 사용. 
• 키가 명확하게 정해져 있을 때, 속성들이 동일한 타입을 가지는 객체를 정의할 때 유용.
• 동적으로 생성된 키나 유연한 키에 대해 값 타입을 정의할 때 사용.

type Status = Record<"pending" | "completed" | "failed", boolean>;

const taskStatus: Status = {
  pending: false,
  completed: true,
  failed: false,
};