-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsearch.xml
72 lines (34 loc) · 71.8 KB
/
search.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<?xml version="1.0" encoding="utf-8"?>
<search>
<entry>
<title>CSS架构之BEM规范</title>
<link href="/2023/07/05/css-jia-gou-zhi-bem-gui-fan/"/>
<url>/2023/07/05/css-jia-gou-zhi-bem-gui-fan/</url>
<content type="html"><![CDATA[<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>最近在学习公司代码的时候，发现公司的代码会将统一风格样式的组件以及工具类进行抽离，放入一个独立的仓库进行维护。而这种现象不仅仅在公司代码当中，当我们阅读一些知名开源组件库时，都会进行此类操作。例如：<a href="https://github.com/Tencent/tdesign-mobile-vue">Tencent-design</a>库将 PC 端，移动端，Vue ， React 组件库的样式进行抽离，保证风格统一。而对于大型组件库而言，对于样式的要求更高，因此各类组件库会采用 BEM 思想对样式命名进行统一规范。</p><blockquote><p>本文主要对 CSS 的 BEM 架构思想进行学习，统一了解基本的 CSS 样式封装，对 CSS 的前端工程化进一步了解。</p></blockquote><h2 id="什么是-BEM-规范？"><a href="#什么是-BEM-规范？" class="headerlink" title="什么是 BEM 规范？"></a>什么是 BEM 规范？</h2><p><code>BEM</code> 是指：块（<code>block</code>），元素(<code>element</code>)，修饰符（<code>modifier</code>）的简写，是一种组件化的 <code>CSS</code> 命名方法与规范，由俄罗斯 Yandex 团队所提出。</p><pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">.block</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token selector">.block__element</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token selector">.block__element--modifier</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><h2 id="为什么我们需要-BEM-规范？"><a href="#为什么我们需要-BEM-规范？" class="headerlink" title="为什么我们需要 BEM 规范？"></a>为什么我们需要 BEM 规范？</h2><blockquote><p>在计算机科学领域，只有 2 个非常难解决的问题：一个是缓存失效，而另一个则是命名。-Phil Karlton</p></blockquote><p><code>BEM</code> 可以帮助开发将用户的界面划分为多个独立的模块，使开发更加便捷高效，利于团队开发。同时减少非常混乱的 CSS 命名，提高 CSS 代码的可读性。</p><ul><li><p>无冲突性 & 复用性高</p><p>针对团队开发中，我们可能会因为全局的 <code>CSS</code> 作用域而感到困扰，产生 <code>CSS</code> 命名冲突的问题。而对于项目开发而言，每一个组件其实都是独一无二的，我们可以根据组件的名字作为元素，确保选择器的唯一性，同时提高代码的复用率。</p></li><li><p>命名简单</p></li><li><p>风格统一</p><p><code>BEM</code> 可以保证团队开发当中风格的统一，减少沟通成本。</p></li><li><p>结构化</p><p>保证 <code>CSS</code> 代码的结构化，命名具有逻辑性，更利用理解记忆。</p></li></ul><h2 id="如何使用-BEM-规范"><a href="#如何使用-BEM-规范" class="headerlink" title="如何使用 BEM 规范"></a>如何使用 BEM 规范</h2><h3 id="块级-block"><a href="#块级-block" class="headerlink" title="块级 block"></a>块级 block</h3><blockquote><p>块级 block 是对一个组件名进行的抽象，多个单词采用 <code>-</code> 拼接</p></blockquote><pre class="line-numbers language-markup" data-language="markup"><code class="language-markup"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>nav-li-a is-active<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>header</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>header-image<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>header</span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><h3 id="元素-element"><a href="#元素-element" class="headerlink" title="元素 element"></a>元素 element</h3><blockquote><p>元素 element 在模块中可能表现为多个层级，通过 <code>__</code> 进行连接，也可以采用 <code>-</code> 进行演变。</p></blockquote><pre class="line-numbers language-markup" data-language="markup"><code class="language-markup"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>nav--main__item js-nav--main__item<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span><span class="token punctuation">></span></span>...<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>nav--main__item js-nav--main__item<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span><span class="token punctuation">></span></span>...<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>nav--main__item js-nav--main__item<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span><span class="token punctuation">></span></span>...<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre><h3 id="修饰符-modifier"><a href="#修饰符-modifier" class="headerlink" title="修饰符 modifier"></a>修饰符 modifier</h3><blockquote><p>针对某个元素特有的状态做修饰，例如：颜色，大小，用途。采用 <code>_</code> 进行拼接。</p></blockquote><pre class="line-numbers language-markup" data-language="markup"><code class="language-markup"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>header</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>header-image_logo<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>header</span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre><h2 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h2><p>针对大型项目，我们可以采用 <code>BEM</code> 规范提高代码质量和开发效率，减少 <code>CSS</code> 命名烦恼，让我们拥抱更加模块化的开发。</p>]]></content>
<categories>
<category> CSS </category>
</categories>
<tags>
<tag> CSS </tag>
</tags>
</entry>
<entry>
<title>Hello World</title>
<link href="/2023/07/05/hello-world/"/>
<url>/2023/07/05/hello-world/</url>
<content type="html"><![CDATA[<p>Welcome to <a href="https://hexo.io/">Hexo</a>! This is your very first post. Check <a href="https://hexo.io/docs/">documentation</a> for more info. If you get any problems when using Hexo, you can find the answer in <a href="https://hexo.io/docs/troubleshooting.html">troubleshooting</a> or you can ask me on <a href="https://github.com/hexojs/hexo/issues">GitHub</a>.</p><h2 id="Quick-Start"><a href="#Quick-Start" class="headerlink" title="Quick Start"></a>Quick Start</h2><h3 id="Create-a-new-post"><a href="#Create-a-new-post" class="headerlink" title="Create a new post"></a>Create a new post</h3><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash">$ hexo new <span class="token string">"My New Post"</span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><p>More info: <a href="https://hexo.io/docs/writing.html">Writing</a></p><h3 id="Run-server"><a href="#Run-server" class="headerlink" title="Run server"></a>Run server</h3><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash">$ hexo server<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><p>More info: <a href="https://hexo.io/docs/server.html">Server</a></p><h3 id="Generate-static-files"><a href="#Generate-static-files" class="headerlink" title="Generate static files"></a>Generate static files</h3><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash">$ hexo generate<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><p>More info: <a href="https://hexo.io/docs/generating.html">Generating</a></p><h3 id="Deploy-to-remote-sites"><a href="#Deploy-to-remote-sites" class="headerlink" title="Deploy to remote sites"></a>Deploy to remote sites</h3><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash">$ hexo deploy<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><p>More info: <a href="https://hexo.io/docs/one-command-deployment.html">Deployment</a></p>]]></content>
</entry>
<entry>
<title>TypeScript 类型操作</title>
<link href="/2023/06/14/typescript-gao-ji-lei-xing/"/>
<url>/2023/06/14/typescript-gao-ji-lei-xing/</url>
<content type="html"><![CDATA[<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>最近在学习 TypeScript 的时候，发现一个特别有意思的项目<a href="https://github.com/type-challenges/type-challenges">type-challenges</a>。信心满满的我结果只会做第一个题，下定决心开始恶补一下 TypeScript 的相关知识，因此本文将介绍 TypeScript 一些常见的类型操作，方便后续学习。</p><blockquote><p>本文将主要介绍 TypeScript 一些基本关键词的特性，帮助我们熟悉 TypeScript 的类型操作。如果你想获得更多关于 TypeScript 的相关知识，也请不要忘记 <a href="https://www.typescriptlang.org/">官方文档</a>。</p></blockquote><h2 id="Typescript-类型操作"><a href="#Typescript-类型操作" class="headerlink" title="Typescript 类型操作"></a>Typescript 类型操作</h2><p>Typescript 的类型系统十分强大，因为它允许通过类型去定义生成其他类型。TypeScript 向我们提供了各种各样的类型运算符去使用，从而生成新的类型。通过类型操作符，我们可以使用简洁的操作来表达复杂的类型与值。</p><h3 id="keyof"><a href="#keyof" class="headerlink" title="keyof"></a>keyof</h3><p><code>keyof</code> 可以获得任意对象类型的键，并且返回根据键生成的字符串或者数字的组成<strong>联合类型</strong>：</p><pre class="line-numbers language-typescript" data-language="typescript"><code class="language-typescript"><span class="token keyword">type</span> <span class="token class-name">Point</span> <span class="token operator">=</span> <span class="token punctuation">{</span> x<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span> y<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token punctuation">;</span><span class="token keyword">type</span> <span class="token class-name"><span class="token constant">P</span></span> <span class="token operator">=</span> <span class="token keyword">keyof</span> Point<span class="token punctuation">;</span><span class="token comment">// P 与 type P = "x" | "y" 等价</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><p>如果该类型存在 <code>string</code> 或者 <code>number</code> 类型的键，那么 <code>keyof</code> 会将其返回：</p><pre class="line-numbers language-typescript" data-language="typescript"><code class="language-typescript"><span class="token keyword">type</span> <span class="token class-name">ArrayIs</span> <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token punctuation">[</span><span class="token constant">N</span><span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">]</span><span class="token operator">:</span> <span class="token builtin">unknown</span><span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token punctuation">;</span><span class="token keyword">type</span> <span class="token class-name"><span class="token constant">A</span></span> <span class="token operator">=</span> <span class="token keyword">keyof</span> ArrayIs<span class="token punctuation">;</span><span class="token comment">// type A = number</span><span class="token keyword">type</span> <span class="token class-name">MapIs</span> <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token punctuation">[</span><span class="token constant">K</span><span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">]</span><span class="token operator">:</span> <span class="token builtin">unknown</span><span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token punctuation">;</span><span class="token keyword">type</span> <span class="token class-name"><span class="token constant">M</span></span> <span class="token operator">=</span> <span class="token keyword">keyof</span> MapIs<span class="token punctuation">;</span><span class="token comment">// type M = string | number</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><blockquote><p><code>M</code> 是 <code>string | number</code> 是<strong>因为 JavaScript 的键总是会转化为一个 <code>string</code></strong> ,因此 <code>obj[0]</code> 和 <code>obj["0"]</code> 是相等的。</p></blockquote><pre class="line-numbers language-typescript" data-language="typescript"><code class="language-typescript"><span class="token keyword">class</span> <span class="token class-name"><span class="token constant">EG</span></span> <span class="token punctuation">{</span> <span class="token keyword">private</span> name<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span> <span class="token keyword">public</span> age<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token keyword">type</span> <span class="token class-name"><span class="token constant">TEG</span></span> <span class="token operator">=</span> <span class="token keyword">keyof</span> <span class="token constant">EG</span><span class="token punctuation">;</span><span class="token comment">// type TEG = 'age'</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><blockquote><p><code>keyof</code> 只能查询该类型上的<strong>公有属性</strong>的 <code>key</code> 的联合。</p></blockquote><h3 id="typeof"><a href="#typeof" class="headerlink" title="typeof"></a>typeof</h3><p><code>typeof</code> 可以帮助你获取引用变量或者属性的类型</p><pre class="line-numbers language-typescript" data-language="typescript"><code class="language-typescript"><span class="token keyword">let</span> str <span class="token operator">=</span> <span class="token string">'hello'</span><span class="token punctuation">;</span><span class="token keyword">let</span> n<span class="token operator">:</span> <span class="token keyword">typeof</span> str<span class="token punctuation">;</span><span class="token comment">// let n: string</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre><p><code>typeof</code> 对基本类型的帮助不是很大，但是可以结合 <code>typeof</code> 获取生成其他类型模式，例如生成一个 <code>ReturnType</code> 类型：</p><pre class="line-numbers language-typescript" data-language="typescript"><code class="language-typescript"><span class="token keyword">type</span> <span class="token class-name">Predicate</span> <span class="token operator">=</span> <span class="token punctuation">(</span>x<span class="token operator">:</span> <span class="token builtin">unknown</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token builtin">boolean</span><span class="token punctuation">;</span><span class="token keyword">type</span> <span class="token class-name"><span class="token constant">K</span></span> <span class="token operator">=</span> ReturnType<span class="token operator"><</span>Predicate<span class="token operator">></span><span class="token punctuation">;</span><span class="token comment">// type K = boolean</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre><p><code>ReturnType</code> 内置类型可以帮助我们返回一个函数类型的结果类型，但是如果我们不知道一个函数的具体类型时，可以借助 <code>typeof</code> 得到其类型。</p><pre class="line-numbers language-typescript" data-language="typescript"><code class="language-typescript"><span class="token keyword">function</span> <span class="token function">f</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">{</span> x<span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span> y<span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token keyword">type</span> <span class="token class-name"><span class="token constant">P</span></span> <span class="token operator">=</span> ReturnType<span class="token operator"><</span><span class="token keyword">typeof</span> f<span class="token operator">></span><span class="token punctuation">;</span><span class="token comment">// type P = {</span><span class="token comment">// x: number;</span><span class="token comment">// y: number;</span><span class="token comment">// }</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><p>如果不是 <code>typeof</code> 的话，会产生 <code>'f' refers to a value, but is being used as a type here. Did you mean 'typeof f'?</code> 的错误提示。</p><blockquote><p>TypeScript 对于 <code>typeof</code> 的使用做出了严格的限制，只有作用与变量名和属性上才是合法的，从而减少语法错误。</p></blockquote><h3 id="索引类型"><a href="#索引类型" class="headerlink" title="索引类型"></a>索引类型</h3><p>我们可以通过索引类型来获取某一个特定属性的类型。</p><p>例如：</p><pre class="line-numbers language-typescript" data-language="typescript"><code class="language-typescript"><span class="token keyword">type</span> <span class="token class-name">Person</span> <span class="token operator">=</span> <span class="token punctuation">{</span> name<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span> age<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token punctuation">;</span><span class="token keyword">type</span> <span class="token class-name">Age</span> <span class="token operator">=</span> Person<span class="token punctuation">[</span><span class="token string">'age'</span><span class="token punctuation">]</span><span class="token punctuation">;</span><span class="token comment">// type Age = number</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><p>注意上述 <code>'age'</code> 表示一个字面量类型，而索引类型接受的参数本身就是一个类型，因此我们可以使用联合类型，<code>keyof</code> ，等关键词来表示该类型。</p><pre class="line-numbers language-typescript" data-language="typescript"><code class="language-typescript"><span class="token keyword">type</span> <span class="token class-name">T1Person</span> <span class="token operator">=</span> Person<span class="token punctuation">[</span><span class="token string">'age'</span> <span class="token operator">|</span> <span class="token string">'name'</span><span class="token punctuation">]</span><span class="token punctuation">;</span><span class="token keyword">type</span> <span class="token class-name">T2Person</span> <span class="token operator">=</span> Person<span class="token punctuation">[</span><span class="token keyword">keyof</span> Person<span class="token punctuation">]</span><span class="token punctuation">;</span><span class="token keyword">type</span> <span class="token class-name">PersonKey</span> <span class="token operator">=</span> <span class="token string">'age'</span> <span class="token operator">|</span> <span class="token string">'name'</span><span class="token punctuation">;</span><span class="token keyword">type</span> <span class="token class-name">T3Person</span> <span class="token operator">=</span> Person<span class="token punctuation">[</span>PersonKey<span class="token punctuation">]</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><p>上述的类型都表示 <code>string | number</code>，因为传入的类型参数中，存在属性匹配。</p><p>如果索引一个不存在的属性，会产生 <code>Property 'alve' does not exist on type 'Person'.</code> 的错误。</p><pre class="line-numbers language-typescript" data-language="typescript"><code class="language-typescript"><span class="token keyword">type</span> <span class="token class-name">ErrorPerson</span> <span class="token operator">=</span> Person<span class="token punctuation">[</span><span class="token string">'son'</span><span class="token punctuation">]</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><p>除此之外，索引类型最重要的使用就是在数组元素中，通过 <code>number</code> 类型来获取数组元素的类型。我们通常会将 <code>typeof</code> 联合使用：</p><pre class="line-numbers language-typescript" data-language="typescript"><code class="language-typescript"><span class="token keyword">const</span> MyArray <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token punctuation">{</span> name<span class="token operator">:</span> <span class="token string">'Alice'</span><span class="token punctuation">,</span> age<span class="token operator">:</span> <span class="token number">15</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> name<span class="token operator">:</span> <span class="token string">'Bob'</span><span class="token punctuation">,</span> age<span class="token operator">:</span> <span class="token number">23</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> name<span class="token operator">:</span> <span class="token string">'Eve'</span><span class="token punctuation">,</span> age<span class="token operator">:</span> <span class="token number">38</span> <span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">]</span><span class="token punctuation">;</span><span class="token keyword">type</span> <span class="token class-name">MyArrayT</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token keyword">typeof</span> MyArray<span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token builtin">number</span><span class="token punctuation">]</span><span class="token punctuation">;</span><span class="token comment">// type MyArrayT = {</span><span class="token comment">// name: string;</span><span class="token comment">// age: number;</span><span class="token comment">// }</span><span class="token keyword">type</span> <span class="token class-name">Age1</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token keyword">typeof</span> MyArray<span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token builtin">number</span><span class="token punctuation">]</span><span class="token punctuation">[</span><span class="token string">'age'</span><span class="token punctuation">]</span><span class="token punctuation">;</span><span class="token comment">// type Age = number</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><blockquote><p>需要牢记的是，<strong>索引类型传入的是一个类型参数，而不是具体的值</strong>，否则会产生错误提示。<code>Type T cannot be used as an index type.T refers to a value, but is being used as a type here. Did you mean 'typeof T'?</code></p></blockquote><h3 id="条件类型"><a href="#条件类型" class="headerlink" title="条件类型"></a>条件类型</h3><p>条件类型可以帮助我们对类型的输入进行判断，从而输出合适的类型。</p><pre class="line-numbers language-typescript" data-language="typescript"><code class="language-typescript"><span class="token keyword">type</span> <span class="token class-name">num</span> <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span><span class="token keyword">type</span> <span class="token class-name">str</span> <span class="token operator">=</span> <span class="token string">'hello world'</span><span class="token punctuation">;</span><span class="token keyword">type</span> <span class="token class-name">isNumber<span class="token operator"><</span><span class="token constant">T</span><span class="token operator">></span></span> <span class="token operator">=</span> <span class="token constant">T</span> <span class="token keyword">extends</span> <span class="token class-name"><span class="token builtin">number</span></span> <span class="token operator">?</span> <span class="token string">'yes'</span> <span class="token operator">:</span> <span class="token string">'no'</span><span class="token punctuation">;</span><span class="token keyword">type</span> <span class="token class-name">resultTrue</span> <span class="token operator">=</span> isNumber<span class="token operator"><</span>num<span class="token operator">></span><span class="token punctuation">;</span><span class="token comment">// type resultTrue = "yes"</span><span class="token keyword">type</span> <span class="token class-name">resultFalse</span> <span class="token operator">=</span> isNumber<span class="token operator"><</span>str<span class="token operator">></span><span class="token punctuation">;</span><span class="token comment">// type resultTrue = "yes"</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><p>条件类型类似于 JavaScript 当中的 <code>condition ? trueExpression : falseExpression</code> 三元运算符表达式。</p><p>我们可以通过 <code>extends</code> 关键词判断左侧类型与右侧类型时，是否可以满足分配条件，若满足，得获得 <code>true</code> 分支的类型，否则获得 <code>false</code> 分支上的类型。</p><h4 id="条件类型约束"><a href="#条件类型约束" class="headerlink" title="条件类型约束"></a>条件类型约束</h4><p>同时<strong>条件类型判断可以与泛型</strong>一起使用，功能更加强大。</p><pre class="line-numbers language-typescript" data-language="typescript"><code class="language-typescript"><span class="token keyword">type</span> <span class="token class-name">Message<span class="token operator"><</span><span class="token constant">T</span> <span class="token keyword">extends</span> <span class="token builtin">number</span> <span class="token operator">|</span> <span class="token builtin">string</span><span class="token operator">></span></span> <span class="token operator">=</span> <span class="token constant">T</span> <span class="token keyword">extends</span> <span class="token class-name"><span class="token builtin">number</span></span> <span class="token operator">?</span> <span class="token builtin">number</span> <span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span><span class="token keyword">function</span> <span class="token generic-function"><span class="token function">typeMessage</span><span class="token generic class-name"><span class="token operator"><</span><span class="token constant">T</span> <span class="token keyword">extends</span> <span class="token builtin">number</span> <span class="token operator">|</span> <span class="token builtin">string</span><span class="token operator">></span></span></span><span class="token punctuation">(</span>message<span class="token operator">:</span> <span class="token constant">T</span><span class="token punctuation">)</span><span class="token operator">:</span> Message<span class="token operator"><</span><span class="token constant">T</span><span class="token operator">></span> <span class="token punctuation">{</span> <span class="token keyword">throw</span> <span class="token string">'unimplemented'</span><span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token keyword">const</span> a <span class="token operator">=</span> <span class="token function">typeMessage</span><span class="token punctuation">(</span><span class="token string">'aaaaa'</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">// const a: string</span><span class="token keyword">const</span> b <span class="token operator">=</span> <span class="token function">typeMessage</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">// const b: number</span><span class="token keyword">const</span> c <span class="token operator">=</span> <span class="token function">typeMessage</span><span class="token punctuation">(</span>Math<span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">?</span> <span class="token string">'hello'</span> <span class="token operator">:</span> <span class="token number">42</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">// const c: string | number</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><p>条件类型也可以帮助我们<strong>缩小类型判断</strong>，使得类型判断更加精确可靠。</p><pre class="line-numbers language-typescript" data-language="typescript"><code class="language-typescript"><span class="token keyword">type</span> <span class="token class-name">MessageOf<span class="token operator"><</span><span class="token constant">T</span><span class="token operator">></span></span> <span class="token operator">=</span> <span class="token constant">T</span><span class="token punctuation">[</span><span class="token string">'message'</span><span class="token punctuation">]</span><span class="token punctuation">;</span><span class="token comment">// Type '"message"' cannot be used to index type 'T'.</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre><p>如上述代码的泛型，我们可以通过条件类型进行约束，帮助泛型 <code>T</code> 知道 <code>message</code>。</p><pre class="line-numbers language-typescript" data-language="typescript"><code class="language-typescript"><span class="token keyword">type</span> <span class="token class-name">MessageOf<span class="token operator"><</span><span class="token constant">T</span> <span class="token keyword">extends</span> <span class="token punctuation">{</span> message<span class="token operator">:</span> <span class="token builtin">unknown</span> <span class="token punctuation">}</span><span class="token operator">></span></span> <span class="token operator">=</span> <span class="token constant">T</span><span class="token punctuation">[</span><span class="token string">'message'</span><span class="token punctuation">]</span><span class="token punctuation">;</span><span class="token keyword">interface</span> <span class="token class-name">Email</span> <span class="token punctuation">{</span> message<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token keyword">type</span> <span class="token class-name">EmailMessageContent</span> <span class="token operator">=</span> MessageOf<span class="token operator"><</span>Email<span class="token operator">></span><span class="token punctuation">;</span><span class="token comment">// type EmailMessageContent = string</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><p>我们如果需要对不存在的属性进行判断，可以将 <code>MessageOf</code> 修改为 <code>type MessageOf<T> = T extends { message: unknown } ? T['message'] : never;</code></p><p>针对<code>数组</code>的情况，我们也可以通过条件类型得到数组的元素类型。</p><pre class="line-numbers language-typescript" data-language="typescript"><code class="language-typescript"><span class="token keyword">type</span> <span class="token class-name">Flatten<span class="token operator"><</span><span class="token constant">T</span><span class="token operator">></span></span> <span class="token operator">=</span> <span class="token constant">T</span> <span class="token keyword">extends</span> <span class="token class-name"><span class="token builtin">any</span></span><span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token operator">?</span> <span class="token constant">T</span><span class="token punctuation">[</span><span class="token builtin">number</span><span class="token punctuation">]</span> <span class="token operator">:</span> <span class="token constant">T</span><span class="token punctuation">;</span><span class="token keyword">type</span> <span class="token class-name">FlattenStr</span> <span class="token operator">=</span> Flatten<span class="token operator"><</span><span class="token builtin">string</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token operator">></span><span class="token punctuation">;</span><span class="token comment">// type FlattenStr = string</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre><h4 id="条件类型推断"><a href="#条件类型推断" class="headerlink" title="条件类型推断"></a>条件类型推断</h4><p>我们可以通过条件类型进行类型约束，然后通过 <code>infer</code> 关键词进行类型推断，这是一种非常常见的操作。例如上述代码中我们可以通过条件类型在 <code>true</code> 分支上使用 <code>infer</code> 关键词得到具体类型，而不是通过索引提取相关元素。</p><pre class="line-numbers language-typescript" data-language="typescript"><code class="language-typescript"><span class="token keyword">type</span> <span class="token class-name">FlattenInfer<span class="token operator"><</span><span class="token constant">T</span><span class="token operator">></span></span> <span class="token operator">=</span> <span class="token constant">T</span> <span class="token keyword">extends</span> <span class="token class-name"><span class="token builtin">Array</span><span class="token operator"><</span><span class="token keyword">infer</span> <span class="token constant">P</span><span class="token operator">></span></span> <span class="token operator">?</span> <span class="token constant">P</span> <span class="token operator">:</span> <span class="token constant">T</span><span class="token punctuation">;</span><span class="token keyword">type</span> <span class="token class-name">FlattenInferStr</span> <span class="token operator">=</span> Flatten<span class="token operator"><</span><span class="token builtin">Array</span><span class="token operator"><</span><span class="token builtin">string</span> <span class="token operator">|</span> <span class="token builtin">number</span><span class="token operator">>></span><span class="token punctuation">;</span><span class="token comment">// type FlattenInferStr = string | number</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre><p>不得不感概 <code>infer</code> 关键词的强大，可以类似与一个类型变量参数，不需要关系内部逻辑的实现而可以直接提取类型。我们也可以通过条件类型和 <code>infer</code> 提取一个函数最终的返回结果类型。</p><pre class="line-numbers language-typescript" data-language="typescript"><code class="language-typescript"><span class="token keyword">type</span> <span class="token class-name">GetReturnType<span class="token operator"><</span><span class="token constant">T</span><span class="token operator">></span></span> <span class="token operator">=</span> <span class="token constant">T</span> <span class="token keyword">extends</span> <span class="token punctuation">(</span><span class="token operator">...</span>args<span class="token operator">:</span> <span class="token builtin">unknown</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">infer</span> <span class="token constant">R</span> <span class="token operator">?</span> <span class="token constant">R</span> <span class="token operator">:</span> <span class="token builtin">never</span><span class="token punctuation">;</span><span class="token keyword">type</span> <span class="token class-name">Num</span> <span class="token operator">=</span> GetReturnType<span class="token operator"><</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token builtin">number</span><span class="token operator">></span><span class="token punctuation">;</span><span class="token comment">// type Num = number</span><span class="token keyword">type</span> <span class="token class-name">Str</span> <span class="token operator">=</span> GetReturnType<span class="token operator"><</span><span class="token punctuation">(</span>x<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token builtin">string</span><span class="token operator">></span><span class="token punctuation">;</span><span class="token comment">// type Str = string</span><span class="token keyword">type</span> <span class="token class-name">Bools</span> <span class="token operator">=</span> GetReturnType<span class="token operator"><</span><span class="token punctuation">(</span>a<span class="token operator">:</span> <span class="token builtin">boolean</span><span class="token punctuation">,</span> b<span class="token operator">:</span> <span class="token builtin">boolean</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token builtin">boolean</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token operator">></span><span class="token punctuation">;</span><span class="token comment">// type Bools = boolean[]</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><h4 id="分布式条件类型"><a href="#分布式条件类型" class="headerlink" title="分布式条件类型"></a>分布式条件类型</h4><p>当条件类型作用于一个泛型类型，并且泛型类型是一个联合类型时，会进行分布式判断。</p><pre class="line-numbers language-typescript" data-language="typescript"><code class="language-typescript"><span class="token keyword">type</span> <span class="token class-name">ToArray<span class="token operator"><</span><span class="token constant">T</span><span class="token operator">></span></span> <span class="token operator">=</span> <span class="token constant">T</span> <span class="token keyword">extends</span> <span class="token class-name"><span class="token builtin">any</span></span> <span class="token operator">?</span> <span class="token constant">T</span><span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token operator">:</span> <span class="token builtin">never</span><span class="token punctuation">;</span><span class="token keyword">type</span> <span class="token class-name">StrArrOrNumArr</span> <span class="token operator">=</span> ToArray<span class="token operator"><</span><span class="token builtin">string</span> <span class="token operator">|</span> <span class="token builtin">number</span><span class="token operator">></span><span class="token punctuation">;</span><span class="token comment">// type StrArrOrNumArr = string[] | number[];</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre><p>在执行联合类型的时候，我们会进行分配律进行判断，如果想要阻止这种行为，我们可以通过 <code>[]</code> 把 <code>extend</code> 一侧的所有关键词括起来。</p><pre class="line-numbers language-typescript" data-language="typescript"><code class="language-typescript"><span class="token keyword">type</span> <span class="token class-name">ToArrayNonDist<span class="token operator"><</span><span class="token constant">T</span><span class="token operator">></span></span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token constant">T</span><span class="token punctuation">]</span> <span class="token keyword">extends</span> <span class="token punctuation">[</span><span class="token builtin">any</span><span class="token punctuation">]</span> <span class="token operator">?</span> <span class="token constant">T</span><span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token operator">:</span> <span class="token builtin">never</span><span class="token punctuation">;</span><span class="token keyword">type</span> <span class="token class-name">StrArrOrNumArrNonDis</span> <span class="token operator">=</span> ToArrayNonDist<span class="token operator"><</span><span class="token builtin">string</span> <span class="token operator">|</span> <span class="token builtin">number</span><span class="token operator">></span><span class="token punctuation">;</span><span class="token comment">// type StrArrOrNumArrNonDis = (string | number)[]</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre><h3 id="映射类型"><a href="#映射类型" class="headerlink" title="映射类型"></a>映射类型</h3><p>映射类型是基于索引类型的语法基础上的类型，用于声明没有提前声明的属性类型。</p><pre class="line-numbers language-typescript" data-language="typescript"><code class="language-typescript"><span class="token keyword">type</span> <span class="token class-name">OnlyBoolsAndHorses</span> <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token punctuation">[</span>key<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">]</span><span class="token operator">:</span> <span class="token builtin">boolean</span><span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token punctuation">;</span><span class="token keyword">const</span> conforms<span class="token operator">:</span> OnlyBoolsAndHorses <span class="token operator">=</span> <span class="token punctuation">{</span> del<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> rondeny<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span><span class="token punctuation">}</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><p>映射类型是一种通用类型，使用 <code>PropertyKey</code> (通常使用 <code>keyof</code> 创建) 的联合来遍历键以创建类型。<br>如下面的代码示例， <code>OptionsFlags</code> 将 <code>Features</code> 类型的所有属性都变成 <code>boolean</code> 类型</p><pre class="line-numbers language-typescript" data-language="typescript"><code class="language-typescript"><span class="token keyword">type</span> <span class="token class-name">OptionsFlags<span class="token operator"><</span>Type<span class="token operator">></span></span> <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token punctuation">[</span>Property <span class="token keyword">in</span> <span class="token keyword">keyof</span> Type<span class="token punctuation">]</span><span class="token operator">:</span> <span class="token builtin">boolean</span><span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token punctuation">;</span><span class="token keyword">type</span> <span class="token class-name">Features</span> <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token function-variable function">darkMode</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">void</span><span class="token punctuation">;</span> <span class="token function-variable function">newUserProfile</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">void</span><span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token punctuation">;</span><span class="token keyword">type</span> <span class="token class-name">FeaturesOptions</span> <span class="token operator">=</span> OptionsFlags<span class="token operator"><</span>Features<span class="token operator">></span><span class="token punctuation">;</span><span class="token comment">// type FeaturesOptions = {</span><span class="token comment">// darkMode: boolean;</span><span class="token comment">// newUserProfile: boolean;</span><span class="token comment">// }</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><h4 id="映射修饰符"><a href="#映射修饰符" class="headerlink" title="映射修饰符"></a>映射修饰符</h4><p>映射期间可以通过应用<strong>两个额外的修饰符：<code>readonly</code> 和 <code>?</code> 来分别影响可变性和可读性</strong>。<br>同时也可以<strong>添加 <code>-</code> 和 <code>+</code> 来删除和添加这些修饰符</strong>，默认为添加。</p><pre class="line-numbers language-typescript" data-language="typescript"><code class="language-typescript"><span class="token keyword">type</span> <span class="token class-name">CreateMutable<span class="token operator"><</span>Type<span class="token operator">></span></span> <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token operator">-</span><span class="token keyword">readonly</span> <span class="token punctuation">[</span>Property <span class="token keyword">in</span> <span class="token keyword">keyof</span> Type<span class="token punctuation">]</span><span class="token operator">:</span> <span class="token builtin">boolean</span><span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token punctuation">;</span><span class="token keyword">type</span> <span class="token class-name">LockedAccount</span> <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token keyword">readonly</span> id<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span> <span class="token keyword">readonly</span> name<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token punctuation">;</span><span class="token keyword">type</span> <span class="token class-name">UnlockedAccount</span> <span class="token operator">=</span> CreateMutable<span class="token operator"><</span>LockedAccount<span class="token operator">></span><span class="token punctuation">;</span><span class="token comment">// type UnlockedAccount = {</span><span class="token comment">// id: boolean;</span><span class="token comment">// name: boolean;</span><span class="token comment">// }</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><pre class="line-numbers language-typescript" data-language="typescript"><code class="language-typescript"><span class="token keyword">type</span> <span class="token class-name">Concrete<span class="token operator"><</span>Type<span class="token operator">></span></span> <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token punctuation">[</span>Property <span class="token keyword">in</span> <span class="token keyword">keyof</span> Type<span class="token punctuation">]</span><span class="token operator">-</span><span class="token operator">?</span><span class="token operator">:</span> Type<span class="token punctuation">[</span>Property<span class="token punctuation">]</span><span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token punctuation">;</span><span class="token keyword">type</span> <span class="token class-name">MaybeUser</span> <span class="token operator">=</span> <span class="token punctuation">{</span> id<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span> name<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span> age<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token punctuation">;</span><span class="token keyword">type</span> <span class="token class-name">User</span> <span class="token operator">=</span> Concrete<span class="token operator"><</span>MaybeUser<span class="token operator">></span><span class="token punctuation">;</span><span class="token comment">// type User = {</span><span class="token comment">// id: string;</span><span class="token comment">// name: string;</span><span class="token comment">// age: number;</span><span class="token comment">// }</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><h4 id="键重映射"><a href="#键重映射" class="headerlink" title="键重映射"></a>键重映射</h4><p>键重映射可以通过 <code>as</code> 关键词取别名，同时也可以利用模板自变量的方式从先前的属性名称中创建新的属性名称。</p><pre class="line-numbers language-typescript" data-language="typescript"><code class="language-typescript"><span class="token keyword">type</span> <span class="token class-name">Getters<span class="token operator"><</span>Type<span class="token operator">></span></span> <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token punctuation">[</span>Property <span class="token keyword">in</span> <span class="token keyword">keyof</span> Type <span class="token keyword">as</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">get</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>Capitalize<span class="token operator"><</span><span class="token builtin">string</span> <span class="token operator">&</span> Property<span class="token operator">></span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">]</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> Type<span class="token punctuation">[</span>Property<span class="token punctuation">]</span><span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token punctuation">;</span><span class="token keyword">interface</span> <span class="token class-name">PersonMap</span> <span class="token punctuation">{</span> name<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span> age<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token keyword">type</span> <span class="token class-name">GettersPersonMap</span> <span class="token operator">=</span> Getters<span class="token operator"><</span>PersonMap<span class="token operator">></span><span class="token punctuation">;</span><span class="token comment">// type GettersPersonMap = {</span><span class="token comment">// getName: () => string;</span><span class="token comment">// getAge: () => number;</span><span class="token comment">// }</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><p>也可以通过条件类型来生成 <code>never</code> 来过滤掉键。</p><pre class="line-numbers language-typescript" data-language="typescript"><code class="language-typescript"><span class="token keyword">type</span> <span class="token class-name">RemoveKindFiled<span class="token operator"><</span>Type<span class="token operator">></span></span> <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token punctuation">[</span>Property <span class="token keyword">in</span> <span class="token keyword">keyof</span> Type <span class="token keyword">as</span> Exclude<span class="token operator"><</span>Property<span class="token punctuation">,</span> <span class="token string">'kind'</span><span class="token operator">></span><span class="token punctuation">]</span><span class="token operator">:</span> Type<span class="token punctuation">[</span>Property<span class="token punctuation">]</span><span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token punctuation">;</span><span class="token keyword">interface</span> <span class="token class-name">Circle</span> <span class="token punctuation">{</span> kind<span class="token operator">:</span> <span class="token string">'circle'</span><span class="token punctuation">;</span> radius<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token keyword">type</span> <span class="token class-name">KindlessCircle</span> <span class="token operator">=</span> RemoveKindFiled<span class="token operator"><</span>Circle<span class="token operator">></span><span class="token punctuation">;</span><span class="token comment">// type KindlessCircle = {</span><span class="token comment">// radius: number;</span><span class="token comment">// }</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><p>映射类型可以联合任意类型，而不单单只是 <code>string | number | symbol</code>。</p><pre class="line-numbers language-typescript" data-language="typescript"><code class="language-typescript"><span class="token keyword">type</span> <span class="token class-name">EventConfig<span class="token operator"><</span>Event <span class="token keyword">extends</span> <span class="token punctuation">{</span> kind<span class="token operator">:</span> <span class="token builtin">string</span> <span class="token punctuation">}</span><span class="token operator">></span></span> <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token punctuation">[</span><span class="token constant">E</span> <span class="token keyword">in</span> Event <span class="token keyword">as</span> <span class="token constant">E</span><span class="token punctuation">[</span><span class="token string">'kind'</span><span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token operator">:</span> <span class="token punctuation">(</span>event<span class="token operator">:</span> <span class="token constant">E</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">void</span><span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token punctuation">;</span><span class="token keyword">type</span> <span class="token class-name">SquareEvent</span> <span class="token operator">=</span> <span class="token punctuation">{</span> kind<span class="token operator">:</span> <span class="token string">'square'</span><span class="token punctuation">;</span> x<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span> y<span class="token operator">:</span> <span class="token builtin">number</span> <span class="token punctuation">}</span><span class="token punctuation">;</span><span class="token keyword">type</span> <span class="token class-name">CircleEvent</span> <span class="token operator">=</span> <span class="token punctuation">{</span> kind<span class="token operator">:</span> <span class="token string">'circle'</span><span class="token punctuation">;</span> radius<span class="token operator">:</span> <span class="token builtin">number</span> <span class="token punctuation">}</span><span class="token punctuation">;</span><span class="token keyword">type</span> <span class="token class-name">Config</span> <span class="token operator">=</span> EventConfig<span class="token operator"><</span>SquareEvent <span class="token operator">|</span> CircleEvent<span class="token operator">></span><span class="token punctuation">;</span><span class="token comment">// type Config = {</span><span class="token comment">// square: (event: SquareEvent) => void;</span><span class="token comment">// circle: (event: CircleEvent) => void;</span><span class="token comment">// }</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><h3 id="模板字面量类型"><a href="#模板字面量类型" class="headerlink" title="模板字面量类型"></a>模板字面量类型</h3><p>模板字面量类型建立在字符串字面量类型之上，并且可以通过联合类型进行扩展。<br>通过类似于 JavaScript 当中的模板字符串语法格式，将类型进行拼接生成新的模板字面量类型。</p><pre class="line-numbers language-typescript" data-language="typescript"><code class="language-typescript"><span class="token keyword">type</span> <span class="token class-name">World</span> <span class="token operator">=</span> <span class="token string">'world'</span><span class="token punctuation">;</span><span class="token keyword">type</span> <span class="token class-name">Greeting</span> <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">hello </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>World<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span><span class="token comment">// type Greeting = "hello world"</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span></span></code></pre><p>如果是联合类型，新生成的类型是每个字符串可能联合的成员，类似于交叉相乘。</p><pre class="line-numbers language-typescript" data-language="typescript"><code class="language-typescript"><span class="token keyword">type</span> <span class="token class-name">EmailLocaleIDs</span> <span class="token operator">=</span> <span class="token string">'welcome_email'</span> <span class="token operator">|</span> <span class="token string">'email_heading'</span><span class="token punctuation">;</span><span class="token keyword">type</span> <span class="token class-name">FooterLocaleIDs</span> <span class="token operator">=</span> <span class="token string">'footer_title'</span> <span class="token operator">|</span> <span class="token string">'footer_sendoff'</span><span class="token punctuation">;</span><span class="token keyword">type</span> <span class="token class-name">AllLocaleIDs</span> <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>EmailLocaleIDs <span class="token operator">|</span> FooterLocaleIDs<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> _id</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span><span class="token comment">// type AllLocaleIDs = "welcome_email _id" | "email_heading _id" | "footer_title _id" | "footer_sendoff _id"</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span></span></code></pre><h4 id="内部字符串操作类型"><a href="#内部字符串操作类型" class="headerlink" title="内部字符串操作类型"></a>内部字符串操作类型</h4><h5 id="Uppercase-lt-StringType-gt"><a href="#Uppercase-lt-StringType-gt" class="headerlink" title="Uppercase<StringType>"></a><code>Uppercase<StringType></code></h5><p>将字符串的每个字符转换为大写版本。</p><pre class="line-numbers language-typescript" data-language="typescript"><code class="language-typescript"><span class="token keyword">type</span> <span class="token class-name">ShoutyGreeting</span> <span class="token operator">=</span> Uppercase<span class="token operator"><</span><span class="token string">'hello world'</span><span class="token operator">></span><span class="token punctuation">;</span><span class="token comment">// type ShoutyGreeting = "HELLO WORLD"</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre><h5 id="Lowercase-lt-StringType-gt"><a href="#Lowercase-lt-StringType-gt" class="headerlink" title="Lowercase<StringType>"></a><code>Lowercase<StringType></code></h5><p>将字符串的每个字符转换为小写版本。</p><pre class="line-numbers language-typescript" data-language="typescript"><code class="language-typescript"><span class="token keyword">type</span> <span class="token class-name">QuietGreeting</span> <span class="token operator">=</span> Lowercase<span class="token operator"><</span><span class="token string">'HELLO WORLD'</span><span class="token operator">></span><span class="token punctuation">;</span><span class="token comment">// type QuietGreeting = "hello world"</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre><h5 id="Capitalize-lt-StringType-gt"><a href="#Capitalize-lt-StringType-gt" class="headerlink" title="Capitalize<StringType>"></a><code>Capitalize<StringType></code></h5><p>将字符串的开头字符转换为大写版本。</p><pre class="line-numbers language-typescript" data-language="typescript"><code class="language-typescript"><span class="token keyword">type</span> <span class="token class-name">CapitalizeLowercaseGreeting</span> <span class="token operator">=</span> Capitalize<span class="token operator"><</span><span class="token string">'hello world'</span><span class="token operator">></span><span class="token punctuation">;</span><span class="token comment">// type CapitalizeLowercaseGreeting = "Hello, world"</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre><h5 id="Uncapitalize-lt-StringType-gt"><a href="#Uncapitalize-lt-StringType-gt" class="headerlink" title="Uncapitalize<StringType>"></a><code>Uncapitalize<StringType></code></h5><p>将字符串的开头字符转换为小写版本。</p><pre class="line-numbers language-typescript" data-language="typescript"><code class="language-typescript"><span class="token keyword">type</span> <span class="token class-name">UncomfortableGreeting</span> <span class="token operator">=</span> Uncapitalize<span class="token operator"><</span><span class="token string">'HELLO WORLD'</span><span class="token operator">></span><span class="token punctuation">;</span><span class="token comment">// type UncomfortableGreeting = "hELLO WORLD"</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre><h3 id="推荐阅读"><a href="#推荐阅读" class="headerlink" title="推荐阅读"></a>推荐阅读</h3><ul><li><a href="https://www.typescriptlang.org/docs/handbook/2/types-from-types.html">TypeScript 内置类型</a></li></ul>]]></content>
<categories>
<category> TypeScript </category>
</categories>
<tags>
<tag> TypeScript </tag>
<tag> 类型操作 </tag>
</tags>
</entry>
</search>