【TypeScript初学者】一次性理解TypeScript keyof & typeof和泛型

在按顺序学习 TypeScript 礼仪的过程中，我觉得随着泛型的出现，难度突然上升，理解水平下降。
但是，我有过通过理解一个具有一定组成的函数的符号来加深对相关符号的理解的经验，所以我想通过各种方式来分享这个符号，所以我写了一篇文章。

主题

那些刚接触 TypeScript 但对如何定义每种类型以及如何使用类型和接口有模糊理解的人
那些难以理解泛型的人

符号

它很快，但我想分享的符号如下。
它是一个函数表达式。

  const valueOfPerson = <O extends object, K extends keyof O>(
    o: O,
    k: K
  ): O[K] => {
    return o[k];
  };

那个怎么样。
这不是胡说八道吗？

当我尝试用语言表达符号时，它看起来像这样

不过没关系。我会用日语正确地表达出来。

函数的第一个参数 o 采用对象限制的泛型类型的 O 类型。
函数的第二个参数 k 采用由参数 o 中包含的对象中的键限制的泛型类型的 K 类型。
函数的返回值 o[k] 查找键为 k 的对象 o 的属性并返回其值。
···那个怎么样。
让我们深入一点。
上述符号中使用了什么

这里使用了这样的东西：
有些事情你可以看到，有些事情你无法理解。
- 泛型
- 扩展（类型参数的约束）
- keyof
- 查找类型
我会一一解释

仿制药

首先是泛型。
这是上例中<O extends object, K extends keyof O>对应的部分。
泛型的一个简单解释是将类型视为变量。
当您不知道作为参数的内容时，它旨在灵活处理，例如数字类型或字符串类型。

扩展（类型参数约束）

上面的泛型已经完成了类型定义，但是如果我们假设任何类型的参数都OK ☆ ，类型的含义将无法实现。
这就是延伸发挥作用的地方。
这对可以在泛型中依次出现的各种类型的参数进行了限制。
在上面的示例中，它是extends object 和extends keyof O。
第一个受对象类型限制，第二个受第一个参数的对象中包含的键类型限制。

的关键

我将解释上面解释中出现的keyof。
我将逐步解释这一点。
首先，准备一个对象类型变量，如下所示。
```
  const top = {
    name: "Toproad",
    age:20,
    gender: "male",
  };
```
在keyof之前，我们需要键入对象中的属性，也就是typeof。
```
type topTypeof = typeof top;
```
现在type topTypeof = { name: string; age: number; gender: string; }
和类型。（首先，它是类型推断的，所以如果你说它是不必要的，那么它是不必要的......）
然后使用这种 typeof 类型创建一个 keyof。
```
type topKeyof = keyof topTypeof;
```
结果，创建了一个键为 type topKeyof = "name" | "age" | "gender" 的联合类型的类型。

此外，还可以将它们组合成一个，如下所示。
```
 // 上2行と同じ意味
  type topTypeofKeyof =keyof typeof top;
```
查找类型

最后，查找类型。
即使在 Excel 中，也类似于使用 vlookup 进行搜索。
上例中，在return语句后的o[k]部分，找到keyof键类型对应的属性，
它将是获得该价值的人。

使用符号的具体示例

基于目前内容的具体描述方法如下。
```
// オブジェクトの中から特定のキーに該当する値を返す関数式
const valueOfPerson = <O extends object, K extends keyof O>(
    o: O,
    k: K
  ): O[K] => {
    return o[k];
  };

  const top = {
    name: "Toproad",
    age:20,
    gender: "male",
  };

// 以下は関数の呼び出しの具体例
// 例１：Toproadを出力します
  console.log(valueOfPerson(top, "name"));
// 例２：20を出力します
  console.log(valueOfPerson(top, "age"));
//例３：エラー⇒型 '"hogehoge"' の引数を型 '"name" | "age" | "gender"' のパラメーターに割り当てることはできません。
  console.log(valueOfPerson(top, "hogehoge"));
```
[解释]
- 函数表达式 valueOfPerson 是一个函数表达式，它返回与对象中给定键对应的值。
- 对于 valueOfPerson，尝试使用对象顶部获取属性值。
- valueOfPerson的第一个参数是由object进行类型限制的，但是在示例1到示例3中，都传递了object-type top并且匹配限制，所以没有问题。
- valueOfPerson的第二个参数受对象类型top包含的key的联合类型“name”|“age”|“gender”约束，示例1和2是约束中包含的name和age。问题，但示例 3 中的 hogehoge 不包含在约束中，因此返回错误。
- 只有示例 1 和 2（不包括导致上述错误的示例 3）返回值。（变得未定义）
  【补充】
  调用 valueOfPerson 时，不要在 valueOfPerson 之后放置 <,>，但类型是隐式确定的。
概括

我不知道我的解释是否有道理，但我想在这个符号介绍中传达的是“理解包含多个元素的代码并对其进行分解是提高技能的捷径”。
当然，负担很重，但我认为练习阅读和理解这样的代码对于在实践中培养写作能力很重要。

我提到的网站

我学到了很多。谢谢你。
[TypeScript] 泛型基础
 [TS] 使用 keyof 创建一个函数，该函数接受一个对象和一个适当的键

原创声明：本文系作者授权爱码网发表，未经许可，不得转载;

原文地址：https://www.likecs.com/show-308632010.html

主题

符号

当我尝试用语言表达符号时，它看起来像这样

上述符号中使用了什么

我会一一解释

仿制药

扩展（类型参数约束）

的关键

查找类型

使用符号的具体示例

概括

我提到的网站