<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>类型擦除 on ZiYang FrontEnd Interview</title><link>https://fe-interview.pangcy.cn/tags/%E7%B1%BB%E5%9E%8B%E6%93%A6%E9%99%A4/</link><description>Recent content in 类型擦除 on ZiYang FrontEnd Interview</description><generator>Hugo</generator><language>en-us</language><lastBuildDate>Thu, 06 Mar 2025 13:07:39 +0800</lastBuildDate><atom:link href="https://fe-interview.pangcy.cn/tags/%E7%B1%BB%E5%9E%8B%E6%93%A6%E9%99%A4/index.xml" rel="self" type="application/rss+xml"/><item><title>泛型基础与类型约束</title><link>https://fe-interview.pangcy.cn/docs/typescript/typescript-15/</link><pubDate>Tue, 04 Mar 2025 08:37:03 +0000</pubDate><guid>https://fe-interview.pangcy.cn/docs/typescript/typescript-15/</guid><description>&lt;h2 id="考察点分析">考察点分析 &lt;a href="#%e8%80%83%e5%af%9f%e7%82%b9%e5%88%86%e6%9e%90" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h2>&lt;p>该题目主要考察以下核心能力维度：&lt;/p>
&lt;ol>
&lt;li>&lt;strong>泛型类型约束&lt;/strong>：理解&lt;code>&amp;lt;T extends Constraint&amp;gt;&lt;/code>语法对泛型参数进行类型限制的能力&lt;/li>
&lt;li>&lt;strong>类型系统原理&lt;/strong>：掌握TypeScript类型擦除特性及其对运行时的影响&lt;/li>
&lt;li>&lt;strong>类型安全实践&lt;/strong>：实现基础泛型函数时保证类型完整性的能力&lt;/li>
&lt;li>&lt;strong>编译与运行时差异&lt;/strong>：辨析类型系统在编译时校验与运行时行为的关键差异&lt;/li>
&lt;/ol>
&lt;p>具体技术评估点：&lt;/p>
&lt;ul>
&lt;li>泛型约束语法规范&lt;/li>
&lt;li>对象类型边界定义&lt;/li>
&lt;li>类型擦除的表现形式&lt;/li>
&lt;li>运行时类型信息保留程度&lt;/li>
&lt;/ul>
&lt;hr>
&lt;h2 id="技术解析">技术解析 &lt;a href="#%e6%8a%80%e6%9c%af%e8%a7%a3%e6%9e%90" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h2>&lt;h3 id="关键知识点">关键知识点 &lt;a href="#%e5%85%b3%e9%94%ae%e7%9f%a5%e8%af%86%e7%82%b9" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>&lt;ol>
&lt;li>泛型约束 &amp;gt; 类型擦除 &amp;gt; 类型兼容性&lt;/li>
&lt;li>类型擦除机制：TypeScript编译器移除所有类型注解，保留纯JavaScript代码&lt;/li>
&lt;li>运行时类型系统缺失：编译后代码无法获取泛型参数具体类型&lt;/li>
&lt;/ol>
&lt;h3 id="原理剖析">原理剖析 &lt;a href="#%e5%8e%9f%e7%90%86%e5%89%96%e6%9e%90" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>&lt;p>使用&lt;code>&amp;lt;T extends object&amp;gt;&lt;/code>时，TypeScript会强制泛型参数必须是对象类型。编译时进行类型检查，但通过类型擦除生成的JavaScript代码会移除类型参数，导致运行时无法判断具体类型。&lt;/p>



 
 
 

 
 
 
 

 

 &lt;div class="prism-codeblock ">
 &lt;pre id="7e0777a" class="language-typescript ">
 &lt;code>// 编译前
function identity&amp;lt;T extends object&amp;gt;(arg: T): T {
 return arg;
}

// 编译后
function identity(arg) {
 return arg;
}&lt;/code>
 &lt;/pre>
 &lt;/div>
&lt;h3 id="常见误区">常见误区 &lt;a href="#%e5%b8%b8%e8%a7%81%e8%af%af%e5%8c%ba" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h3>&lt;ol>
&lt;li>认为&lt;code>extends object&lt;/code>包含原始类型（实际需使用&lt;code>extends {}&lt;/code>）&lt;/li>
&lt;li>误判类型擦除后的运行时类型可用性&lt;/li>
&lt;li>混淆接口类型与类类型在运行时的表现差异&lt;/li>
&lt;/ol>
&lt;hr>
&lt;h2 id="问题解答">问题解答 &lt;a href="#%e9%97%ae%e9%a2%98%e8%a7%a3%e7%ad%94" class="anchor" aria-hidden="true">&lt;i class="material-icons align-middle">link&lt;/i>&lt;/a>&lt;/h2>&lt;p>通过&lt;code>&amp;lt;T extends object&amp;gt;&lt;/code>约束泛型参数必须为对象类型，实现如下：&lt;/p>



 
 
 

 
 
 
 

 

 &lt;div class="prism-codeblock ">
 &lt;pre id="d959f50" class="language-typescript ">
 &lt;code>function identity&amp;lt;T extends object&amp;gt;(arg: T): T {
 return arg;
}&lt;/code>
 &lt;/pre>
 &lt;/div>
&lt;p>&lt;strong>类型擦除影响&lt;/strong>：编译后类型参数&lt;code>T&lt;/code>被移除，运行时无法进行类型校验。例如&lt;code>identity(42)&lt;/code>编译报错（数字不满足object约束），但编译后的代码若通过类型断言强制传递数字，运行时将无法检测类型错误。&lt;/p></description></item></channel></rss>