답변.

유틸리티 타입 Pick<T, K>는 기존 타입이나 인터페이스에서 일부 필드를 선택적으로 복사하기 위해 TypeScript에 추가되었습니다.

질문의 역사

개발 중에 반복적으로 약간의 변형을 가진 동일한 데이터 구조가 사용되는 경우가 많습니다. Pick이 등장하기 전에는 필요한 필드를 수작업으로 복사하여 새로운 인터페이스를 만들어야 했으며, 이는 코드의 중복과 초기 구조를 변경할 때 오류를 초래했습니다.

문제

대규모 인터페이스에서 일부 필드만을 사용하여 함수의 입력 또는 출력 데이터를 타입화해야 하며, 과도한 데이터를 피하고 계약을 최대한 구체화할 필요가 있습니다.

해결책

Pick은 키 K를 통해 타입 T의 부분 속성을 추출하는 문제를 해결합니다:

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

예:

interface User { id: number; name: string; email: string; }
type Credentials = Pick<User, 'email' | 'name'>;

const creds: Credentials = {
  email: "user@example.com",
  name: "User Name",
};

주요 특징:

필요한 키만으로 새 타입을 형성합니다;
select 쿼리, 폼, 출력의 타입화에 매우 유용합니다;
수동 코드와 리팩토링 시 오류를 최소화합니다.

함정이 있는 질문들.

Pick과 Omit의 차이점은 무엇인가요?

Pick은 타입의 나열된 필드만 선택하고; Omit은 그 필드를 구조에서 제외합니다.

type PartialUser = Omit<User, 'id'>; // id를 제외한 모든 필드

Pick을 사용하여 존재하지 않는 속성을 선택할 수 있나요?

아니요, 키 K는 반드시 원래 타입의 키여야 하며 그렇지 않으면 컴파일 오류가 발생합니다.

Pick은 선택적 또는 readonly 필드에 영향을 미칠 수 있나요?

Pick은 원래 타입에 존재했던 속성 수정자(optional, readonly)를 유지하며, 이를 새로 복사합니다.

일반적인 오류와 안티패턴

Pick의 목록을 명시적으로 문자열로(즉, "id, name") 지정하여 컴파일 오류를 초래하는 것.
존재하지 않는 필드를 선택하거나 잘못된 키 자동 생성.
Omit, Partial, Required가 필요한 경우에 Pick을 사용하는 것.

실제 예제

부정적인 사례

데이터 입력 폼을 작업할 때 개발자가 User에 추가된 새로운 필수 속성을 잊고 수동으로 자체 타입을 정의했습니다. 인터페이스가 업데이트된 후 폼이 고장났습니다.

장점:

구조의 명확한 설명.

단점:

typedef의 낡을 위험과 리팩토링 시 버그 발생 가능성이 높습니다.

긍정적인 사례

필요한 필드를 선택하기 위해 Pick을 사용합니다:

type FormFields = Pick<User, 'email' | 'name'>;

User의 변화는 자동으로 폼에 반영됩니다.