TypeScript 中限制对象键名的取值范围

乖乖乖乖 發表於 2021-5-19 23:09:00

TypeScript 中限制对象键名的取值范围

<table class="d-block" data-paste-markdown-skip="">
<tbody class="d-block">
<tr class="d-block">
<td class="d-block comment-body markdown-body js-comment-body rgh-linkified-code">
当我们使用 TypeScript 时，我们想利用它提供的类型系统限制代码的方方面面，对象的键值，也不例外。
譬如我们有个对象存储每个年级的人名，类型大概长这样：
<div class="highlight highlight-source-ts position-relative">
<pre>type Students = Record<string, string[]>;</pre>
<div class="zeroclipboard-container position-absolute right-0 top-0"> </div>
</div>
理所当然地，数据就是长这样：
<div class="highlight highlight-source-ts position-relative">
<pre>const students: Students = {
Freshman: ["David", "John"],
sophomore: [],
Junior: ["Lily"],
Senior: ["Tom"],
};</pre>
<div class="zeroclipboard-container position-absolute right-0 top-0"> </div>
</div>
<h2>限制对象键名为枚举</h2>
上面数据类型的问题是，年级是有限的几种可值取，而该对象上可任意添加属性，这样显得数据不够纯粹。
所以我们新增枚举，列出可取的值：
<div class="highlight highlight-source-ts position-relative">
<pre>export enum Grade {
Freshman,
sophomore,
Junior,
Senior,
}</pre>
<div class="zeroclipboard-container position-absolute right-0 top-0"> </div>
</div>
现在，把对象的键名限制为上面枚举就行了。
<div class="highlight highlight-source-diff position-relative">
<pre>- type Students = Record<string, string[]>;
+ type Students = Record<Grade, string[]>;</pre>
<div class="zeroclipboard-container position-absolute right-0 top-0"> </div>
</div>
这样我们的数据可写成这样：
<div class="highlight highlight-source-ts position-relative">
<pre>const students: Students = {
[Grade.Freshman]: ["David", "John"],
[Grade.sophomore]: [],
[Grade.Junior]: ["Lily"],
[Grade.Senior]: ["Tom"],
// ❌ Object literal may only specify known properties, and 'blah' does not exist in type 'Students'.ts(2322)
blah: ["some one"],
};</pre>
<div class="zeroclipboard-container position-absolute right-0 top-0"> </div>
</div>
这样，限制住了对象身上键名的范围，可以看到如果添加一个枚举之外的键会报错。
<h2>更加语义化的枚举值</h2>
但上面的做法还是有不妥之处，因为枚举值默认是从 0 开始的数字，这样，作为键值就不够语义了，这点从访问对象的属性时体现了出来：
<img src="https://user-images.githubusercontent.com/3783096/118772844-c85c8f80-b8b6-11eb-87b3-0a77485c95f4.png" alt="1" width="899" style="max-width: 100%">
修正我们的枚举，用更加语义的文本作为其值：
<div class="highlight highlight-source-ts position-relative">
<pre>export enum Grade {
Freshman = "Freshman",
sophomore = "sophomore",
Junior = "Junior",
Senior = "Senior",
}</pre>
<div class="zeroclipboard-container position-absolute right-0 top-0"> </div>
</div>
此时再使用该枚举时，得到的就不是无意义的数字了。
<img src="https://user-images.githubusercontent.com/3783096/118772877-d1e5f780-b8b6-11eb-9745-b6a46cffed72.png" alt="2" width="899" style="max-width: 100%">
如果你愿意，枚举值也可以是中文，
<div class="highlight highlight-source-ts position-relative">
<pre>export enum Grade {
Freshman = "大一萌新",
sophomore = "大二学弟",
Junior = "大三学妹",
Senior = "大四老司机",
}</pre>
<div class="zeroclipboard-container position-absolute right-0 top-0"> </div>
</div>
使用时也是没任何问题的：
<img src="https://user-images.githubusercontent.com/3783096/118772905-d90d0580-b8b6-11eb-9dac-a1eb0db7e24a.png" alt="3" width="899" style="max-width: 100%">
<h2>键值可选</h2>
上面的类型定义还有个问题，即，它要求使用时对象包含枚举中所有值，比如 <code>sophomore</code> 这个年级中并没有人，可以不写，但会报错。
<div class="highlight highlight-source-ts position-relative">
<pre>// ❌ Property 'sophomore' is missing in type '{ Freshman: string[]; Junior: string[]; Senior: string[]; }' but required in type 'Students'.ts(2741)
const students: Students = {
[Grade.Freshman]: ["David", "John"],
// : [],
[Grade.Junior]: ["Lily"],
[Grade.Senior]: ["Tom"],
};</pre>
<div class="zeroclipboard-container position-absolute right-0 top-0"> </div>
</div>
所以，优化类型为可选：
<div class="highlight highlight-source-ts position-relative">
<pre>type Students = Partial<Record<Grade, string[]>>;</pre>
<div class="zeroclipboard-container position-absolute right-0 top-0"> </div>
</div>
<h2>限制对象的键名为数组中的值</h2>
假若可选的值不是通过枚举定义，而是来自一个数组，
<div class="highlight highlight-source-ts position-relative">
<pre>const grades = ["Freshman", "sophomore", "Junior", "Senior"];</pre>
<div class="zeroclipboard-container position-absolute right-0 top-0"> </div>
</div>
这意味着我们需要提取数组中的值形成一个联合类型。
首先利用const assertions 把数组转元组（Tuple）类型，
<div class="highlight highlight-source-ts position-relative">
<pre>const grades = <const>["Freshman", "sophomore", "Junior", "Senior"];</pre>
<div class="zeroclipboard-container position-absolute right-0 top-0"> </div>
</div>
再利用 <code>typeof</code> 和 Lookup Types 得到最终的联合类型：
<div class="highlight highlight-source-ts position-relative">
<pre>// 实际为 type Keys = "Freshman" | "sophomore" | "Junior" | "Senior"
type Keys = typeof grades[number];</pre>
<div class="zeroclipboard-container position-absolute right-0 top-0"> </div>
</div>
最后数据类型和数据可写成：
<div class="highlight highlight-source-ts position-relative">
<pre>type Students = Partial<Record<Keys, string[]>>;

const students: Students = {
Freshman: ["David", "John"],
Junior: ["Lily"],
Senior: ["Tom"],
};</pre>
<div class="zeroclipboard-container position-absolute right-0 top-0"> </div>
</div>
须知这种形式下，对象的 key 与原数组中元素其实没有语法层面的关联，即，编辑器的「跳转定义」是不可用的。
<img src="https://user-images.githubusercontent.com/3783096/118773106-0f4a8500-b8b7-11eb-859d-e9e6a357deb8.png" alt="Screen Shot 2021-05-19 at 3 29 27 PM" width="899" style="max-width: 100%">
尽量还是保持代码之间的关联才能体现出 TypeScript 的作用，所以像这种只有类型约束而无法建立关联的操作是不建议的。
<h1>相关资源</h1>
<ul>
<li>const assertions</li>
<li><code>keyof</code> and Lookup Types</li>
</ul>
</td>
</tr>
<tr class="d-block pl-3 pr-3 pb-3 js-comment-body-error">
<td class="d-block">
<div class="flash flash-warn">
 The text was updated successfully, but these errors were encountered:
</div>
</td>
</tr>
</tbody>
</table>

</div>
<div id="MySignature" role="contentinfo">
<div>
<img src="https://licensebuttons.net/l/by-nc-sa/3.0/88x31.png" style="vertical-align: middle">
CC BY-NC-SA 署名-非商业性使用-相同方式共享
</div> 
来源：https://www.cnblogs.com/Wayou/p/14787954.html

頁: [1]

琼殿技术论坛's Archiver

TypeScript 中限制对象键名的取值范围