Mapped Types는 TypeScript에서 기존 타입을 변형하거나 새로운 타입을 생성하는 데
유용한 기능입니다.

각 Mapped Type에 대해 더 자세히 작성하였하고, 예제 코드를 통해 포스팅 하였습니다.

1. Partial

모든 프로퍼티를 선택적으로 만듭니다.

즉, 해당 타입의 모든 필드가 선택적으로 사용할 수 있습니다.

interface User {
  id: number;
  name: string;
  email: string;
}

// Partial을 사용하여 모든 필드를 선택적으로 만든다.
type PartialUser = Partial<User>;

const user1: PartialUser = {
  id: 1,
}; // name과 email은 선택적

2. Pick

주어진 타입에서 특정 프로퍼티만 선택하여 새로운 타입을 만듭니다.

interface User {
  id: number;
  name: string;
  email: string;
}

// id와 name만 선택
type UserNameAndId = Pick<User, 'id' | 'name'>;

const user2: UserNameAndId = {
  id: 1,
  name: 'John',
}; // email은 선택적

3. Omit

주어진 타입에서 특정 프로퍼티를 생략하여 새로운 타입을 만듭니다.

interface User {
  id: number;
  name: string;
  email: string;
}

// email을 생략
type UserWithoutEmail = Omit<User, 'email'>;

const user3: UserWithoutEmail = {
  id: 1,
  name: 'Jane',
}; // email 필드는 없음

4. Intersection

두 개 이상의 타입의 프로퍼티를 결합하여 새로운 타입을 만듭니다.

interface A {
  a: number;
}

interface B {
  b: string;
}

// A와 B의 모든 프로퍼티를 포함
type AB = A & B;

const combined: AB = {
  a: 1,
  b: 'Hello',
}; // A의 프로퍼티와 B의 프로퍼티를 모두 가짐

5. Composition

조합하여 더 복잡한 타입을 만들 수 있습니다.

여러 Mapped Types를 조합하여 중첩된 구조를 만들 수 있습니다.

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

// 모든 프로퍼티를 선택적으로 만들고, 그 중에서 email을 제외
type OptionalUserWithoutEmail = Omit<Partial<User>, 'email'>;

const user4: OptionalUserWithoutEmail = {
  id: 1,
  name: 'Alice',
  // email은 없음, age도 선택적
};

결론

Mapped Types는 TypeScript에서 타입의 변형을 쉽게 할 수 있도록 도와줍니다.

이를 통해 코드의 재사용성을 높이고, 타입 안전성을 유지할 수 있다는것을 배웠습니다.

profile
꾸준히, 의미있는 사이드 프로젝트 경험과 문제해결 과정을 기록하기 위한 공간입니다.

0개의 댓글