Typescript 시리즈 - 유틸리티 유형 선택

나는 더 나은 Typescript를 배우고 이해하기 위해 이 시리즈를 하고 있다고 말하면서 시작하고 싶습니다. 그러니 자유롭게 저를 수정하거나 저에게 연락하십시오.

Pick 유틸리티 유형이란 무엇입니까?

Pick <Type, Keys> 유형에서 속성 키(문자열 리터럴 또는 문자열 리터럴의 합집합) 집합을 선택하여 유형을 생성합니다. 즉, 새 유형은 유형 속성Docs에서 추출된 속성의 하위 그룹입니다.

작동 방식은 다음과 같습니다.

interface Todo {
  title: string;
  description: string;
  completed: boolean;
}

type TodoPreview = Pick<Todo, "title" | "completed">;

const todo: TodoPreview = {
  title: "Clean room",
  completed: false,
};

그래서 보시다시피 Todo TypePreview에서 원하는 키 2개만 골랐습니다.

그러나 후드 아래에서 어떻게 작동합니까?

type Pick<Type, Key extends keyof Type> = {
    [k in Key]: Type[k];
};

그래서 까다로운 부분을 분해합시다.
Key extends keyof Type 이 경우 키워드 extends는 키가 부모에 존재해야 함을 의미합니다. 여기서 keyof Type은 부모입니다. 위에서 Todo 인터페이스를 예로 들면 키는 "title"| "설명"| "완전한"
[k in Key] in 키워드는 K가 키에서 추출된 키 중 하나여야 함을 의미합니다("title"| "description"| "completed").
Type[k] 마지막으로 여기서는 단순히 속성 유형에 액세스합니다. 개체의 값에 액세스하는 방법과 동일하게 다음 예제를 살펴보겠습니다.

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

// Access the type of name
Person['name'] // string

// Like saying Type[K] where Type is Person and name is K

이제 Pick 유틸리티 유형이 어떻게 작동하는지 알게 되었습니다!

결론

Pick 유틸리티 유형은 기존 유형에서 새 유형을 동적으로 구성할 수 있기 때문에 매우 편리합니다.

고맙습니다!

당신은 여기에서 나를 찾을 수 있습니다