Understand the Pick Tool Type of TypeScript in Seconds

If you are a beginner to TypeScript, you may be unfamiliar with the syntax of Pick tool type when you read articles on the usage and internal implementation of TypeScript's built-in tool types.

type Pick<T, K extends keyof T> = {
    [P in K]: T[P];
};
type User = {
  id: number;
  name: string;
  address: string;
};
type PickedUser = Pick<User, "id" | "name">;

In fact, a better way to learn new things is to use analogies. So, we will use functions in JavaScript to help you quickly understand the syntax behind the Pick tool type in the following part.

function Pick(obj, keys) {
  const ret = {};
  for (const key of keys) {
    ret[key] = obj[key];
  }
  return ret;
}
const user = {
  id: 666,
  name: "ITCodar",
  address: "USA",
};
const PickedUser = MyPick(user, ["id", "name"]);

In the above code example, function is the keyword used to declare the function; Pick is the function name; obj and keys in parentheses are parameters; the function body is defined in curly brackets.

For the Pick tool type, the type keyword is used to give an alias to the type, which is convenient for repeated use. Pick is the name of the type. The T and K inside the angle brackets are type parameters. The difference from the parameters in the JavaScript function is that the type parameter stores the type, while the JavaScript function parameter stores the value.

"extends" is the syntax for generic constraints and it is used to constrain the scope of a type. Inside the curly braces is the concrete implementation of the tool type, which uses the syntax of TypeScript mapping types.

In fact, you can think of TypeScript's built-in utility types as special functions that are used to handle types that exist in TypeScript. The difference between calling a utility type and calling a JavaScript function is the use of angle brackets.

Here, to help you have a better understanding, we will demonstrate the execution process of the Pick tool type in the following picture.

---

Related Topics