https://fe-interview.pangcy.cn/tags/%E5%88%9D%E5%A7%8B%E5%8C%96%E8%A7%84%E5%88%99/Recent content in 初始化规则 on ZiYang FrontEnd InterviewHugoen-usThu, 06 Mar 2025 13:07:39 +0800https://fe-interview.pangcy.cn/docs/typescript/typescript-13/Tue, 04 Mar 2025 08:37:03 +0000https://fe-interview.pangcy.cn/docs/typescript/typescript-13/<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>：准确区分<code>readonly</code>修饰符与<code>const</code>声明的适用场景及设计意图</li> <li><strong>语言特性对比能力</strong>：辨析编译时类型检查与运行时行为差异</li> <li><strong>类与接口机制</strong>：掌握类属性初始化规则及类型修饰符在接口/类型别名中的表现</li> </ol> <p>具体技术评估点：</p> <ul> <li><code>readonly</code>与<code>const</code>的作用域及可变性差异</li> <li>类属性初始化阶段限制的底层逻辑</li> <li>类型擦除对运行时类型约束的影响</li> <li>接口/类型别名中<code>readonly</code>的编译时检查特性</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> <p><strong>初始化限制</strong><br> <code>readonly</code>属性强制在声明时或构造函数中初始化，这是为确保类实例的<strong>不变性契约</strong>。类实例化时需完成所有状态初始化，若允许在其他方法修改<code>readonly</code>属性，会破坏编译器的控制流分析。</p> </li> <li> <p><strong>const与readonly差异</strong></p> </li> </ol> <ul> <li><code>const</code>：变量级不可变，块级作用域，声明时必须初始化（<code>const a=1</code>）</li> <li><code>readonly</code>：属性级不可变，可在构造函数赋值（<code>class A { readonly a=1 }</code>）</li> </ul> <ol start="3"> <li><strong>运行时不可变性</strong><br> TypeScript执行<strong>类型擦除</strong>，接口/类型中的<code>readonly</code>仅在编译时检查。运行时仍可通过类型断言或JS原生方法修改值：</li> </ol> <div class="prism-codeblock "> <pre id="b4abc61" class="language-typescript "> <code>interface Person { readonly name: string } const p = { name: &#39;Alice&#39; } as Person; (p as any).name = &#39;Bob&#39;; // 运行时实际可修改</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><ul> <li>误认为<code>readonly</code>可替代深不可变数据结构</li> <li>混淆<code>readonly</code>与<code>const</code>的作用对象（属性 vs 变量）</li> <li>错误假设接口<code>readonly</code>在运行时具有保护能力</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><code>readonly</code>属性强制在声明或构造函数初始化，是因类实例状态需在构造阶段完全确定。<code>const</code>用于变量绑定，而<code>readonly</code>修饰属性，二者作用维度不同。接口/类型别名中的<code>readonly</code>仅触发编译时检查，TypeScript通过类型擦除机制，不会在运行时添加保护层，实际值仍可能被修改。</p>