[TS] 1368 seconds understand typescript generic tool types!

Brother Po carefully prepared 《 Easy to learn TypeScript》  The video tutorial has been updated to Issue 19 了 , The aggregate playback volume has reached  14W+. Through vivid animation , Make it easy for you to understand TypeScript Difficulties and core knowledge points ！

If you just touched TypeScript Soon , In the reading TypeScript The usage of the built-in tool type and the internal implementation of the article , You might see Pick Tool type , You may feel strange to this type of grammar .

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 analogy . Next, brother Po will use JavaScript To help you quickly understand Pick The syntax behind the tool type .

function Pick(obj, keys) {
  const ret = {};
  for (const key of keys) {
    ret[key] = obj[key];
  }
  return ret;
}

const user = {
  id: 666,
  name: " A Bao Ge ",
  address: " Xiamen ",
};

const PickedUser = MyPick(user, ["id", "name"]);

In the above code ,function Is a keyword used to declare a function ,Pick It's the function name , And in parentheses obj and keys Is the parameter , What is defined in braces is the function body .

And for Pick For tool types ,type Keyword is used to alias a type , Easy to reuse ,Pick Is the name of the type . Within angle brackets T and K It belongs to type parameter , And JavaScript The difference between parameters in functions is that type parameters store types , and JavaScript Function parameters store values .

among extends Is the syntax of generic constraints , Scope for constraint type . The specific implementation of this tool type is in braces , It has been used. TypeScript The syntax of mapping types .

Actually , You can take TypeScript Built in tool types are understood as special functions , They are used to deal with TypeScript Types that exist in . How to call the tool type and call JavaScript The difference between functions is that angle brackets are used .

Last , For your understanding , Po brother demonstrates it in the form of pictures Pick Execution process of tool type .

If you want to know more about mapping types , Can watch “ It was used TS Mapping type , Colleagues call experts ！” This article .

Scan the code to check   Easy to learn TypeScript  Series video tutorial

（ Currently updated  19  period ）

You like to learn in this form TS Well ？ Like it , Remember to praise and collect .