https://fe-interview.pangcy.cn/tags/%E9%80%92%E5%BD%92%E8%A7%A3%E5%8C%85/Recent content in 递归解包 on ZiYang FrontEnd InterviewHugoen-usThu, 06 Mar 2025 13:07:39 +0800https://fe-interview.pangcy.cn/docs/typescript/typescript-22/Tue, 04 Mar 2025 08:37:03 +0000https://fe-interview.pangcy.cn/docs/typescript/typescript-22/<h2 id="考察点分析">考察点分析 <a href="#%e8%80%83%e5%af%9f%e7%82%b9%e5%88%86%e6%9e%90" class="anchor" aria-hidden="true"><i class="material-icons align-middle">link</i></a></h2><p>该题主要考核以下核心能力维度：</p> <ol> <li><strong>TypeScript高级类型系统理解</strong>：对工具类型、条件类型、类型推断等特性的掌握程度</li> <li><strong>递归类型解析机制</strong>：理解类型系统如何处理递归类型定义及类型展开过程</li> <li><strong>异步编程类型支持</strong>：掌握Promise类型在类型系统中的表现及链式调用的类型传递机制</li> </ol> <p>具体技术评估点：</p> <ul> <li>条件类型（Conditional Types）的灵活运用</li> <li>infer关键字在类型解构中的应用</li> <li>递归类型终止条件处理</li> <li>Promise链式调用时的类型传递规则</li> <li>TypeScript 4.1+ 的递归类型优化</li> </ul> <h2 id="技术解析">技术解析 <a href="#%e6%8a%80%e6%9c%af%e8%a7%a3%e6%9e%90" class="anchor" aria-hidden="true"><i class="material-icons align-middle">link</i></a></h2><h3 id="关键知识点">关键知识点 <a href="#%e5%85%b3%e9%94%ae%e7%9f%a5%e8%af%86%e7%82%b9" class="anchor" aria-hidden="true"><i class="material-icons align-middle">link</i></a></h3><ol> <li>条件类型（<code>T extends U ? X : Y</code>）</li> <li>类型推断（<code>infer</code>关键字）</li> <li>递归类型定义</li> <li>Promise类型结构（<code>Promise&lt;T&gt;</code>）</li> </ol> <h3 id="原理剖析">原理剖析 <a href="#%e5%8e%9f%e7%90%86%e5%89%96%e6%9e%90" class="anchor" aria-hidden="true"><i class="material-icons align-middle">link</i></a></h3><p>Awaited工具类型的核心机制是通过条件类型逐层解包Promise：</p> <ol> <li>检查输入类型T是否是Promise的实例</li> <li>通过<code>infer U</code>提取Promise的泛型参数类型</li> <li>对提取出的U类型进行递归解析</li> <li>终止条件：当类型不再是Promise时返回最终类型</li> </ol> <p>官方实现（TypeScript 4.5+）：</p> <div class="prism-codeblock "> <pre id="6dcec56" class="language-typescript "> <code>type Awaited&lt;T&gt; = T extends null | undefined ? T : // 处理null/undefined情况 T extends object &amp; { then(onfulfilled: infer F): any } ? // 处理thenable对象 F extends ((value: infer V) =&gt; any) ? Awaited&lt;V&gt; : never : T; // 终止条件</code> </pre> </div> <h3 id="常见误区">常见误区 <a href="#%e5%b8%b8%e8%a7%81%e8%af%af%e5%8c%ba" class="anchor" aria-hidden="true"><i class="material-icons align-middle">link</i></a></h3><ol> <li>认为只能解析单层Promise（如<code>Promise&lt;Promise&lt;string&gt;&gt;</code>错误推断为<code>Promise&lt;string&gt;</code>）</li> <li>混淆thenable对象与原生的Promise处理逻辑</li> <li>忽略null/undefined的边界情况处理</li> <li>认为需要手动声明递归终止条件</li> </ol> <h2 id="问题解答">问题解答 <a href="#%e9%97%ae%e9%a2%98%e8%a7%a3%e7%ad%94" class="anchor" aria-hidden="true"><i class="material-icons align-middle">link</i></a></h2><p>Awaited<T>通过递归条件类型解析Promise的嵌套结构：</p>