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
How to Convert Jquery Code to JavaScript
How to Use Js to Open an HTML Select to Show Its Option List
The Use of the Triple Exclamation Mark
How to Reload Datatables from Another Ajax Request With Onclick
Onclick Button Get from Database and Display on a Input Field Live
How to Set a Value to a File Input in HTML
How to Load All the Images from One of My Folder into My Web Page, Using Jquery/Javascript
Using JavaScript to Detect Whether the Url Exists Before Display in Iframe
How to Get Around .Push Is Not a Function in JavaScript
Check If Second String Is Rotation of Another String
Converting String Date in React/Javascript
Regular Expression to Get a String Between Two Strings in JavaScript
Javascript: Replace Last Occurrence of Text in a String
Dynamically Add Variable Name Value Pairs to Json Object
React Js Error: Is Not Defined React/Jsx-No-Undef
Wait for Http Request in Angular