TypeScript Pick: 타입에서 속성 골라내기(예제)

Pick<T, K>는 T의 속성 중 K에 이름이 있는 것만으로 객체 타입을 만드는 내장 유틸리티 타입입니다. 함수나 컴포넌트가 큰 타입의 필드 몇 개만 필요할 때 씁니다.

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

type UserPreview = Pick<User, "id" | "name">;
// { id: number; name: string }

function renderPreview(user: UserPreview): string {
  return `#${user.id} ${user.name}`;
}

const ada: User = {
  id: 1, name: "Ada", email: "ada@example.com",
  passwordHash: "x9f...", lastLogin: "2024-03-15",
};

console.log(renderPreview(ada));                  // #1 Ada
console.log(renderPreview({ id: 2, name: "Linus" })); // #2 Linus

renderPreview는 사용하는 것만 요구하므로 완전한 User도, 평범한 { id, name } 객체도 받습니다. 그래서 호출하기도 테스트하기도 쉽습니다. Pick은 타입 전용입니다. 런타임에서 ada 객체는 여전히 다섯 속성을 모두 가지고 있습니다.

문법과 키 검사

Pick<Type, Keys>

Keys는 키 하나 또는 키의 유니언이며, 각 키는 Type에 존재해야 합니다. TypeScript 표준 라이브러리의 정의가 이를 제약으로 둡니다.

type Pick<T, K extends keyof T> = {
  [P in K]: T[P];
};

K extends keyof T 때문에 철자가 틀리거나 없는 키는 컴파일 오류가 되고, 에디터가 키 이름을 자동 완성해 줄 수 있습니다.

interface Product {
  sku: string;
  title: string;
  price: number;
  stock: number;
}

type PriceTag = Pick<Product, "title" | "price">;

const tag: PriceTag = { title: "Lamp", price: 39 };
console.log(`${tag.title}: $${tag.price}`); // Lamp: $39

// @ts-expect-error: Type '"cost"' does not satisfy the constraint 'keyof Product'
type Broken = Pick<Product, "cost">;

오류는 error TS2344: Type '"cost"' does not satisfy the constraint 'keyof Product'.입니다. 키를 검사하지 않는 Omit과 다른 점입니다.

Pick은 readonly와 선택적 속성을 유지한다

Pick은 T의 키를 매핑하므로 고른 속성은 각자의 수정자를 유지합니다.

interface Account {
  readonly id: number;
  email?: string;
  plan: "free" | "pro";
}

type AccountRef = Pick<Account, "id" | "email">;
// { readonly id: number; email?: string }

const ref: AccountRef = { id: 7 }; // email is still optional
// @ts-expect-error: Cannot assign to 'id' because it is a read-only property
ref.id = 8;

console.log(ref); // { id: 8 }

readonly는 컴파일 타임 검사일 뿐이므로 마지막 줄은 { id: 8 }을 보여 줍니다. 대입은 오류로 보고되었고, @ts-expect-error로 억제되었으며, 그래도 실행되었습니다. 고르면서 수정자를 바꾸려면 결과를 감싸세요: Partial<Pick<Account, "plan">> 또는 Required<Pick<Account, "email">>.

Pick vs Omit

Pick은 남길 것을, Omit은 뺄 것을 지정합니다. 지금은 둘 다 같은 결과를 주지만, 원본 타입이 커지면 다르게 동작합니다.

interface Order {
  id: number;
  total: number;
  cardLast4: string;
  // added later: internalNotes: string;
}

type Receipt = Pick<Order, "id" | "total">;   // stays { id; total }
type AdminView = Omit<Order, "cardLast4">;    // will include internalNotes too

const receipt: Receipt = { id: 1, total: 49.9 };
const admin: AdminView = { id: 1, total: 49.9 };
console.log(receipt, admin); // { id: 1, total: 49.9 } { id: 1, total: 49.9 }

서버 밖으로 나가는 데이터에는 Pick이 더 안전한 기본값입니다. 누군가 의도적으로 추가하지 않는 한 타입에 아무것도 나타나지 않기 때문입니다.

중첩 타입에서 고르기

Pick은 최상위 키만 봅니다. Pick<Customer, "address.city"> 같은 점 경로는 중첩 선택이 아니라 오류(TS2344)입니다. 인덱스 접근 타입으로 중첩 타입에 들어간 다음 거기서 고르세요.

interface Customer {
  id: number;
  name: string;
  address: {
    street: string;
    city: string;
    country: string;
  };
}

type City = Pick<Customer["address"], "city">; // { city: string }

// Keep the shape, trim the nested object
type ShippingLabel = Pick<Customer, "name"> & {
  address: Pick<Customer["address"], "city" | "country">;
};

const label: ShippingLabel = {
  name: "Ada",
  address: { city: "London", country: "UK" },
};

const city: City = { city: label.address.city };
console.log(label, city.city);
// { name: 'Ada', address: { city: 'London', country: 'UK' } } London

Customer["address"]는 address 속성의 타입입니다. 같은 문법으로 배열 요소에도 접근할 수 있습니다. orders: Order[] 속성이라면 Customer["orders"][number]는 Order입니다.

타입이 지정된 pick() 함수

Pick은 런타임에 아무것도 하지 않습니다. 작은 제네릭 함수로 고른 속성을 새 객체에 복사하고 정확히 Pick<T, K>를 반환할 수 있습니다.

function pick<T extends object, K extends keyof T>(obj: T, ...keys: K[]): Pick<T, K> {
  const result = {} as Pick<T, K>;
  for (const key of keys) {
    result[key] = obj[key];
  }
  return result;
}

const book = { id: 3, title: "Dune", author: "Herbert", pages: 412 };

const summary = pick(book, "title", "author"); // { title: string; author: string }
console.log(summary);          // { title: 'Dune', author: 'Herbert' }
console.log(Object.keys(summary)); // [ 'title', 'author' ]
// pick(book, "isbn") would be error TS2345: Argument of type '"isbn"' is not assignable
// to parameter of type '"author" | "id" | "pages" | "title"'.

K extends keyof T 덕분에 TypeScript가 문자열 인수로부터 K를 추론하므로, 반환 타입은 정확히 고른 키만 가집니다. 빈 객체에는 아직 그 속성이 없으므로 {} as Pick<T, K> 단언이 필요하며, 루프가 속성을 채웁니다.

값 타입으로 속성 고르기

Pick은 키 이름으로 고릅니다. "모든 문자열 필드"처럼 속성의 타입으로 고르려면 키 필터가 있는 매핑된 타입을 작성하세요.

type PickByValue<T, V> = {
  [P in keyof T as T[P] extends V ? P : never]: T[P];
};

interface Article {
  id: number;
  title: string;
  slug: string;
  views: number;
  published: boolean;
}

type TextFields = PickByValue<Article, string>;   // { title: string; slug: string }
type NumberFields = PickByValue<Article, number>; // { id: number; views: number }

const text: TextFields = { title: "Hello", slug: "hello" };
const nums: NumberFields = { id: 1, views: 120 };
console.log(text, nums); // { title: 'Hello', slug: 'hello' } { id: 1, views: 120 }

as 절은 타입이 맞으면 각 키를 그대로, 아니면 never로 매핑하고, never 키는 제거됩니다. 한 가지 미묘한 점이 있습니다. 선택적 속성의 타입에는 undefined가 포함되므로 선택적인 subtitle?: string은 여기서 string으로 치지 않습니다. 포함하려면 string | undefined로 검사하세요.