https://fe-interview.pangcy.cn/tags/%E6%8E%A5%E5%8F%A3%E6%89%A9%E5%B1%95/Recent content in 接口扩展 on ZiYang FrontEnd InterviewHugoen-usThu, 06 Mar 2025 13:07:39 +0800https://fe-interview.pangcy.cn/docs/typescript/typescript-07/Tue, 04 Mar 2025 08:37:03 +0000https://fe-interview.pangcy.cn/docs/typescript/typescript-07/<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>：在不同场景下正确选择接口继承或交叉类型的工程化思维</li> </ol> <p>具体评估点：</p> <ul> <li>接口多重继承的语法实现</li> <li>同名属性类型冲突时的TS编译规则</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><p>接口继承 &gt; 交叉类型 &gt; 类型兼容性</p> <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><ol> <li><strong>接口继承</strong>：</li> </ol> <ul> <li>使用<code>extends</code>实现多重继承时，多个父接口的成员会被合并</li> <li>同名属性类型必须兼容（子类型或相同类型），否则触发编译错误</li> <li>支持声明合并，可通过后续接口声明扩展已有接口</li> </ul> <ol start="2"> <li><strong>交叉类型</strong>：</li> </ol> <ul> <li>使用<code>&amp;</code>进行类型运算，合并所有类型的成员</li> <li>同名属性会进行类型取交（<code>T &amp; U</code>），若类型不兼容则推导为<code>never</code></li> <li>属于类型运算，不会产生声明合并</li> </ul> <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><ul> <li>误认为接口继承可以覆盖父接口属性类型</li> <li>混淆交叉类型与联合类型（<code>|</code>）的合并逻辑</li> <li>忽视类型层级关系导致的类型推导错误</li> </ul> <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>在TypeScript中，接口多重继承通过逗号分隔多个父接口实现：</p> <div class="prism-codeblock "> <pre id="b29d0a8" class="language-typescript "> <code>interface A { name: string } interface B { age: number } interface C extends A, B { /* 正确继承A和B的成员 */ }</code> </pre> </div> <p><strong>同名属性处理</strong>：</p> <ul> <li>当继承的多个父接口存在同名属性时，若类型相同则正常继承</li> <li>若类型不同，子接口必须重新声明该属性，且类型要是所有父接口类型的子类型</li> </ul> <p><strong>与交叉类型的区别</strong>：</p>