<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Frontend on elonnzhang</title><link>https://jiabin.dev/categories/frontend/</link><description>Recent content in Frontend on elonnzhang</description><generator>Hugo</generator><language>zh-CN</language><lastBuildDate>Wed, 31 Dec 2025 00:00:00 +0800</lastBuildDate><atom:link href="https://jiabin.dev/categories/frontend/index.xml" rel="self" type="application/rss+xml"/><item><title>TypeScript 入门</title><link>https://jiabin.dev/blog/typescript-introduce/</link><pubDate>Wed, 31 Dec 2025 00:00:00 +0800</pubDate><guid>https://jiabin.dev/blog/typescript-introduce/</guid><description>&lt;p&gt;&lt;a href="https://www.typescriptlang.org/docs/handbook/intro.html"&gt;typescript org&lt;/a&gt;&lt;/p&gt;&#10;&lt;p&gt;TypeScript 是 JavaScript 的一种“风格”或“变体”。&lt;/p&gt;&#10;&lt;h2 id="一背景javascript-的问题从何而来"&gt;一、背景：JavaScript 的问题从何而来&lt;/h2&gt;&#10;&lt;p&gt;JavaScript 最初是为&lt;strong&gt;浏览器中的短脚本&lt;/strong&gt;设计的语言，而非大型工程：&lt;/p&gt;&#10;&lt;ul&gt;&#10;&lt;li&gt;早期代码规模小、容错要求低&lt;/li&gt;&#10;&lt;li&gt;语言设计偏灵活，隐式类型转换多&lt;/li&gt;&#10;&lt;li&gt;运行时错误多，且往往&lt;strong&gt;无法提前发现&lt;/strong&gt;&lt;/li&gt;&#10;&lt;/ul&gt;&#10;&lt;p&gt;随着 Web 和 Node.js 的发展，JS 被用于：&lt;/p&gt;&#10;&lt;ul&gt;&#10;&lt;li&gt;前端大型应用&lt;/li&gt;&#10;&lt;li&gt;后端服务&lt;/li&gt;&#10;&lt;li&gt;全栈开发&lt;/li&gt;&#10;&lt;/ul&gt;&#10;&lt;p&gt;结果是：&lt;br&gt;&#10;&lt;strong&gt;“一门为小脚本设计的语言，被用于百万行级别的工程”&lt;/strong&gt;，问题被系统性放大。&lt;/p&gt;&#10;&lt;p&gt;典型问题包括：&lt;/p&gt;&#10;&lt;ul&gt;&#10;&lt;li&gt;&lt;code&gt;==&lt;/code&gt; 导致的隐式类型转换陷阱&lt;/li&gt;&#10;&lt;li&gt;表达式语义反直觉（如 &lt;code&gt;1 &amp;lt; x &amp;lt; 3&lt;/code&gt;）&lt;/li&gt;&#10;&lt;li&gt;访问不存在的属性却不报错，直到运行时才暴雷&lt;/li&gt;&#10;&lt;/ul&gt;&#10;&lt;hr&gt;&#10;&lt;ul&gt;&#10;&lt;li&gt;JavaScript’s equality operator (&lt;code&gt;==&lt;/code&gt;) &lt;em&gt;coerces&lt;/em&gt; its operands, leading to unexpected behavior:&lt;/li&gt;&#10;&lt;/ul&gt;&#10;&lt;div class="highlight"&gt;&lt;pre tabindex="0" class="chroma"&gt;&lt;code class="language-ts" data-lang="ts"&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;&amp;#34;&amp;#34;&lt;/span&gt; &lt;span class="o"&gt;==&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;&#10;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &lt;span class="c1"&gt;// It is! But why??&#10;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="p"&gt;}&lt;/span&gt;&#10;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt; &lt;span class="nx"&gt;x&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt; &lt;span class="mi"&gt;3&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;&#10;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &lt;span class="c1"&gt;// True for *any* value of x!&#10;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="p"&gt;}&lt;/span&gt;&#10;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;ul&gt;&#10;&lt;li&gt;JavaScript also allows accessing properties which aren’t present:&lt;/li&gt;&#10;&lt;/ul&gt;&#10;&lt;div class="highlight"&gt;&lt;pre tabindex="0" class="chroma"&gt;&lt;code class="language-ts" data-lang="ts"&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="kr"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;obj&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;width&lt;/span&gt;: &lt;span class="kt"&gt;10&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;height&lt;/span&gt;: &lt;span class="kt"&gt;15&lt;/span&gt; &lt;span class="p"&gt;};&lt;/span&gt;&#10;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="c1"&gt;// Why is this NaN? Spelling is hard!&#10;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="kr"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;area&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;obj&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;width&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="nx"&gt;obj&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;heigth&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;&#10;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;hr&gt;&#10;&lt;h2 id="二typescript-的定位静态类型检查器"&gt;二、TypeScript 的定位：静态类型检查器&lt;/h2&gt;&#10;&lt;p&gt;&lt;strong&gt;TypeScript 的本质不是一门全新的语言，而是：&lt;/strong&gt;&lt;/p&gt;</description></item></channel></rss>