https://fe-interview.pangcy.cn/tags/%E7%A9%BA%E5%80%BC%E8%BF%87%E6%BB%A4/Recent content in 空值过滤 on ZiYang FrontEnd InterviewHugoen-usThu, 06 Mar 2025 13:07:39 +0800https://fe-interview.pangcy.cn/docs/typescript/typescript-30/Tue, 04 Mar 2025 08:37:03 +0000https://fe-interview.pangcy.cn/docs/typescript/typescript-30/<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>：结合具体应用场景（GraphQL）处理数据边界问题</li> <li><strong>类型系统与运行时关联</strong>：理解类型擦除特性及如何保证类型安全</li> </ol> <p>具体技术评估点：</p> <ul> <li>NonNullable 工具类型实现原理</li> <li>联合类型(Union Types)的分布条件类型处理</li> <li>GraphQL 非空校验与类型系统的协同机制</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>条件类型(Conditional Types)</strong>：<code>T extends U ? X : Y</code></li> <li><strong>分布式条件类型</strong>：对联合类型的自动展开特性</li> <li><strong>类型净化(Type Sanitization)</strong>：通过类型操作保证数据契约</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>TypeScript 内置的 <code>NonNullable&lt;T&gt;</code> 通过条件类型排除空值：</p> <div class="prism-codeblock "> <pre id="4577924" class="language-typescript "> <code>type NonNullable&lt;T&gt; = T extends null | undefined ? never : T</code> </pre> </div> <p>当 <code>T</code> 为联合类型时，条件类型会触发<strong>分布式特性</strong>，分别对每个成员进行判断。例如：</p> <div class="prism-codeblock "> <pre id="aba4ea5" class="language-typescript "> <code>type T1 = string | null | undefined type T2 = NonNullable&lt;T1&gt; // string</code> </pre> </div> <p>执行过程相当于：</p>