【转载】TypeScript进阶之重难点梳理

Author： YH_evIs
发布时间：July 24, 2020
26407views
No comments
13520字数
Categories： Hello world

<div class="tip inlineBlock info">本文源自微信公众号:小生方勤</div>

<div class="tip inlineBlock warning">本文是自动化发布的，如侵犯到了您的权益请联系博主删除。</div>
<div class="rich_media_content " id="js_content"> 
 
<p style="font-family: -apple-system-font, system-ui, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;letter-spacing: 0.544px;white-space: normal;color: rgb(63, 63, 63);font-size: 16px;background-color: rgb(255, 255, 255);word-spacing: 2px;text-align: center;"> 
<section data-website="https://www.mdnice.com">
<h2 style="margin-top: 30px;margin-bottom: 15px;font-weight: bold;color: black;font-size: 22px;border-bottom: 4px solid rgb(64, 184, 250);"><span style="display: flex;width: 20px;height: 20px;background-size: 20px 20px;background-image: url("https://mmbiz.qpic.cn/sz_mmbiz_png/udZl15qqib0PDF1OV4STY4HN2icIqrDiaplpEr9CDg27bQvt2Kwl7hZlHl338FO8t6Q5DtvkAhKrffjxIPfJkvOpA/640?wx_fmt=png");margin-bottom: -22px;">前言<span style="display: flex;width: 200px;height: 10px;border-top-left-radius: 20px;background: rgba(64, 184, 250, 0.5);color: rgb(255, 255, 255);font-size: 16px;letter-spacing: 0.544px;justify-content: flex-end;float: right;margin-top: -10px;"></h2>
<code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">JavaScript</code> 毋庸置疑是一门非常好的语言，但是其也有很多的弊端，其中不乏是作者设计之处留下的一些 “bug”。当然，瑕不掩瑜~
话说回来，<code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">JavaScript</code> 毕竟是一门弱类型语言，与强类型语言相比，其最大的编程陋习就是可能会造成我们类型思维的缺失（高级词汇，我从极客时间学到的）。而「思维方式决定了编程习惯，编程习惯奠定了工程质量，工程质量划定了能力边界」，而学习 Typescript，最重要的就是我们类型思维的重塑。
那么其实，<code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">Typescript</code> 在我个人理解，并不能算是一个编程语言，它只是 <code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">JavaScript</code> 的一层壳。当然，我们完全可以将它作为一门语言去学习。网上有很多推荐 or 不推荐 Typescript 之类的文章这里我们不做任何讨论，学与不学，用或不用，利与弊。各自拿捏~
再说说 typescript（下文均用 ts 简称），其实对于 ts 相比大家已经不陌生了。更多关于 ts 入门文章和文档也是已经烂大街了。「此文不去翻译或者搬运各种 api或者教程章节。只是总结罗列和解惑，笔者在学习 ts 过程中曾疑惑的地方」。道不到的地方，欢迎大家评论区积极讨论。
其实 Ts 的入门非常的简单:<code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">.js</code> to <code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">.ts</code>; over!
<figure style="margin-top: 10px;margin-bottom: 10px;">
<img data-src="https://mmbiz.qpic.cn/sz_mmbiz_png/udZl15qqib0PDF1OV4STY4HN2icIqrDiaplhJX7twJ7pO7H6TicNqicP5ib5dPMnHibvVaibo6VPIb3nta7M5qBkLq8HvQ/640?wx_fmt=png" data-type="png" data-w="198" style="width: auto;border-radius: 6px;display: block;margin: 20px auto;object-fit: contain;box-shadow: rgb(153, 153, 153) 2px 4px 7px;">
</figure>
「但是为什么我都会写 ts 了，却看不懂别人的代码呢？」 这！就是入门与进阶之隔。也是本文的目的所在。
首先推荐下 ts 的编译环境：typescriptlang.org
再推荐笔者收藏的几个网站：
<ul style="margin-top: 8px;margin-bottom: 8px;padding-left: 25px;font-size: 15px;list-style-type: circle;" class="list-paddingleft-2">
<li>
<section style="margin-top: 5px;margin-bottom: 5px;line-height: 26px;font-size: 14px;">
Typescript 中文网
</section></li>
<li>
<section style="margin-top: 5px;margin-bottom: 5px;line-height: 26px;font-size: 14px;">
深入理解 Typescript
</section></li>
<li>
<section style="margin-top: 5px;margin-bottom: 5px;line-height: 26px;font-size: 14px;">
TypeScript Handbook
</section></li>
<li>
<section style="margin-top: 5px;margin-bottom: 5px;line-height: 26px;font-size: 14px;">
TypeScript 精通指南
</section></li>
</ul>
下面，逐个难点梳理，逐个击破。
<h2 style="margin-top: 30px;margin-bottom: 15px;font-weight: bold;color: black;font-size: 22px;border-bottom: 4px solid rgb(64, 184, 250);"><span style="display: flex;width: 20px;height: 20px;background-size: 20px 20px;background-image: url("https://mmbiz.qpic.cn/sz_mmbiz_png/udZl15qqib0PDF1OV4STY4HN2icIqrDiaplpEr9CDg27bQvt2Kwl7hZlHl338FO8t6Q5DtvkAhKrffjxIPfJkvOpA/640?wx_fmt=png");margin-bottom: -22px;">可索引类型<span style="display: flex;width: 200px;height: 10px;border-top-left-radius: 20px;background: rgba(64, 184, 250, 0.5);color: rgb(255, 255, 255);font-size: 16px;letter-spacing: 0.544px;justify-content: flex-end;float: right;margin-top: -10px;"></h2>
关于ts 的类型应该不用过多介绍了，「多用多记」 即可。介绍下关于 ts 的可索引类型。准确的说，这应该属于接口的一类范畴。说到接口（interface），我们都知道 「ts 的核心原则之一就是对值所具有的结构进行类型检查。」 它有时被称之为“鸭式辩型法”或“结构性子类型”。而接口就是其中的契约。可索引类型也是接口的一种表现形式，非常实用！
<pre style="margin-top: 10px;margin-bottom: 10px;"><code style="overflow-x: auto;padding: 16px;background: #1E1E1E;color: #DCDCDC;display: -webkit-box;font-family: Operator Mono, Consolas, Monaco, Menlo, monospace;border-radius: 0px;font-size: 12px;-webkit-overflow-scrolling: touch;letter-spacing: 0px;">interface StringArray { [index: number]: string; } let myArray: StringArray; myArray = ["Bob", "Fred"]; let myStr: string = myArray[0]; </code></pre>
上面例子里，我们定义了<code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">StringArray</code>接口，它具有索引签名。这个索引签名表示了当用<code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">number</code>去索引<code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">StringArray</code>时会得到<code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">string</code>类型的返回值。Typescript支持两种索引签名：字符串和数字。可以同时使用两种类型的索引，但是数字索引的返回值必须是字符串索引返回值类型的子类型。
这是因为当使用<code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">number</code>来索引时，JavaScript会将它转换成<code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">string</code>然后再去索引对象。也就是说用100（一个number）去索引等同于使用"100"（一个string）去索引，因此两者需要保持一致。
<pre style="margin-top: 10px;margin-bottom: 10px;"><code style="overflow-x: auto;padding: 16px;background: #1E1E1E;color: #DCDCDC;display: -webkit-box;font-family: Operator Mono, Consolas, Monaco, Menlo, monospace;border-radius: 0px;font-size: 12px;-webkit-overflow-scrolling: touch;letter-spacing: 0px;">class Animal { name: string; } class Dog extends Animal { breed: string; } // 错误：使用数值型的字符串索引，有时会得到完全不同的Animal! interface NotOkay { [x: number]: Animal; [x: string]: Dog; } </code></pre>
下面的例子里，name的类型与字符串索引类型不匹配，所以类型检查器给出一个错误提示：
<pre style="margin-top: 10px;margin-bottom: 10px;"><code style="overflow-x: auto;padding: 16px;background: #1E1E1E;color: #DCDCDC;display: -webkit-box;font-family: Operator Mono, Consolas, Monaco, Menlo, monospace;border-radius: 0px;font-size: 12px;-webkit-overflow-scrolling: touch;letter-spacing: 0px;">interface NumberDictionary { [index: string]: number; length: number; // 可以，length是number类型 name: string // 错误，`name`的类型与索引类型返回值的类型不匹配 } </code></pre>
当然，我们也可以将索引签名设置为只读，这样就可以防止给索引赋值
<pre style="margin-top: 10px;margin-bottom: 10px;"><code style="overflow-x: auto;padding: 16px;background: #1E1E1E;color: #DCDCDC;display: -webkit-box;font-family: Operator Mono, Consolas, Monaco, Menlo, monospace;border-radius: 0px;font-size: 12px;-webkit-overflow-scrolling: touch;letter-spacing: 0px;">interface ReadonlyStringArray { readonly [index: number]: string; } let myArray: ReadonlyStringArray = ["Alice", "Bob"]; myArray[2] = "Mallory"; // error! </code></pre>
<h2 style="margin-top: 30px;margin-bottom: 15px;font-weight: bold;color: black;font-size: 22px;border-bottom: 4px solid rgb(64, 184, 250);"><span style="display: flex;width: 20px;height: 20px;background-size: 20px 20px;background-image: url("https://mmbiz.qpic.cn/sz_mmbiz_png/udZl15qqib0PDF1OV4STY4HN2icIqrDiaplpEr9CDg27bQvt2Kwl7hZlHl338FO8t6Q5DtvkAhKrffjxIPfJkvOpA/640?wx_fmt=png");margin-bottom: -22px;">interface  和 type 关键字<span style="display: flex;width: 200px;height: 10px;border-top-left-radius: 20px;background: rgba(64, 184, 250, 0.5);color: rgb(255, 255, 255);font-size: 16px;letter-spacing: 0.544px;justify-content: flex-end;float: right;margin-top: -10px;"></h2>
stackoverflow 上的一个高赞回答还是非常赞的。typescript-interfaces-vs-types
<code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">interface</code> 和 <code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">type</code> 两个关键字的含义和功能都非常的接近。这里我们罗列下这两个主要的区别：
<code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">interface</code>：
<ul style="margin-top: 8px;margin-bottom: 8px;padding-left: 25px;font-size: 15px;list-style-type: circle;" class="list-paddingleft-2">
<li>
<section style="margin-top: 5px;margin-bottom: 5px;line-height: 26px;font-size: 14px;">
同名的 
<code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">interface</code> 自动聚合，也可以跟同名的 
<code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">class</code> 自动聚合
</section></li>
<li>
<section style="margin-top: 5px;margin-bottom: 5px;line-height: 26px;font-size: 14px;">
只能表示 
<code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">object</code>、
<code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">class</code>、
<code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">function</code> 类型
</section></li>
</ul>
<code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">type</code>:
<ul style="margin-top: 8px;margin-bottom: 8px;padding-left: 25px;font-size: 15px;list-style-type: circle;" class="list-paddingleft-2">
<li>
<section style="margin-top: 5px;margin-bottom: 5px;line-height: 26px;font-size: 14px;">
不仅仅能够表示 
<code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">object</code>、
<code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">class</code>、
<code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">function</code>
</section></li>
<li>
<section style="margin-top: 5px;margin-bottom: 5px;line-height: 26px;font-size: 14px;">
不能重名（自然不存在同名聚合了），扩展已有的 
<code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">type</code> 需要创建新 
<code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">type</code>
</section></li>
<li>
<section style="margin-top: 5px;margin-bottom: 5px;line-height: 26px;font-size: 14px;">
支持复杂的类型操作
</section></li>
</ul>
举例说明下上面罗列的几点：
<h3 style="color: black;font-weight: bold;text-align: center;margin-top: 50px;margin-bottom: 20px;"><span style="width: 30px;height: 30px;display: block;background-image: url("https://mmbiz.qpic.cn/sz_mmbiz_png/udZl15qqib0PDF1OV4STY4HN2icIqrDiaplfXAoFibCnKfqYRkTQ3IyIJfF79SGwXVJtiau76hbooaZt2dKwTy681pA/640?wx_fmt=png");background-position: center center;background-size: 30px;left: 0px;right: 0px;margin: auto;opacity: 1;background-repeat: no-repeat;bottom: 12px;">Objects/Functions</h3>
都可以用来表示 <code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">Object</code> 或者 <code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">Function</code> ，只是语法上有些不同而已
<pre style="margin-top: 10px;margin-bottom: 10px;"><code style="overflow-x: auto;padding: 16px;background: #1E1E1E;color: #DCDCDC;display: -webkit-box;font-family: Operator Mono, Consolas, Monaco, Menlo, monospace;border-radius: 0px;font-size: 12px;-webkit-overflow-scrolling: touch;letter-spacing: 0px;">interface Point{ x:number; y:number; } interface SetPoint{ (x:number,y:number):void; } </code></pre>
<pre style="margin-top: 10px;margin-bottom: 10px;"><code style="overflow-x: auto;padding: 16px;background: #1E1E1E;color: #DCDCDC;display: -webkit-box;font-family: Operator Mono, Consolas, Monaco, Menlo, monospace;border-radius: 0px;font-size: 12px;-webkit-overflow-scrolling: touch;letter-spacing: 0px;">type Point = { x:number; y:number; } type SetPoint = (x:number,y:number) => void; </code></pre>
<h3 style="color: black;font-weight: bold;text-align: center;margin-top: 50px;margin-bottom: 20px;"><span style="width: 30px;height: 30px;display: block;background-image: url("https://mmbiz.qpic.cn/sz_mmbiz_png/udZl15qqib0PDF1OV4STY4HN2icIqrDiaplfXAoFibCnKfqYRkTQ3IyIJfF79SGwXVJtiau76hbooaZt2dKwTy681pA/640?wx_fmt=png");background-position: center center;background-size: 30px;left: 0px;right: 0px;margin: auto;opacity: 1;background-repeat: no-repeat;bottom: 12px;">其他数据类型</h3>
与 <code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">interface</code> 不同，<code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">type</code> 还可以用来标书其他的类型，比如基本数据类型、元素、并集等
<pre style="margin-top: 10px;margin-bottom: 10px;"><code style="overflow-x: auto;padding: 16px;background: #1E1E1E;color: #DCDCDC;display: -webkit-box;font-family: Operator Mono, Consolas, Monaco, Menlo, monospace;border-radius: 0px;font-size: 12px;-webkit-overflow-scrolling: touch;letter-spacing: 0px;">type Name = string; type PartialPointX = {x:number;}; type PartialPointY = {y:number;}; type PartialPoint = PartialPointX | PartialPointY; type Data = [number,string,boolean]; </code></pre>
<h3 style="color: black;font-weight: bold;text-align: center;margin-top: 50px;margin-bottom: 20px;"><span style="width: 30px;height: 30px;display: block;background-image: url("https://mmbiz.qpic.cn/sz_mmbiz_png/udZl15qqib0PDF1OV4STY4HN2icIqrDiaplfXAoFibCnKfqYRkTQ3IyIJfF79SGwXVJtiau76hbooaZt2dKwTy681pA/640?wx_fmt=png");background-position: center center;background-size: 30px;left: 0px;right: 0px;margin: auto;opacity: 1;background-repeat: no-repeat;bottom: 12px;">Extend</h3>
都可以被继承，但是语法上会有些不同。另外需要注意的是，「interface 和 type 彼此并不互斥」。
<h4 style="margin-top: 30px;margin-bottom: 15px;font-weight: bold;color: black;font-size: 18px;"><span style="background-image: url("https://mmbiz.qpic.cn/sz_mmbiz_png/udZl15qqib0PDF1OV4STY4HN2icIqrDiaplDX9gZCddMMnAEdQFSlnw0ib24o8KAUCQQLt7Gq9y5CWwlp1HdHRcyvw/640?wx_fmt=png");display: inline-block;width: 16px;height: 16px;background-size: 16px;background-position: center center;background-repeat: no-repeat;margin-right: 6px;top: 5px;">interface extends interface</h4>
<pre style="margin-top: 10px;margin-bottom: 10px;"><code style="overflow-x: auto;padding: 16px;background: #1E1E1E;color: #DCDCDC;display: -webkit-box;font-family: Operator Mono, Consolas, Monaco, Menlo, monospace;border-radius: 0px;font-size: 12px;-webkit-overflow-scrolling: touch;letter-spacing: 0px;">interface PartialPointX {x:number;}; interface Point extends PartialPointX {y:number;}; </code></pre>
<h4 style="margin-top: 30px;margin-bottom: 15px;font-weight: bold;color: black;font-size: 18px;"><span style="background-image: url("https://mmbiz.qpic.cn/sz_mmbiz_png/udZl15qqib0PDF1OV4STY4HN2icIqrDiaplDX9gZCddMMnAEdQFSlnw0ib24o8KAUCQQLt7Gq9y5CWwlp1HdHRcyvw/640?wx_fmt=png");display: inline-block;width: 16px;height: 16px;background-size: 16px;background-position: center center;background-repeat: no-repeat;margin-right: 6px;top: 5px;">type extends type</h4>
<pre style="margin-top: 10px;margin-bottom: 10px;"><code style="overflow-x: auto;padding: 16px;background: #1E1E1E;color: #DCDCDC;display: -webkit-box;font-family: Operator Mono, Consolas, Monaco, Menlo, monospace;border-radius: 0px;font-size: 12px;-webkit-overflow-scrolling: touch;letter-spacing: 0px;">type PartialPointX = {x:number;}; type Point = PartialPointX & {y:number;}; </code></pre>
<h4 style="margin-top: 30px;margin-bottom: 15px;font-weight: bold;color: black;font-size: 18px;"><span style="background-image: url("https://mmbiz.qpic.cn/sz_mmbiz_png/udZl15qqib0PDF1OV4STY4HN2icIqrDiaplDX9gZCddMMnAEdQFSlnw0ib24o8KAUCQQLt7Gq9y5CWwlp1HdHRcyvw/640?wx_fmt=png");display: inline-block;width: 16px;height: 16px;background-size: 16px;background-position: center center;background-repeat: no-repeat;margin-right: 6px;top: 5px;">interface extends type</h4>
<pre style="margin-top: 10px;margin-bottom: 10px;"><code style="overflow-x: auto;padding: 16px;background: #1E1E1E;color: #DCDCDC;display: -webkit-box;font-family: Operator Mono, Consolas, Monaco, Menlo, monospace;border-radius: 0px;font-size: 12px;-webkit-overflow-scrolling: touch;letter-spacing: 0px;">type PartialPointX = {x:number;}; interface Point extends PartialPointX {y:number;}; </code></pre>
<h4 style="margin-top: 30px;margin-bottom: 15px;font-weight: bold;color: black;font-size: 18px;"><span style="background-image: url("https://mmbiz.qpic.cn/sz_mmbiz_png/udZl15qqib0PDF1OV4STY4HN2icIqrDiaplDX9gZCddMMnAEdQFSlnw0ib24o8KAUCQQLt7Gq9y5CWwlp1HdHRcyvw/640?wx_fmt=png");display: inline-block;width: 16px;height: 16px;background-size: 16px;background-position: center center;background-repeat: no-repeat;margin-right: 6px;top: 5px;">type extends interface</h4>
<pre style="margin-top: 10px;margin-bottom: 10px;"><code style="overflow-x: auto;padding: 16px;background: #1E1E1E;color: #DCDCDC;display: -webkit-box;font-family: Operator Mono, Consolas, Monaco, Menlo, monospace;border-radius: 0px;font-size: 12px;-webkit-overflow-scrolling: touch;letter-spacing: 0px;">interface ParticalPointX = {x:number;}; type Point = ParticalPointX & {y:number}; </code></pre>
<h3 style="color: black;font-weight: bold;text-align: center;margin-top: 50px;margin-bottom: 20px;"><span style="width: 30px;height: 30px;display: block;background-image: url("https://mmbiz.qpic.cn/sz_mmbiz_png/udZl15qqib0PDF1OV4STY4HN2icIqrDiaplfXAoFibCnKfqYRkTQ3IyIJfF79SGwXVJtiau76hbooaZt2dKwTy681pA/640?wx_fmt=png");background-position: center center;background-size: 30px;left: 0px;right: 0px;margin: auto;opacity: 1;background-repeat: no-repeat;bottom: 12px;">implements</h3>
一个类，可以以完全相同的形式去实现<code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">interface</code> 或者 <code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">type</code>。但是，类和接口都被视为静态蓝图（static blueprints），因此，他们不能实现/继承 联合类型的 <code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">type</code>
<pre style="margin-top: 10px;margin-bottom: 10px;"><code style="overflow-x: auto;padding: 16px;background: #1E1E1E;color: #DCDCDC;display: -webkit-box;font-family: Operator Mono, Consolas, Monaco, Menlo, monospace;border-radius: 0px;font-size: 12px;-webkit-overflow-scrolling: touch;letter-spacing: 0px;">interface Point { x: number; y: number; } class SomePoint implements Point { x: 1; y: 2; } type Point2 = { x: number; y: number; }; class SomePoint2 implements Point2 { x: 1; y: 2; } type PartialPoint = { x: number; } | { y: number; }; // FIXME: can not implement a union type class SomePartialPoint implements PartialPoint { x: 1; y: 2; } </code></pre>
<figure style="margin-top: 10px;margin-bottom: 10px;">
<img data-src="https://mmbiz.qpic.cn/sz_mmbiz_png/udZl15qqib0PDF1OV4STY4HN2icIqrDiaplxTdvejPlrzHqdgHMJPAPEiaddfmKytXtibBPHp0Sn1rNWDagtApuMukQ/640?wx_fmt=png" data-type="png" data-w="897" style="width: auto;border-radius: 6px;display: block;margin: 20px auto;object-fit: contain;box-shadow: rgb(153, 153, 153) 2px 4px 7px;">
</figure>
<h3 style="color: black;font-weight: bold;text-align: center;margin-top: 50px;margin-bottom: 20px;"><span style="width: 30px;height: 30px;display: block;background-image: url("https://mmbiz.qpic.cn/sz_mmbiz_png/udZl15qqib0PDF1OV4STY4HN2icIqrDiaplfXAoFibCnKfqYRkTQ3IyIJfF79SGwXVJtiau76hbooaZt2dKwTy681pA/640?wx_fmt=png");background-position: center center;background-size: 30px;left: 0px;right: 0px;margin: auto;opacity: 1;background-repeat: no-repeat;bottom: 12px;">声明合并</h3>
和 <code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">type</code> 不同，<code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">interface</code> 可以被重复定义，并且会被自动聚合
<pre style="margin-top: 10px;margin-bottom: 10px;"><code style="overflow-x: auto;padding: 16px;background: #1E1E1E;color: #DCDCDC;display: -webkit-box;font-family: Operator Mono, Consolas, Monaco, Menlo, monospace;border-radius: 0px;font-size: 12px;-webkit-overflow-scrolling: touch;letter-spacing: 0px;">interface Point {x:number;}; interface Point {y:number;}; const point:Pint = {x:1,y:2}; </code></pre>
<h3 style="color: black;font-weight: bold;text-align: center;margin-top: 50px;margin-bottom: 20px;"><span style="width: 30px;height: 30px;display: block;background-image: url("https://mmbiz.qpic.cn/sz_mmbiz_png/udZl15qqib0PDF1OV4STY4HN2icIqrDiaplfXAoFibCnKfqYRkTQ3IyIJfF79SGwXVJtiau76hbooaZt2dKwTy681pA/640?wx_fmt=png");background-position: center center;background-size: 30px;left: 0px;right: 0px;margin: auto;opacity: 1;background-repeat: no-repeat;bottom: 12px;">only interface can</h3>
在实际开发中，有的时候也会遇到 <code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">interface</code> 能够表达，但是 <code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">type</code> 做不到的情况：「给函数挂载属性」
<pre style="margin-top: 10px;margin-bottom: 10px;"><code style="overflow-x: auto;padding: 16px;background: #1E1E1E;color: #DCDCDC;display: -webkit-box;font-family: Operator Mono, Consolas, Monaco, Menlo, monospace;border-radius: 0px;font-size: 12px;-webkit-overflow-scrolling: touch;letter-spacing: 0px;">interface FuncWithAttachment { (param: string): boolean; someProperty: number; } const testFunc: FuncWithAttachment = function(param: string) { return param.indexOf("Neal") > -1; }; const result = testFunc("Nealyang"); // 有类型提醒 testFunc.someProperty = 4; </code></pre>
<figure style="margin-top: 10px;margin-bottom: 10px;">
<img data-src="https://mmbiz.qpic.cn/sz_mmbiz_png/udZl15qqib0PDF1OV4STY4HN2icIqrDiaplZOib7csbOjHRC1ClAiaApWy8nQ3B6ubYoicKL6XKugKNgYMib2PsXDTicMg/640?wx_fmt=png" data-type="png" data-w="1041" style="width: auto;border-radius: 6px;display: block;margin: 20px auto;object-fit: contain;box-shadow: rgb(153, 153, 153) 2px 4px 7px;">
</figure>
<h2 style="margin-top: 30px;margin-bottom: 15px;font-weight: bold;color: black;font-size: 22px;border-bottom: 4px solid rgb(64, 184, 250);"><span style="display: flex;width: 20px;height: 20px;background-size: 20px 20px;background-image: url("https://mmbiz.qpic.cn/sz_mmbiz_png/udZl15qqib0PDF1OV4STY4HN2icIqrDiaplpEr9CDg27bQvt2Kwl7hZlHl338FO8t6Q5DtvkAhKrffjxIPfJkvOpA/640?wx_fmt=png");margin-bottom: -22px;">& 和 | 操作符<span style="display: flex;width: 200px;height: 10px;border-top-left-radius: 20px;background: rgba(64, 184, 250, 0.5);color: rgb(255, 255, 255);font-size: 16px;letter-spacing: 0.544px;justify-content: flex-end;float: right;margin-top: -10px;"></h2>
这里我们需要区分，<code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">|</code> 和 <code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">&</code> 并非位运算符。我们可以理解为<code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">&</code>表示必须同时满足所有的契约。<code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">|</code>表示可以只满足一个契约。
<pre style="margin-top: 10px;margin-bottom: 10px;"><code style="overflow-x: auto;padding: 16px;background: #1E1E1E;color: #DCDCDC;display: -webkit-box;font-family: Operator Mono, Consolas, Monaco, Menlo, monospace;border-radius: 0px;font-size: 12px;-webkit-overflow-scrolling: touch;letter-spacing: 0px;">interface IA{ a:string; b:string; } type TB{ b:number; c:number []; } type TC = TA | TB;// TC 的 key，包含 ab 或者 bc 即可，当然，包含 bac 也可以 type TD = TA & TB;// TD 的 可以,必须包含 abc </code></pre>
<h2 style="margin-top: 30px;margin-bottom: 15px;font-weight: bold;color: black;font-size: 22px;border-bottom: 4px solid rgb(64, 184, 250);"><span style="display: flex;width: 20px;height: 20px;background-size: 20px 20px;background-image: url("https://mmbiz.qpic.cn/sz_mmbiz_png/udZl15qqib0PDF1OV4STY4HN2icIqrDiaplpEr9CDg27bQvt2Kwl7hZlHl338FO8t6Q5DtvkAhKrffjxIPfJkvOpA/640?wx_fmt=png");margin-bottom: -22px;">交叉类型<span style="display: flex;width: 200px;height: 10px;border-top-left-radius: 20px;background: rgba(64, 184, 250, 0.5);color: rgb(255, 255, 255);font-size: 16px;letter-spacing: 0.544px;justify-content: flex-end;float: right;margin-top: -10px;"></h2>
交叉类型，我们可以理解为合并。其实就是「将多个类型合并为一个类型」。
<pre style="margin-top: 10px;margin-bottom: 10px;"><code style="overflow-x: auto;padding: 16px;background: #1E1E1E;color: #DCDCDC;display: -webkit-box;font-family: Operator Mono, Consolas, Monaco, Menlo, monospace;border-radius: 0px;font-size: 12px;-webkit-overflow-scrolling: touch;letter-spacing: 0px;">Man & WoMan </code></pre>
<ul style="margin-top: 8px;margin-bottom: 8px;padding-left: 25px;font-size: 15px;list-style-type: circle;" class="list-paddingleft-2">
<li>
<section style="margin-top: 5px;margin-bottom: 5px;line-height: 26px;font-size: 14px;">
同时是 Man 和 Woman
</section></li>
<li>
<section style="margin-top: 5px;margin-bottom: 5px;line-height: 26px;font-size: 14px;">
同时拥有 Man 和 Woman 这两种类型的成员
</section></li>
</ul>
<pre style="margin-top: 10px;margin-bottom: 10px;"><code style="overflow-x: auto;padding: 16px;background: #1E1E1E;color: #DCDCDC;display: -webkit-box;font-family: Operator Mono, Consolas, Monaco, Menlo, monospace;border-radius: 0px;font-size: 12px;-webkit-overflow-scrolling: touch;letter-spacing: 0px;">interface ObjectConstructor{ assign<T,U>(target:T,source:U):T & U; } </code></pre>
以上是 ts 的源码实现，下面我们再看一个我们日常使用中的例子
<pre style="margin-top: 10px;margin-bottom: 10px;"><code style="overflow-x: auto;padding: 16px;background: #1E1E1E;color: #DCDCDC;display: -webkit-box;font-family: Operator Mono, Consolas, Monaco, Menlo, monospace;border-radius: 0px;font-size: 12px;-webkit-overflow-scrolling: touch;letter-spacing: 0px;">interface A{ name:string; age:number; sayName:(name:string)=>void } interface B{ name:string; gender:string; sayGender:(gender:string)=>void } let a:A&B; // 这是合法的 a.age a.sayGender </code></pre>
注意：16446
<pre style="margin-top: 10px;margin-bottom: 10px;"><code style="overflow-x: auto;padding: 16px;background: #1E1E1E;color: #DCDCDC;display: -webkit-box;font-family: Operator Mono, Consolas, Monaco, Menlo, monospace;border-radius: 0px;font-size: 12px;-webkit-overflow-scrolling: touch;letter-spacing: 0px;">T & never = never </code></pre>
<h2 style="margin-top: 30px;margin-bottom: 15px;font-weight: bold;color: black;font-size: 22px;border-bottom: 4px solid rgb(64, 184, 250);"><span style="display: flex;width: 20px;height: 20px;background-size: 20px 20px;background-image: url("https://mmbiz.qpic.cn/sz_mmbiz_png/udZl15qqib0PDF1OV4STY4HN2icIqrDiaplpEr9CDg27bQvt2Kwl7hZlHl338FO8t6Q5DtvkAhKrffjxIPfJkvOpA/640?wx_fmt=png");margin-bottom: -22px;">extends<span style="display: flex;width: 200px;height: 10px;border-top-left-radius: 20px;background: rgba(64, 184, 250, 0.5);color: rgb(255, 255, 255);font-size: 16px;letter-spacing: 0.544px;justify-content: flex-end;float: right;margin-top: -10px;"></h2>
<code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">extends</code> 即为扩展、继承。在 ts 中，「extends 关键字既可以来扩展已有的类型，也可以对类型进行条件限定」。在扩展已有类型时，不可以进行类型冲突的覆盖操作。例如，基类型中键<code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">a</code>为<code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">string</code>，在扩展出的类型中无法将其改为<code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">number</code>。
<pre style="margin-top: 10px;margin-bottom: 10px;"><code style="overflow-x: auto;padding: 16px;background: #1E1E1E;color: #DCDCDC;display: -webkit-box;font-family: Operator Mono, Consolas, Monaco, Menlo, monospace;border-radius: 0px;font-size: 12px;-webkit-overflow-scrolling: touch;letter-spacing: 0px;">type num = { num:number; } interface IStrNum extends num { str:string; } // 与上面等价 type TStrNum = A & { str:string; } </code></pre>
在 ts 中，我们还可以通过条件类型进行一些三目操作：<code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">T extends U ? X : Y</code>
<pre style="margin-top: 10px;margin-bottom: 10px;"><code style="overflow-x: auto;padding: 16px;background: #1E1E1E;color: #DCDCDC;display: -webkit-box;font-family: Operator Mono, Consolas, Monaco, Menlo, monospace;border-radius: 0px;font-size: 12px;-webkit-overflow-scrolling: touch;letter-spacing: 0px;">type IsEqualType<A , B> = A extends B ? (B extends A ? true : false) : false; type NumberEqualsToString = IsEqualType<number,string>; // false type NumberEqualsToNumber = IsEqualType<number,number>; // true </code></pre>
<h2 style="margin-top: 30px;margin-bottom: 15px;font-weight: bold;color: black;font-size: 22px;border-bottom: 4px solid rgb(64, 184, 250);"><span style="display: flex;width: 20px;height: 20px;background-size: 20px 20px;background-image: url("https://mmbiz.qpic.cn/sz_mmbiz_png/udZl15qqib0PDF1OV4STY4HN2icIqrDiaplpEr9CDg27bQvt2Kwl7hZlHl338FO8t6Q5DtvkAhKrffjxIPfJkvOpA/640?wx_fmt=png");margin-bottom: -22px;">keyof<span style="display: flex;width: 200px;height: 10px;border-top-left-radius: 20px;background: rgba(64, 184, 250, 0.5);color: rgb(255, 255, 255);font-size: 16px;letter-spacing: 0.544px;justify-content: flex-end;float: right;margin-top: -10px;"></h2>
「keyof 是索引类型操作符」。用于获取一个“常量”的类型,这里的“常量”是指任何可以在编译期确定的东西，例如<code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">const</code>、<code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">function</code>、<code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">class</code>等。它是从 「实际运行代码」 通向 「类型系统」 的单行道。理论上，任何运行时的符号名想要为类型系统所用，都要加上 <code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">typeof</code>。
在使用<code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">class</code>时，<code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">class</code>名表示实例类型，<code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">typeof class</code>表示 <code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">class</code>本身类型。是的，这个关键字和 js 的 <code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">typeof</code> 关键字重名了 。
假设 T 是一个类型，那么<code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">keyof T</code>产生的类型就是 <code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">T</code> 的属性名称字符串字面量类型构成的联合类型(联合类型比较简单，和交叉类型对立相似，这里就不做介绍了)。
「注意！上述的 T 是数据类型，并非数据本身」。
<pre style="margin-top: 10px;margin-bottom: 10px;"><code style="overflow-x: auto;padding: 16px;background: #1E1E1E;color: #DCDCDC;display: -webkit-box;font-family: Operator Mono, Consolas, Monaco, Menlo, monospace;border-radius: 0px;font-size: 12px;-webkit-overflow-scrolling: touch;letter-spacing: 0px;">interface IQZQD{ cnName:string; age:number; author:string; } type ant = keyof IQZQD; </code></pre>
在 <code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">vscode</code> 上，我们可以看到 <code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">ts</code> 推断出来的 <code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">ant</code>：
<figure style="margin-top: 10px;margin-bottom: 10px;">
<img data-src="https://mmbiz.qpic.cn/sz_mmbiz_png/udZl15qqib0PDF1OV4STY4HN2icIqrDiaplTyVcVDibrxniaF5rBCpsPQ1tIhbB32GMcCWAvZOWRvYFtrKk5rKv5eNw/640?wx_fmt=png" data-type="png" data-w="372" style="width: auto;border-radius: 6px;display: block;margin: 20px auto;object-fit: contain;box-shadow: rgb(153, 153, 153) 2px 4px 7px;">
</figure>
注意，如果 <code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">T</code> 是带有字符串索引的类型，那么<code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">keyof T</code>是 <code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">string</code>或者<code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">number</code>类型。
索引签名参数类型必须为 "string" 或 "number"
<pre style="margin-top: 10px;margin-bottom: 10px;"><code style="overflow-x: auto;padding: 16px;background: #1E1E1E;color: #DCDCDC;display: -webkit-box;font-family: Operator Mono, Consolas, Monaco, Menlo, monospace;border-radius: 0px;font-size: 12px;-webkit-overflow-scrolling: touch;letter-spacing: 0px;">interface Map<T> { [key: string]: T; } //T[U]是索引访问操作符;U是一个属性名称。 let keys: keyof Map<number>; //string | number let value: Map<number>['antzone'];//number </code></pre>
<h2 style="margin-top: 30px;margin-bottom: 15px;font-weight: bold;color: black;font-size: 22px;border-bottom: 4px solid rgb(64, 184, 250);"><span style="display: flex;width: 20px;height: 20px;background-size: 20px 20px;background-image: url("https://mmbiz.qpic.cn/sz_mmbiz_png/udZl15qqib0PDF1OV4STY4HN2icIqrDiaplpEr9CDg27bQvt2Kwl7hZlHl338FO8t6Q5DtvkAhKrffjxIPfJkvOpA/640?wx_fmt=png");margin-bottom: -22px;">泛型<span style="display: flex;width: 200px;height: 10px;border-top-left-radius: 20px;background: rgba(64, 184, 250, 0.5);color: rgb(255, 255, 255);font-size: 16px;letter-spacing: 0.544px;justify-content: flex-end;float: right;margin-top: -10px;"></h2>
泛型可能是对于前端同学来说理解起来有点困难的知识点了。通常我们说，泛型就是指定一个表示类型的变量，用它来代替某个实际的类型用于编程，而后再通过实际运行或推导的类型来对其进行替换，以达到一段使用泛型程序可以实际适应不同类型的目的。说白了，「泛型就是不预先确定的数据类型，具体的类型在使用的时候再确定的一种类型约束规范」。
泛型可以应用于 <code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">function</code>、<code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">interface</code>、<code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">type</code> 或者 <code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">class</code> 中。但是注意，「泛型不能应用于类的静态成员」
几个简单的例子，先感受下泛型
<pre style="margin-top: 10px;margin-bottom: 10px;"><code style="overflow-x: auto;padding: 16px;background: #1E1E1E;color: #DCDCDC;display: -webkit-box;font-family: Operator Mono, Consolas, Monaco, Menlo, monospace;border-radius: 0px;font-size: 12px;-webkit-overflow-scrolling: touch;letter-spacing: 0px;">function log<T>(value: T): T { console.log(value); return value; } // 两种调用方式 log<string[]>(['a', ',b', 'c']) log(['a', ',b', 'c']) log('Nealyang') </code></pre>
<ul style="margin-top: 8px;margin-bottom: 8px;padding-left: 25px;font-size: 15px;list-style-type: circle;" class="list-paddingleft-2">
<li>
<section style="margin-top: 5px;margin-bottom: 5px;line-height: 26px;font-size: 14px;">
泛型类型、泛型接口
</section></li>
</ul>
<pre style="margin-top: 10px;margin-bottom: 10px;"><code style="overflow-x: auto;padding: 16px;background: #1E1E1E;color: #DCDCDC;display: -webkit-box;font-family: Operator Mono, Consolas, Monaco, Menlo, monospace;border-radius: 0px;font-size: 12px;-webkit-overflow-scrolling: touch;letter-spacing: 0px;">type Log = <T>(value: T) => T let myLog: Log = log interface Log<T> { (value: T): T } let myLog: Log<number> = log // 泛型约束了整个接口，实现的时候必须指定类型。如果不指定类型，就在定义的之后指定一个默认的类型 myLog(1) </code></pre>
「我们也可以把泛型变量理解为函数的参数，只不过是另一个维度的参数，是代表类型而不是代表值的参数。」
<pre style="margin-top: 10px;margin-bottom: 10px;"><code style="overflow-x: auto;padding: 16px;background: #1E1E1E;color: #DCDCDC;display: -webkit-box;font-family: Operator Mono, Consolas, Monaco, Menlo, monospace;border-radius: 0px;font-size: 12px;-webkit-overflow-scrolling: touch;letter-spacing: 0px;">class Log<T> { // 泛型不能应用于类的静态成员 run(value: T) { console.log(value) return value } } let log1 = new Log<number>() //实例化的时候可以显示的传入泛型的类型 log1.run(1) let log2 = new Log() log2.run({ a: 1 }) //也可以不传入类型参数，当不指定的时候，value 的值就可以是任意的值 </code></pre>
类型约束，需预定义一个接口
<pre style="margin-top: 10px;margin-bottom: 10px;"><code style="overflow-x: auto;padding: 16px;background: #1E1E1E;color: #DCDCDC;display: -webkit-box;font-family: Operator Mono, Consolas, Monaco, Menlo, monospace;border-radius: 0px;font-size: 12px;-webkit-overflow-scrolling: touch;letter-spacing: 0px;">interface Length { length: number } function logAdvance<T extends Length>(value: T): T { console.log(value, value.length); return value; } // 输入的参数不管是什么类型，都必须具有 length 属性 logAdvance([1]) logAdvance('123') logAdvance({ length: 3 }) </code></pre>
泛型的好处：
<ul style="margin-top: 8px;margin-bottom: 8px;padding-left: 25px;font-size: 15px;list-style-type: circle;" class="list-paddingleft-2">
<li>
<section style="margin-top: 5px;margin-bottom: 5px;line-height: 26px;font-size: 14px;">
函数和类可以轻松的支持多种类型，增强程序的扩展性
</section></li>
<li>
<section style="margin-top: 5px;margin-bottom: 5px;line-height: 26px;font-size: 14px;">
不必写多条函数重载，冗长的联合类型声明，增强代码的可读性
</section></li>
<li>
<section style="margin-top: 5px;margin-bottom: 5px;line-height: 26px;font-size: 14px;">
灵活控制类型之间的约束
</section></li>
</ul>
泛型，在 ts 内部也都是非常常用的，尤其是对于容器类非常常用。而对于我们，还是要多使用，多思考的，这样才会有更加深刻的体会。同时也对塑造我们类型思维非常的有帮助。
<h3 style="color: black;font-weight: bold;text-align: center;margin-top: 50px;margin-bottom: 20px;"><span style="width: 30px;height: 30px;display: block;background-image: url("https://mmbiz.qpic.cn/sz_mmbiz_png/udZl15qqib0PDF1OV4STY4HN2icIqrDiaplfXAoFibCnKfqYRkTQ3IyIJfF79SGwXVJtiau76hbooaZt2dKwTy681pA/640?wx_fmt=png");background-position: center center;background-size: 30px;left: 0px;right: 0px;margin: auto;opacity: 1;background-repeat: no-repeat;bottom: 12px;">小试牛刀</h3>
<pre style="margin-top: 10px;margin-bottom: 10px;"><code style="overflow-x: auto;padding: 16px;background: #1E1E1E;color: #DCDCDC;display: -webkit-box;font-family: Operator Mono, Consolas, Monaco, Menlo, monospace;border-radius: 0px;font-size: 12px;-webkit-overflow-scrolling: touch;letter-spacing: 0px;">function pluck<T, K extends keyof T>(o: T, names: K[]): T[K][] { return names.map(n => o[n]); } interface Person { name: string; age: number; } let person: Person = { name: 'Jarid', age: 35 }; let strings: string[] = pluck(person, ['name', 'name', 'name']); //["Jarid", "Jarid", "Jarid"] </code></pre>
所谓的小试牛刀，就是结合上面我们说的那几个点，分析下<code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">pluck</code>方法的意思
<ul style="margin-top: 8px;margin-bottom: 8px;padding-left: 25px;font-size: 15px;list-style-type: circle;" class="list-paddingleft-2">
<li>
<section style="margin-top: 5px;margin-bottom: 5px;line-height: 26px;font-size: 14px;">
<code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;"><T, K extends keyof T></code>约束了这是一个泛型函数
</section></li>
<ul style="margin-top: 8px;margin-bottom: 8px;padding-left: 25px;font-size: 15px;list-style-type: square;" class="list-paddingleft-2">
<li>
<section style="margin-top: 5px;margin-bottom: 5px;line-height: 26px;font-size: 14px;">
<code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">keyof T</code> 就是取 T 中的所有的常量 key（这个例子的调用中）,即为：
<code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">"name" | "age"</code>
</section></li>
<li>
<section style="margin-top: 5px;margin-bottom: 5px;line-height: 26px;font-size: 14px;">
<code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">K extends keyof Person</code> 即为 K 是 
<code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">"name"</code> or 
<code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">"age"</code>
</section></li>
</ul>
<li>
<section style="margin-top: 5px;margin-bottom: 5px;line-height: 26px;font-size: 14px;">
结合以上泛型解释，再看形参
</section></li>
<ul style="margin-top: 8px;margin-bottom: 8px;padding-left: 25px;font-size: 15px;list-style-type: square;" class="list-paddingleft-2">
<li>
<section style="margin-top: 5px;margin-bottom: 5px;line-height: 26px;font-size: 14px;">
<code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">K[]</code> 即为 只能包含
<code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">"name"</code> or 
<code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">"age"</code>的数组
</section></li>
</ul>
<li>
<section style="margin-top: 5px;margin-bottom: 5px;line-height: 26px;font-size: 14px;">
再看返回值
</section></li>
<ul style="margin-top: 8px;margin-bottom: 8px;padding-left: 25px;font-size: 15px;list-style-type: square;" class="list-paddingleft-2">
<li>
<section style="margin-top: 5px;margin-bottom: 5px;line-height: 26px;font-size: 14px;">
<code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">T[K][]</code> 后面的
<code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">[]</code>是数组的意思。而 
<code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">T[K]</code>就是去对象的 T 下的
<code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">key</code>: 
<code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">K</code>的 
<code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">value</code>
</section></li>
</ul>
</ul>
<h2 style="margin-top: 30px;margin-bottom: 15px;font-weight: bold;color: black;font-size: 22px;border-bottom: 4px solid rgb(64, 184, 250);"><span style="display: flex;width: 20px;height: 20px;background-size: 20px 20px;background-image: url("https://mmbiz.qpic.cn/sz_mmbiz_png/udZl15qqib0PDF1OV4STY4HN2icIqrDiaplpEr9CDg27bQvt2Kwl7hZlHl338FO8t6Q5DtvkAhKrffjxIPfJkvOpA/640?wx_fmt=png");margin-bottom: -22px;">infer<span style="display: flex;width: 200px;height: 10px;border-top-left-radius: 20px;background: rgba(64, 184, 250, 0.5);color: rgb(255, 255, 255);font-size: 16px;letter-spacing: 0.544px;justify-content: flex-end;float: right;margin-top: -10px;"></h2>
infer 关键字最早出现在 PR 里面，「表示在 extends 条件语句中待推断的类型变量」
是在 ts2.8 引入的，在条件判断语句中，该关键字用于「替换手动获取类型」。
<pre style="margin-top: 10px;margin-bottom: 10px;"><code style="overflow-x: auto;padding: 16px;background: #1E1E1E;color: #DCDCDC;display: -webkit-box;font-family: Operator Mono, Consolas, Monaco, Menlo, monospace;border-radius: 0px;font-size: 12px;-webkit-overflow-scrolling: touch;letter-spacing: 0px;">type PramType<T> = T extends (param : infer p) => any ? p : T; </code></pre>
在上面的条件语句中，<code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">infer P</code> 表示待推断的函数参数，如果<code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">T</code>能赋值给<code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">(param : infer p) => any</code>,则结果是<code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">(param: infer P) => any</code>类型中的参数 <code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">P</code>,否则为<code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">T</code>.
<pre style="margin-top: 10px;margin-bottom: 10px;"><code style="overflow-x: auto;padding: 16px;background: #1E1E1E;color: #DCDCDC;display: -webkit-box;font-family: Operator Mono, Consolas, Monaco, Menlo, monospace;border-radius: 0px;font-size: 12px;-webkit-overflow-scrolling: touch;letter-spacing: 0px;">interface INealyang{ name:'Nealyang'; age:'25'; } type Func = (user:INealyang) => void; type Param = ParamType<Func>; // Param = INealyang type Test = ParamType<string>; // string </code></pre>
<h2 style="margin-top: 30px;margin-bottom: 15px;font-weight: bold;color: black;font-size: 22px;border-bottom: 4px solid rgb(64, 184, 250);"><span style="display: flex;width: 20px;height: 20px;background-size: 20px 20px;background-image: url("https://mmbiz.qpic.cn/sz_mmbiz_png/udZl15qqib0PDF1OV4STY4HN2icIqrDiaplpEr9CDg27bQvt2Kwl7hZlHl338FO8t6Q5DtvkAhKrffjxIPfJkvOpA/640?wx_fmt=png");margin-bottom: -22px;">工具泛型<span style="display: flex;width: 200px;height: 10px;border-top-left-radius: 20px;background: rgba(64, 184, 250, 0.5);color: rgb(255, 255, 255);font-size: 16px;letter-spacing: 0.544px;justify-content: flex-end;float: right;margin-top: -10px;"></h2>
所谓的工具泛型，其实就是泛型的一些语法糖的实现。完全也是可以自己的写的。我们也可以在<code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">lib.d.ts</code>中找到他们的定义
<h3 style="color: black;font-weight: bold;text-align: center;margin-top: 50px;margin-bottom: 20px;"><span style="width: 30px;height: 30px;display: block;background-image: url("https://mmbiz.qpic.cn/sz_mmbiz_png/udZl15qqib0PDF1OV4STY4HN2icIqrDiaplfXAoFibCnKfqYRkTQ3IyIJfF79SGwXVJtiau76hbooaZt2dKwTy681pA/640?wx_fmt=png");background-position: center center;background-size: 30px;left: 0px;right: 0px;margin: auto;opacity: 1;background-repeat: no-repeat;bottom: 12px;">Partial</h3>
<code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">Partial</code>的作用就是将传入的属性变为可选。
由于 <code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">keyof</code> 关键字已经介绍了。其实就是可以用来取得一个对象接口的所有 key 值。在介绍 <code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">Partial</code> 之前，我们再介绍下 <code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">in</code> 操作符:
<pre style="margin-top: 10px;margin-bottom: 10px;"><code style="overflow-x: auto;padding: 16px;background: #1E1E1E;color: #DCDCDC;display: -webkit-box;font-family: Operator Mono, Consolas, Monaco, Menlo, monospace;border-radius: 0px;font-size: 12px;-webkit-overflow-scrolling: touch;letter-spacing: 0px;">type Keys = "a" | "b" type Obj = { [p in Keys]: any } // -> { a: any, b: any } </code></pre>
然后再看 Partial 的实现：
<pre style="margin-top: 10px;margin-bottom: 10px;"><code style="overflow-x: auto;padding: 16px;background: #1E1E1E;color: #DCDCDC;display: -webkit-box;font-family: Operator Mono, Consolas, Monaco, Menlo, monospace;border-radius: 0px;font-size: 12px;-webkit-overflow-scrolling: touch;letter-spacing: 0px;">type Partial<T> = { [P in keyof T]?: T[P] }; </code></pre>
翻译一下就是<code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">keyof T</code> 拿到 <code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">T</code> 所有属性名, 然后 <code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">in</code> 进行遍历, 将值赋给 <code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">P</code>, 最后 <code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">T[P]</code> 取得相应属性的值,然后配合<code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">?:</code>改为可选。
<h3 style="color: black;font-weight: bold;text-align: center;margin-top: 50px;margin-bottom: 20px;"><span style="width: 30px;height: 30px;display: block;background-image: url("https://mmbiz.qpic.cn/sz_mmbiz_png/udZl15qqib0PDF1OV4STY4HN2icIqrDiaplfXAoFibCnKfqYRkTQ3IyIJfF79SGwXVJtiau76hbooaZt2dKwTy681pA/640?wx_fmt=png");background-position: center center;background-size: 30px;left: 0px;right: 0px;margin: auto;opacity: 1;background-repeat: no-repeat;bottom: 12px;">Required</h3>
<code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">Required</code> 的作用是将传入的属性变为必选项, 源码如下
<pre style="margin-top: 10px;margin-bottom: 10px;"><code style="overflow-x: auto;padding: 16px;background: #1E1E1E;color: #DCDCDC;display: -webkit-box;font-family: Operator Mono, Consolas, Monaco, Menlo, monospace;border-radius: 0px;font-size: 12px;-webkit-overflow-scrolling: touch;letter-spacing: 0px;">type Required<T> = { [P in keyof T]-?: T[P] }; </code></pre>
<h3 style="color: black;font-weight: bold;text-align: center;margin-top: 50px;margin-bottom: 20px;"><span style="width: 30px;height: 30px;display: block;background-image: url("https://mmbiz.qpic.cn/sz_mmbiz_png/udZl15qqib0PDF1OV4STY4HN2icIqrDiaplfXAoFibCnKfqYRkTQ3IyIJfF79SGwXVJtiau76hbooaZt2dKwTy681pA/640?wx_fmt=png");background-position: center center;background-size: 30px;left: 0px;right: 0px;margin: auto;opacity: 1;background-repeat: no-repeat;bottom: 12px;">Readonly</h3>
将传入的属性变为只读选项, 源码如下
<pre style="margin-top: 10px;margin-bottom: 10px;"><code style="overflow-x: auto;padding: 16px;background: #1E1E1E;color: #DCDCDC;display: -webkit-box;font-family: Operator Mono, Consolas, Monaco, Menlo, monospace;border-radius: 0px;font-size: 12px;-webkit-overflow-scrolling: touch;letter-spacing: 0px;">type Readonly<T> = { readonly [P in keyof T]: T[P] }; </code></pre>
<h3 style="color: black;font-weight: bold;text-align: center;margin-top: 50px;margin-bottom: 20px;"><span style="width: 30px;height: 30px;display: block;background-image: url("https://mmbiz.qpic.cn/sz_mmbiz_png/udZl15qqib0PDF1OV4STY4HN2icIqrDiaplfXAoFibCnKfqYRkTQ3IyIJfF79SGwXVJtiau76hbooaZt2dKwTy681pA/640?wx_fmt=png");background-position: center center;background-size: 30px;left: 0px;right: 0px;margin: auto;opacity: 1;background-repeat: no-repeat;bottom: 12px;">Record</h3>
该类型可以将 <code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">K</code> 中所有的属性的值转化为 <code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">T</code> 类型，源码实现如下：
<pre style="margin-top: 10px;margin-bottom: 10px;"><code style="overflow-x: auto;padding: 16px;background: #1E1E1E;color: #DCDCDC;display: -webkit-box;font-family: Operator Mono, Consolas, Monaco, Menlo, monospace;border-radius: 0px;font-size: 12px;-webkit-overflow-scrolling: touch;letter-spacing: 0px;">/** * Construct a type with a set of properties K of type T */ type Record<K extends keyof any, T> = { [P in K]: T; }; </code></pre>
可以根据 <code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">K</code> 中的所有可能值来设置 <code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">key</code>，以及 <code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">value</code> 的类型，举个例子：
<pre style="margin-top: 10px;margin-bottom: 10px;"><code style="overflow-x: auto;padding: 16px;background: #1E1E1E;color: #DCDCDC;display: -webkit-box;font-family: Operator Mono, Consolas, Monaco, Menlo, monospace;border-radius: 0px;font-size: 12px;-webkit-overflow-scrolling: touch;letter-spacing: 0px;">type T11 = Record<'a' | 'b' | 'c', Person>; // -> { a: Person; b: Person; c: Person; } </code></pre>
<h3 style="color: black;font-weight: bold;text-align: center;margin-top: 50px;margin-bottom: 20px;"><span style="width: 30px;height: 30px;display: block;background-image: url("https://mmbiz.qpic.cn/sz_mmbiz_png/udZl15qqib0PDF1OV4STY4HN2icIqrDiaplfXAoFibCnKfqYRkTQ3IyIJfF79SGwXVJtiau76hbooaZt2dKwTy681pA/640?wx_fmt=png");background-position: center center;background-size: 30px;left: 0px;right: 0px;margin: auto;opacity: 1;background-repeat: no-repeat;bottom: 12px;">Pick</h3>
从 <code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">T</code> 中取出 一系列 <code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">K</code> 的属性
<pre style="margin-top: 10px;margin-bottom: 10px;"><code style="overflow-x: auto;padding: 16px;background: #1E1E1E;color: #DCDCDC;display: -webkit-box;font-family: Operator Mono, Consolas, Monaco, Menlo, monospace;border-radius: 0px;font-size: 12px;-webkit-overflow-scrolling: touch;letter-spacing: 0px;">/** * From T, pick a set of properties whose keys are in the union K */ type Pick<T, K extends keyof T> = { [P in K]: T[P]; }; </code></pre>
<h3 style="color: black;font-weight: bold;text-align: center;margin-top: 50px;margin-bottom: 20px;"><span style="width: 30px;height: 30px;display: block;background-image: url("https://mmbiz.qpic.cn/sz_mmbiz_png/udZl15qqib0PDF1OV4STY4HN2icIqrDiaplfXAoFibCnKfqYRkTQ3IyIJfF79SGwXVJtiau76hbooaZt2dKwTy681pA/640?wx_fmt=png");background-position: center center;background-size: 30px;left: 0px;right: 0px;margin: auto;opacity: 1;background-repeat: no-repeat;bottom: 12px;">Exclude</h3>
Exclude 将某个类型中属于另一个的类型移除掉。
<pre style="margin-top: 10px;margin-bottom: 10px;"><code style="overflow-x: auto;padding: 16px;background: #1E1E1E;color: #DCDCDC;display: -webkit-box;font-family: Operator Mono, Consolas, Monaco, Menlo, monospace;border-radius: 0px;font-size: 12px;-webkit-overflow-scrolling: touch;letter-spacing: 0px;">/** * Exclude from T those types that are assignable to U */ type Exclude<T, U> = T extends U ? never : T; </code></pre>
以上语句的意思就是 如果 <code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">T</code> 能赋值给 <code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">U</code> 类型的话，那么就会返回 <code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">never</code> 类型，否则返回 <code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">T</code>，最终结果是将 <code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">T</code> 中的某些属于 <code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">U</code> 的类型移除掉
举个栗子：
<pre style="margin-top: 10px;margin-bottom: 10px;"><code style="overflow-x: auto;padding: 16px;background: #1E1E1E;color: #DCDCDC;display: -webkit-box;font-family: Operator Mono, Consolas, Monaco, Menlo, monospace;border-radius: 0px;font-size: 12px;-webkit-overflow-scrolling: touch;letter-spacing: 0px;">type T00 = Exclude<'a' | 'b' | 'c' | 'd', 'a' | 'c' | 'f'>; // -> 'b' | 'd' </code></pre>
可以看到 <code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">T</code> 是 <code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">'a' | 'b' | 'c' | 'd'</code> ，然后 <code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">U</code> 是 <code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">'a' | 'c' | 'f'</code> ，返回的新类型就可以将 <code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">U</code> 中的类型给移除掉，也就是 <code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">'b' | 'd'</code> 了。
<h3 style="color: black;font-weight: bold;text-align: center;margin-top: 50px;margin-bottom: 20px;"><span style="width: 30px;height: 30px;display: block;background-image: url("https://mmbiz.qpic.cn/sz_mmbiz_png/udZl15qqib0PDF1OV4STY4HN2icIqrDiaplfXAoFibCnKfqYRkTQ3IyIJfF79SGwXVJtiau76hbooaZt2dKwTy681pA/640?wx_fmt=png");background-position: center center;background-size: 30px;left: 0px;right: 0px;margin: auto;opacity: 1;background-repeat: no-repeat;bottom: 12px;">Extract</h3>
<code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">Extract</code> 的作用是提取出 <code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">T</code> 包含在 <code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">U</code> 中的元素，换种更加贴近语义的说法就是从 <code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">T</code> 中提取出 <code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">U</code>，源码如下：
<pre style="margin-top: 10px;margin-bottom: 10px;"><code style="overflow-x: auto;padding: 16px;background: #1E1E1E;color: #DCDCDC;display: -webkit-box;font-family: Operator Mono, Consolas, Monaco, Menlo, monospace;border-radius: 0px;font-size: 12px;-webkit-overflow-scrolling: touch;letter-spacing: 0px;">/** * Extract from T those types that are assignable to U */ type Extract<T, U> = T extends U ? T : never; </code></pre>
Demo:
<pre style="margin-top: 10px;margin-bottom: 10px;"><code style="overflow-x: auto;padding: 16px;background: #1E1E1E;color: #DCDCDC;display: -webkit-box;font-family: Operator Mono, Consolas, Monaco, Menlo, monospace;border-radius: 0px;font-size: 12px;-webkit-overflow-scrolling: touch;letter-spacing: 0px;">type T01 = Extract<'a' | 'b' | 'c' | 'd', 'a' | 'c' | 'f'>; // -> 'a' | 'c' </code></pre>
<h3 style="color: black;font-weight: bold;text-align: center;margin-top: 50px;margin-bottom: 20px;"><span style="width: 30px;height: 30px;display: block;background-image: url("https://mmbiz.qpic.cn/sz_mmbiz_png/udZl15qqib0PDF1OV4STY4HN2icIqrDiaplfXAoFibCnKfqYRkTQ3IyIJfF79SGwXVJtiau76hbooaZt2dKwTy681pA/640?wx_fmt=png");background-position: center center;background-size: 30px;left: 0px;right: 0px;margin: auto;opacity: 1;background-repeat: no-repeat;bottom: 12px;">Omit</h3>
<code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">Pick</code> 和 <code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">Exclude</code> 进行组合, 实现忽略对象某些属性功能, 源码如下:
<pre style="margin-top: 10px;margin-bottom: 10px;"><code style="overflow-x: auto;padding: 16px;background: #1E1E1E;color: #DCDCDC;display: -webkit-box;font-family: Operator Mono, Consolas, Monaco, Menlo, monospace;border-radius: 0px;font-size: 12px;-webkit-overflow-scrolling: touch;letter-spacing: 0px;">/** * Construct a type with the properties of T except for those in type K. */ type Omit<T, K extends keyof any> = Pick<T, Exclude<keyof T, K>>; </code></pre>
Demo:
<pre style="margin-top: 10px;margin-bottom: 10px;"><code style="overflow-x: auto;padding: 16px;background: #1E1E1E;color: #DCDCDC;display: -webkit-box;font-family: Operator Mono, Consolas, Monaco, Menlo, monospace;border-radius: 0px;font-size: 12px;-webkit-overflow-scrolling: touch;letter-spacing: 0px;">// 使用 type Foo = Omit<{name: string, age: number}, 'name'> // -> { age: number } </code></pre>
<h3 style="color: black;font-weight: bold;text-align: center;margin-top: 50px;margin-bottom: 20px;"><span style="width: 30px;height: 30px;display: block;background-image: url("https://mmbiz.qpic.cn/sz_mmbiz_png/udZl15qqib0PDF1OV4STY4HN2icIqrDiaplfXAoFibCnKfqYRkTQ3IyIJfF79SGwXVJtiau76hbooaZt2dKwTy681pA/640?wx_fmt=png");background-position: center center;background-size: 30px;left: 0px;right: 0px;margin: auto;opacity: 1;background-repeat: no-repeat;bottom: 12px;">更多工具泛型</h3>
<figure style="margin-top: 10px;margin-bottom: 10px;">
<img data-src="https://mmbiz.qpic.cn/sz_mmbiz_png/udZl15qqib0PDF1OV4STY4HN2icIqrDiaplcZM6Qq5Hk4tpj3IBHGREtv03eetK2Fq09icTq6iaunTZ3P2Y2a88iaAvA/640?wx_fmt=png" data-type="png" data-w="2186" style="width: auto;border-radius: 6px;display: block;margin: 20px auto;object-fit: contain;box-shadow: rgb(153, 153, 153) 2px 4px 7px;">
</figure>
其实常用的工具泛型大概就是我上面介绍的几种。更多的工具泛型，可以通过查看 <code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">lib.es5.d.ts</code>里面查看。
毕竟。。。搬运几段声明着实没啥意思。
<figure style="margin-top: 10px;margin-bottom: 10px;">
<img data-src="https://mmbiz.qpic.cn/sz_mmbiz_png/udZl15qqib0PDF1OV4STY4HN2icIqrDiaplEdaSA0ZicMV0MaLibqVoc98RsSMiaYL49sd5I33cgxaMqia3ibvW2MX5Rrg/640?wx_fmt=png" data-type="png" data-w="482" style="width: auto;border-radius: 6px;display: block;margin: 20px auto;object-fit: contain;box-shadow: rgb(153, 153, 153) 2px 4px 7px;">
<figcaption style="margin-top: 5px;text-align: center;font-size: 13px;">
<span style="background-image: url("https://mmbiz.qpic.cn/sz_mmbiz_png/udZl15qqib0PDF1OV4STY4HN2icIqrDiaplShuNZe2U1LQHuX1DmctGhuKkOGz7znbWF7BmrQfoPFcjDAficicrGibVg/640?wx_fmt=png");display: inline-block;width: 18px;height: 18px;background-size: 18px;background-repeat: no-repeat;background-position: center center;margin-right: 5px;margin-bottom: -5px;">罗列 api 的写着也怪无聊的...
</figcaption>
</figure>
<h2 style="margin-top: 30px;margin-bottom: 15px;font-weight: bold;color: black;font-size: 22px;border-bottom: 4px solid rgb(64, 184, 250);"><span style="display: flex;width: 20px;height: 20px;background-size: 20px 20px;background-image: url("https://mmbiz.qpic.cn/sz_mmbiz_png/udZl15qqib0PDF1OV4STY4HN2icIqrDiaplpEr9CDg27bQvt2Kwl7hZlHl338FO8t6Q5DtvkAhKrffjxIPfJkvOpA/640?wx_fmt=png");margin-bottom: -22px;">类型断言<span style="display: flex;width: 200px;height: 10px;border-top-left-radius: 20px;background: rgba(64, 184, 250, 0.5);color: rgb(255, 255, 255);font-size: 16px;letter-spacing: 0.544px;justify-content: flex-end;float: right;margin-top: -10px;"></h2>
断言这种东西还是少用。。。。不多对于初学者，估计最快熟练掌握的就是类型断言了。毕竟 「any 大法好」
Typescript 允许我们覆盖它的推断（毕竟代码使我们自己写的），然后根据我们自定义的类型去分析它。这种机制，我们称之为 「类型断言」
<pre style="margin-top: 10px;margin-bottom: 10px;"><code style="overflow-x: auto;padding: 16px;background: #1E1E1E;color: #DCDCDC;display: -webkit-box;font-family: Operator Mono, Consolas, Monaco, Menlo, monospace;border-radius: 0px;font-size: 12px;-webkit-overflow-scrolling: touch;letter-spacing: 0px;">const nealyang = {}; nealyang.enName = 'Nealyang'; // Error: 'enName' 属性不存在于 ‘{}’ nealyang.cnName = '一凨'; // Error: 'cnName' 属性不存在于 '{}' </code></pre>
<pre style="margin-top: 10px;margin-bottom: 10px;"><code style="overflow-x: auto;padding: 16px;background: #1E1E1E;color: #DCDCDC;display: -webkit-box;font-family: Operator Mono, Consolas, Monaco, Menlo, monospace;border-radius: 0px;font-size: 12px;-webkit-overflow-scrolling: touch;letter-spacing: 0px;">interface INealyang = { enName:string; cnName：string; } const nealyang = {} as INealyang; // const nealyang = <INealyang>{}; nealyang.enName = 'Nealyang'; nealyang.cnName = '一凨'; </code></pre>
类型断言比较简单，其实就是“纠正”<code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">ts</code>对类型的判断,当然，是不是纠正就看你自己的了。
需要注意一下两点即可：
<ul style="margin-top: 8px;margin-bottom: 8px;padding-left: 25px;font-size: 15px;list-style-type: circle;" class="list-paddingleft-2">
<li>
<section style="margin-top: 5px;margin-bottom: 5px;line-height: 26px;font-size: 14px;">
推荐类型断言的预发使用 
<code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">as</code>关键字，而不是
<code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);display: inline-block;padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;"><></code> ,防止歧义
</section></li>
<li>
<section style="margin-top: 5px;margin-bottom: 5px;line-height: 26px;font-size: 14px;">
类型断言并非类型转换，类型断言发生在编译阶段。类型转换发生在运行时
</section></li>
</ul>
<h2 style="margin-top: 30px;margin-bottom: 15px;font-weight: bold;color: black;font-size: 22px;border-bottom: 4px solid rgb(64, 184, 250);"><span style="display: flex;width: 20px;height: 20px;background-size: 20px 20px;background-image: url("https://mmbiz.qpic.cn/sz_mmbiz_png/udZl15qqib0PDF1OV4STY4HN2icIqrDiaplpEr9CDg27bQvt2Kwl7hZlHl338FO8t6Q5DtvkAhKrffjxIPfJkvOpA/640?wx_fmt=png");margin-bottom: -22px;">函数重载<span style="display: flex;width: 200px;height: 10px;border-top-left-radius: 20px;background: rgba(64, 184, 250, 0.5);color: rgb(255, 255, 255);font-size: 16px;letter-spacing: 0.544px;justify-content: flex-end;float: right;margin-top: -10px;"></h2>
<blockquote style="font-size: 0.9em;overflow: auto;padding: 10px 10px 10px 20px;margin-bottom: 20px;margin-top: 20px;text-size-adjust: 100%;line-height: 1.55em;border-radius: 6px;color: rgb(89, 89, 89);box-sizing: inherit;border-width: 1px;border-top-style: solid;border-right-style: solid;border-bottom-style: solid;border-color: rgba(64, 184, 250, 0.4);background: rgba(64, 184, 250, 0.1);">

在我刚开始使用 ts 的时候，我一直困惑。。。为什么会有函数重载这么鸡肋的写法，可选参数它不香么？

</blockquote>
<figure style="margin-top: 10px;margin-bottom: 10px;">
<img data-src="https://mmbiz.qpic.cn/sz_mmbiz_png/udZl15qqib0PDF1OV4STY4HN2icIqrDiaplIoze0N8f0J896MoYdAtTwdCfr4KkpPSkCZBbod9sqG1I9ZkVHlNceA/640?wx_fmt=png" data-type="png" data-w="197" style="width: auto;border-radius: 6px;display: block;margin: 20px auto;object-fit: contain;box-shadow: rgb(153, 153, 153) 2px 4px 7px;">
<figcaption style="margin-top: 5px;text-align: center;font-size: 13px;">
<span style="background-image: url("https://mmbiz.qpic.cn/sz_mmbiz_png/udZl15qqib0PDF1OV4STY4HN2icIqrDiaplShuNZe2U1LQHuX1DmctGhuKkOGz7znbWF7BmrQfoPFcjDAficicrGibVg/640?wx_fmt=png");display: inline-block;width: 18px;height: 18px;background-size: 18px;background-repeat: no-repeat;background-position: center center;margin-right: 5px;margin-bottom: -5px;">慢慢你品
</figcaption>
</figure>
函数重载的基本语法：
<pre style="margin-top: 10px;margin-bottom: 10px;"><code style="overflow-x: auto;padding: 16px;background: #1E1E1E;color: #DCDCDC;display: -webkit-box;font-family: Operator Mono, Consolas, Monaco, Menlo, monospace;border-radius: 0px;font-size: 12px;-webkit-overflow-scrolling: touch;letter-spacing: 0px;">declare function test(a: number): number; declare function test(a: string): string; const resS = test('Hello World'); // resS 被推断出类型为 string； const resN = test(1234); // resN 被推断出类型为 number; </code></pre>
这里我们申明了两次？！为什么我不能判断类型或者可选参数呢？后来我遇到这么一个场景，
<pre style="margin-top: 10px;margin-bottom: 10px;"><code style="overflow-x: auto;padding: 16px;background: #1E1E1E;color: #DCDCDC;display: -webkit-box;font-family: Operator Mono, Consolas, Monaco, Menlo, monospace;border-radius: 0px;font-size: 12px;-webkit-overflow-scrolling: touch;letter-spacing: 0px;">interface User { name: string; age: number; } declare function test(para: User | number, flag?: boolean): number; </code></pre>
在这个 test 函数里，我们的本意可能是当传入参数 para 是 User 时，不传 flag，当传入 para 是 number 时，传入 flag。TypeScript 并不知道这些，当你传入 para 为 User 时，flag 同样允许你传入：
<pre style="margin-top: 10px;margin-bottom: 10px;"><code style="overflow-x: auto;padding: 16px;background: #1E1E1E;color: #DCDCDC;display: -webkit-box;font-family: Operator Mono, Consolas, Monaco, Menlo, monospace;border-radius: 0px;font-size: 12px;-webkit-overflow-scrolling: touch;letter-spacing: 0px;">const user = { name: 'Jack', age: 666 } // 没有报错，但是与想法违背 const res = test(user, false); </code></pre>
使用函数重载能帮助我们实现：
<pre style="margin-top: 10px;margin-bottom: 10px;"><code style="overflow-x: auto;padding: 16px;background: #1E1E1E;color: #DCDCDC;display: -webkit-box;font-family: Operator Mono, Consolas, Monaco, Menlo, monospace;border-radius: 0px;font-size: 12px;-webkit-overflow-scrolling: touch;letter-spacing: 0px;">interface User { name: string; age: number; } declare function test(para: User): number; declare function test(para: number, flag: boolean): number; const user = { name: 'Jack', age: 666 }; // bingo // Error: 参数不匹配 const res = test(user, false); </code></pre>
<h2 style="margin-top: 30px;margin-bottom: 15px;font-weight: bold;color: black;font-size: 22px;border-bottom: 4px solid rgb(64, 184, 250);"><span style="display: flex;width: 20px;height: 20px;background-size: 20px 20px;background-image: url("https://mmbiz.qpic.cn/sz_mmbiz_png/udZl15qqib0PDF1OV4STY4HN2icIqrDiaplpEr9CDg27bQvt2Kwl7hZlHl338FO8t6Q5DtvkAhKrffjxIPfJkvOpA/640?wx_fmt=png");margin-bottom: -22px;">Ts 的一些实战<span style="display: flex;width: 200px;height: 10px;border-top-left-radius: 20px;background: rgba(64, 184, 250, 0.5);color: rgb(255, 255, 255);font-size: 16px;letter-spacing: 0.544px;justify-content: flex-end;float: right;margin-top: -10px;"></h2>
我之前在公众号里面发表过两篇关于TS在实战项目中的介绍：
<ul style="margin-top: 8px;margin-bottom: 8px;padding-left: 25px;font-size: 15px;list-style-type: circle;" class="list-paddingleft-2">
<li>
<section style="margin-top: 5px;margin-bottom: 5px;line-height: 26px;font-size: 14px;">
<a href="https://mp.weixin.qq.com/s?__biz=MzIxNjgwMDIzMA==&mid=2247484650&idx=1&sn=435a77e2b882a84e6c6026f7c3878031&scene=21#wechat_redirect" style="color: rgb(64, 184, 250);border-bottom: 1px solid rgb(59, 170, 250);" rel="nofollow" target="_blank">如何用 Decorator 装饰你的 Typescript？</a>
</section></li>
<li>
<section style="margin-top: 5px;margin-bottom: 5px;line-height: 26px;font-size: 14px;">
<a href="https://mp.weixin.qq.com/s?__biz=MzIxNjgwMDIzMA==&mid=2247485140&idx=1&sn=e056222bd4bcd4c7965219edb0fcd503&scene=21#wechat_redirect" style="color: rgb(64, 184, 250);border-bottom: 1px solid rgb(59, 170, 250);" rel="nofollow" target="_blank">一张页面引起的项目架构思考（rax+Typescript+hooks）</a>
</section></li>
</ul>
<h2 style="margin-top: 30px;margin-bottom: 15px;font-weight: bold;color: black;font-size: 22px;border-bottom: 4px solid rgb(64, 184, 250);"><span style="display: flex;width: 20px;height: 20px;background-size: 20px 20px;background-image: url("https://mmbiz.qpic.cn/sz_mmbiz_png/udZl15qqib0PDF1OV4STY4HN2icIqrDiaplpEr9CDg27bQvt2Kwl7hZlHl338FO8t6Q5DtvkAhKrffjxIPfJkvOpA/640?wx_fmt=png");margin-bottom: -22px;">参考文献<span style="display: flex;width: 200px;height: 10px;border-top-left-radius: 20px;background: rgba(64, 184, 250, 0.5);color: rgb(255, 255, 255);font-size: 16px;letter-spacing: 0.544px;justify-content: flex-end;float: right;margin-top: -10px;"></h2>
<ul style="margin-top: 8px;margin-bottom: 8px;padding-left: 25px;font-size: 15px;list-style-type: circle;" class="list-paddingleft-2">
<li>
<section style="margin-top: 5px;margin-bottom: 5px;line-height: 26px;font-size: 14px;">
<a href="https://mp.weixin.qq.com/s?__biz=MzIxNjgwMDIzMA==&mid=2247485103&idx=1&sn=9063e21d824db34820e955967c5a8ea3&scene=21#wechat_redirect" style="color: rgb(64, 184, 250);border-bottom: 1px solid rgb(59, 170, 250);" rel="nofollow" target="_blank">未来可期的TypeScript</a>
</section></li>
<li>
<section style="margin-top: 5px;margin-bottom: 5px;line-height: 26px;font-size: 14px;">
Typescript 中文文档
</section></li>
<li>
<section style="margin-top: 5px;margin-bottom: 5px;line-height: 26px;font-size: 14px;">
深入理解 Typescript
</section></li>
<li>
<section style="margin-top: 5px;margin-bottom: 5px;line-height: 26px;font-size: 14px;">
TypeScript 2.8下的终极React组件模式
</section></li>
<li>
<section style="margin-top: 5px;margin-bottom: 5px;line-height: 26px;font-size: 14px;">
【速查手册】TypeScript 高级类型 cheat sheet
</section></li>
<li>
<section style="margin-top: 5px;margin-bottom: 5px;line-height: 26px;font-size: 14px;">
高级类型
</section></li>
<li>
<section style="margin-top: 5px;margin-bottom: 5px;line-height: 26px;font-size: 14px;">
TypeScript 在 React 中使用总结 </section></li></ul><section data-id="94250" style="max-width: 100%;box-sizing: border-box;letter-spacing: 0.544px;white-space: normal;color: rgb(0, 0, 0);font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, "PingFang SC", Cambria, Cochin, Georgia, Times, "Times New Roman", serif;font-size: 16px;text-align: left;background-color: rgb(255, 255, 255);border-width: 0px;border-style: none;border-color: initial;overflow-wrap: break-word !important;"><section data-id="91842" style="max-width: 100%;box-sizing: border-box;border-width: 0px;border-style: none;border-color: initial;text-align: right;overflow-wrap: break-word !important;"><section style="max-width: 100%;display: inline-block;clear: both;box-sizing: border-box !important;overflow-wrap: break-word !important;"><section><section style="max-width: 100%;display: flex;justify-content: center;align-items: center;box-sizing: border-box !important;overflow-wrap: break-word !important;">
</section>
</section>
</section>
</section>
</section>
</section> 
</div> 
</div>

Last modification：July 24th, 2020 at 10:55 am

如果觉得我的文章对你有用，请随意赞赏