【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

声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did223364

更新时间：2023-05-08 阅读：59次