https://fe-interview.pangcy.cn/tags/%E7%B1%BB%E5%9E%8B%E6%8F%90%E5%8F%96/Recent content in 类型提取 on ZiYang FrontEnd InterviewHugoen-usThu, 06 Mar 2025 13:07:39 +0800https://fe-interview.pangcy.cn/docs/typescript/typescript-28/Tue, 04 Mar 2025 08:37:03 +0000https://fe-interview.pangcy.cn/docs/typescript/typescript-28/<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><strong>核心能力维度</strong>：<br> 本题考察对TypeScript类型系统高级特性的掌握程度，重点检验以下维度：</p> <ol> <li><strong>工具类型原理理解</strong>：能否准确解释Extract工具类型的工作机制</li> <li><strong>类型兼容性判断</strong>：对类型系统赋值兼容规则的掌握程度</li> <li><strong>联合类型操作</strong>：处理联合类型时的分布式条件类型特性</li> <li><strong>实际场景应用</strong>：将类型工具应用于具体业务场景的能力</li> </ol> <p><strong>技术评估点</strong>：</p> <ul> <li>条件类型（Conditional Types）的分布式特性</li> <li>类型兼容性（Type Compatibility）规则</li> <li>工具类型的实现原理</li> <li>浏览器事件类型的类型体系认知</li> </ul> <hr> <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><strong>条件类型分布式特性</strong>：<code>T extends U ? T : never</code></li> <li><strong>类型兼容性</strong>：结构化类型系统（Duck Typing）的赋值规则</li> <li><strong>工具类型实现</strong>：<code>Extract&lt;T, U&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>当使用<code>Extract&lt;T, U&gt;</code>时：</p> <ol> <li>TypeScript会将联合类型<code>T</code>拆分为多个独立类型（分布式条件类型）</li> <li>对每个子类型<code>K</code>进行判断：<code>K</code>是否可赋值给<code>U</code></li> <li>通过条件类型保留满足<code>K extends U</code>的子类型</li> <li>最终合并所有满足条件的类型形成新联合类型</li> </ol> <div class="prism-codeblock "> <pre id="549afac" class="language-typescript "> <code>// 伪代码实现 type Extract&lt;T, U&gt; = T extends U ? T : never</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>误认为<code>Extract&lt;1|'a', number&gt;</code>结果为<code>number</code>类型（实际为<code>1</code>字面量类型）</li> <li>混淆<code>T extends U</code>与<code>U extends T</code>的方向判断</li> <li>忽略<code>never</code>类型在联合类型中的自动过滤特性</li> </ol> <hr> <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><strong>Extract工具类型</strong>通过条件类型的分布式特性，筛选出联合类型<code>T</code>中所有能赋值给类型<code>U</code>的成员。其本质是通过<code>T extends U ? T : never</code>类型运算，将联合类型拆分为独立类型进行兼容性判断，保留符合要求的类型。</p>