Skip to content

Commit

Permalink
Updates
Browse files Browse the repository at this point in the history
  • Loading branch information
gibbok committed May 27, 2024
1 parent 1585b94 commit 97af452
Show file tree
Hide file tree
Showing 19 changed files with 7 additions and 7 deletions.
6 changes: 3 additions & 3 deletions book/typescript-introduction/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@
StarlightThemeProvider.updatePickers();
</script> <starlight-lang-select><label style="--sl-select-width: 7em" class="astro-4yphtoen"> <span class="sr-only astro-4yphtoen">Select language</span> <svg aria-hidden="true" class="icon label-icon astro-4yphtoen astro-c6vsoqas" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path fill-rule="evenodd" d="M8.516 3a.94.94 0 0 0-.941.94v1.15H2.94a.94.94 0 1 0 0 1.882h7.362a7.422 7.422 0 0 1-1.787 3.958 7.42 7.42 0 0 1-1.422-2.425.94.94 0 1 0-1.774.627 9.303 9.303 0 0 0 1.785 3.043 7.422 7.422 0 0 1-4.164 1.278.94.94 0 1 0 0 1.881 9.303 9.303 0 0 0 5.575-1.855 9.303 9.303 0 0 0 4.11 1.74l-.763 1.525a.968.968 0 0 0-.016.034l-1.385 2.77a.94.94 0 1 0 1.683.841l1.133-2.267h5.806l1.134 2.267a.94.94 0 0 0 1.683-.841l-1.385-2.769a.95.95 0 0 0-.018-.036l-3.476-6.951a.94.94 0 0 0-1.682 0l-1.82 3.639a7.423 7.423 0 0 1-3.593-1.256 9.303 9.303 0 0 0 2.27-5.203h1.894a.94.94 0 0 0 0-1.881H9.456V3.94A.94.94 0 0 0 8.516 3Zm6.426 11.794a1.068 1.068 0 0 1-.02.039l-.703 1.407h3.924l-1.962-3.924-1.24 2.478Z" clip-rule="evenodd"/></svg> <select value="/typescript-book/book/typescript-introduction/" class="astro-4yphtoen"> <option value="/typescript-book/book/typescript-introduction/" class="astro-4yphtoen">English</option><option value="/typescript-book/zh-cn/book/typescript-introduction/" class="astro-4yphtoen">简体中文</option> </select> <svg aria-hidden="true" class="icon caret astro-4yphtoen astro-c6vsoqas" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M17 9.17a1 1 0 0 0-1.41 0L12 12.71 8.46 9.17a1 1 0 1 0-1.41 1.42l4.24 4.24a1.002 1.002 0 0 0 1.42 0L17 10.59a1.002 1.002 0 0 0 0-1.42Z"/></svg> </label> </starlight-lang-select> </div> </div> </div> </div> </nav> <div class="main-frame astro-vrdttmbt"> <div class="lg:sl-flex astro-67yu43on"> <aside class="right-sidebar-container astro-67yu43on"> <div class="right-sidebar astro-67yu43on"> <div class="lg:sl-hidden astro-pb3aqygn"><mobile-starlight-toc data-min-h="2" data-max-h="3" class="astro-doynk5tl"><nav aria-labelledby="starlight__on-this-page--mobile" class="astro-doynk5tl"><details id="starlight__mobile-toc" class="astro-doynk5tl"><summary id="starlight__on-this-page--mobile" class="sl-flex astro-doynk5tl"><div class="toggle sl-flex astro-doynk5tl">On this page<svg aria-hidden="true" class="caret astro-doynk5tl astro-c6vsoqas" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg> </div><span class="display-current astro-doynk5tl"></span></summary><div class="dropdown astro-doynk5tl"><ul class="isMobile astro-g2bywc46" style="--depth: 0;"> <li class="astro-g2bywc46" style="--depth: 0;"> <a href="#_top" class="astro-g2bywc46" style="--depth: 0;"> <span class="astro-g2bywc46" style="--depth: 0;">Overview</span> </a> <ul class="isMobile astro-g2bywc46" style="--depth: 1;"> <li class="astro-g2bywc46" style="--depth: 1;"> <a href="#what-is-typescript" class="astro-g2bywc46" style="--depth: 1;"> <span class="astro-g2bywc46" style="--depth: 1;">What is TypeScript?</span> </a> </li><li class="astro-g2bywc46" style="--depth: 1;"> <a href="#why-typescript" class="astro-g2bywc46" style="--depth: 1;"> <span class="astro-g2bywc46" style="--depth: 1;">Why TypeScript?</span> </a> </li><li class="astro-g2bywc46" style="--depth: 1;"> <a href="#typescript-and-javascript" class="astro-g2bywc46" style="--depth: 1;"> <span class="astro-g2bywc46" style="--depth: 1;">TypeScript and JavaScript</span> </a> </li><li class="astro-g2bywc46" style="--depth: 1;"> <a href="#typescript-code-generation" class="astro-g2bywc46" style="--depth: 1;"> <span class="astro-g2bywc46" style="--depth: 1;">TypeScript Code Generation</span> </a> </li><li class="astro-g2bywc46" style="--depth: 1;"> <a href="#modern-javascript-now-downleveling" class="astro-g2bywc46" style="--depth: 1;"> <span class="astro-g2bywc46" style="--depth: 1;">Modern JavaScript Now (Downleveling)</span> </a> </li> </ul> </li> </ul> </div></details></nav></mobile-starlight-toc></div><div class="right-sidebar-panel sl-hidden lg:sl-block astro-pb3aqygn"><div class="sl-container astro-pb3aqygn"><starlight-toc data-min-h="2" data-max-h="3"><nav aria-labelledby="starlight__on-this-page"><h2 id="starlight__on-this-page">On this page</h2><ul class="astro-g2bywc46" style="--depth: 0;"> <li class="astro-g2bywc46" style="--depth: 0;"> <a href="#_top" class="astro-g2bywc46" style="--depth: 0;"> <span class="astro-g2bywc46" style="--depth: 0;">Overview</span> </a> <ul class="astro-g2bywc46" style="--depth: 1;"> <li class="astro-g2bywc46" style="--depth: 1;"> <a href="#what-is-typescript" class="astro-g2bywc46" style="--depth: 1;"> <span class="astro-g2bywc46" style="--depth: 1;">What is TypeScript?</span> </a> </li><li class="astro-g2bywc46" style="--depth: 1;"> <a href="#why-typescript" class="astro-g2bywc46" style="--depth: 1;"> <span class="astro-g2bywc46" style="--depth: 1;">Why TypeScript?</span> </a> </li><li class="astro-g2bywc46" style="--depth: 1;"> <a href="#typescript-and-javascript" class="astro-g2bywc46" style="--depth: 1;"> <span class="astro-g2bywc46" style="--depth: 1;">TypeScript and JavaScript</span> </a> </li><li class="astro-g2bywc46" style="--depth: 1;"> <a href="#typescript-code-generation" class="astro-g2bywc46" style="--depth: 1;"> <span class="astro-g2bywc46" style="--depth: 1;">TypeScript Code Generation</span> </a> </li><li class="astro-g2bywc46" style="--depth: 1;"> <a href="#modern-javascript-now-downleveling" class="astro-g2bywc46" style="--depth: 1;"> <span class="astro-g2bywc46" style="--depth: 1;">Modern JavaScript Now (Downleveling)</span> </a> </li> </ul> </li> </ul> </nav></starlight-toc></div></div> </div> </aside> <div class="main-pane astro-67yu43on"> <main data-pagefind-body lang="en" dir="ltr" class="astro-bguv2lll"> <div class="content-panel astro-7nkwcw3z"> <div class="sl-container astro-7nkwcw3z"> <h1 id="_top" class="astro-j6tvhyss">TypeScript Introduction</h1> </div> </div> <div class="content-panel astro-7nkwcw3z"> <div class="sl-container astro-7nkwcw3z"> <div class="sl-markdown-content"> <h3 id="what-is-typescript">What is TypeScript?</h3>
<p>TypeScript is a strongly typed programming language that builds on JavaScript. It was originally designed by Anders Hejlsberg in 2012 and is currently developed and maintained by Microsoft as an open source project.</p>
<p>TypeScript compiles to JavaScript and can be executed in any JavaScript engine (e.g., a browser or server Node.js).</p>
<p>TypeScript compiles to JavaScript and can be executed in any JavaScript runtime (e.g., a browser or server Node.js).</p>
<p>TypeScript supports multiple programming paradigms such as functional, generic, imperative, and object-oriented. TypeScript is neither an interpreted nor a compiled language.</p>
<h3 id="why-typescript">Why TypeScript?</h3>
<p>TypeScript is a strongly typed language that helps prevent common programming mistakes and avoid certain kinds of run-time errors before the program is executed.</p>
Expand All @@ -51,7 +51,7 @@ <h3 id="typescript-and-javascript">TypeScript and JavaScript</h3>
<p>For instance, consider a function in a JavaScript file with the <code dir="auto">.js</code> extension, such as the following:</p>
<!-- skip -->
<div class="expressive-code"><link rel="stylesheet" href="/typescript-book/app_assets/ec.664at.css"><script type="module" src="/typescript-book/app_assets/ec.sgewm.js"></script><figure class="frame not-content"><figcaption class="header"></figcaption><pre tabindex="0"><code><div class="ec-line"><span style="--0:#C792EA;--1:#8844AE">const </span><span style="--0:#82AAFF;--1:#3B61B0">sum</span><span style="--0:#C792EA;--1:#8844AE"> = </span><span style="--0:#D9F5DD;--1:#111111">(</span><span style="--0:#D7DBE0;--1:#403F53">a</span><span style="--0:#C792EA;--1:#8844AE">, </span><span style="--0:#D7DBE0;--1:#403F53">b</span><span style="--0:#D9F5DD;--1:#111111">)</span><span style="--0:#C792EA;--1:#8844AE"> => </span><span style="--0:#D6DEEB;--1:#403F53">a</span><span style="--0:#C792EA;--1:#8844AE"> + </span><span style="--0:#D6DEEB;--1:#403F53">b;</span></div></code></pre><div class="copy"><button title="Copy to clipboard" data-copied="Copied!" data-code="const sum = (a, b) => a + b;"><div></div></button></div></figure></div>
<p>The function can be converted and used in TypeScript by changing the file extension to <code dir="auto">.ts</code>. However, if the same function is annotated with TypeScript types, it cannot be executed in any JavaScript engine without compilation. The following TypeScript code will produce a syntax error if it is not compiled:</p>
<p>The function can be converted and used in TypeScript by changing the file extension to <code dir="auto">.ts</code>. However, if the same function is annotated with TypeScript types, it cannot be executed in any JavaScript runtime without compilation. The following TypeScript code will produce a syntax error if it is not compiled:</p>
<!-- skip -->
<div class="expressive-code"><figure class="frame not-content"><figcaption class="header"></figcaption><pre tabindex="0"><code><div class="ec-line"><span style="--0:#C792EA;--1:#8844AE">const </span><span style="--0:#82AAFF;--1:#3B61B0">sum</span><span style="--0:#C792EA;--1:#8844AE"> = </span><span style="--0:#D9F5DD;--1:#111111">(</span><span style="--0:#D7DBE0;--1:#403F53">a</span><span style="--0:#7FDBCA;--1:#096E72">:</span><span style="--0:#C792EA;--1:#8844AE"> </span><span style="--0:#C5E478;--1:#3B61B0">number</span><span style="--0:#C792EA;--1:#8844AE">, </span><span style="--0:#D7DBE0;--1:#403F53">b</span><span style="--0:#7FDBCA;--1:#096E72">:</span><span style="--0:#C792EA;--1:#8844AE"> </span><span style="--0:#C5E478;--1:#3B61B0">number</span><span style="--0:#D9F5DD;--1:#111111">)</span><span style="--0:#7FDBCA;--1:#096E72">:</span><span style="--0:#C792EA;--1:#8844AE"> </span><span style="--0:#C5E478;--1:#3B61B0">number</span><span style="--0:#C792EA;--1:#8844AE"> => </span><span style="--0:#D6DEEB;--1:#403F53">a</span><span style="--0:#C792EA;--1:#8844AE"> + </span><span style="--0:#D6DEEB;--1:#403F53">b;</span></div></code></pre><div class="copy"><button title="Copy to clipboard" data-copied="Copied!" data-code="const sum = (a: number, b: number): number => a + b;"><div></div></button></div></figure></div>
<p>TypeScript was designed to detect possible exceptions that can occur at runtime during compilation time by having the developer define the intent with type annotations. In addition, TypeScript can also catch issues if no type annotation is provided. For instance, the following code snippet does not specify any TypeScript types:</p>
Expand All @@ -68,7 +68,7 @@ <h3 id="typescript-and-javascript">TypeScript and JavaScript</h3>
<div class="expressive-code"><figure class="frame not-content"><figcaption class="header"></figcaption><pre tabindex="0"><code><div class="ec-line"><span style="--0:#d6deeb;--1:#403f53">Operator '+' cannot be applied to types 'number' and 'boolean'.</span></div></code></pre><div class="copy"><button title="Copy to clipboard" data-copied="Copied!" data-code="Operator &#x27;+&#x27; cannot be applied to types &#x27;number&#x27; and &#x27;boolean&#x27;."><div></div></button></div></figure></div>
<p>This error occurs because TypeScript strictly enforces type compatibility, and in this case, it identifies an invalid operation between a number and a boolean.</p>
<h3 id="typescript-code-generation">TypeScript Code Generation</h3>
<p>The TypeScript compiler has two main responsibilities: checking for type errors and compiling to JavaScript. These two processes are independent of each other. Types do not affect the execution of the code in a JavaScript engine, as they are completely erased during compilation. TypeScript can still output JavaScript even in the presence of type errors.
<p>The TypeScript compiler has two main responsibilities: checking for type errors and compiling to JavaScript. These two processes are independent of each other. Types do not affect the execution of the code in a JavaScript runtime, as they are completely erased during compilation. TypeScript can still output JavaScript even in the presence of type errors.
Here is an example of TypeScript code with a type error:</p>
<!-- skip -->
<div class="expressive-code"><figure class="frame not-content"><figcaption class="header"></figcaption><pre tabindex="0"><code><div class="ec-line"><span style="--0:#C792EA;--1:#8844AE">const </span><span style="--0:#82AAFF;--1:#3B61B0">add</span><span style="--0:#C792EA;--1:#8844AE"> = </span><span style="--0:#D9F5DD;--1:#111111">(</span><span style="--0:#D7DBE0;--1:#403F53">a</span><span style="--0:#7FDBCA;--1:#096E72">:</span><span style="--0:#C792EA;--1:#8844AE"> </span><span style="--0:#C5E478;--1:#3B61B0">number</span><span style="--0:#C792EA;--1:#8844AE">, </span><span style="--0:#D7DBE0;--1:#403F53">b</span><span style="--0:#7FDBCA;--1:#096E72">:</span><span style="--0:#C792EA;--1:#8844AE"> </span><span style="--0:#C5E478;--1:#3B61B0">number</span><span style="--0:#D9F5DD;--1:#111111">)</span><span style="--0:#7FDBCA;--1:#096E72">:</span><span style="--0:#C792EA;--1:#8844AE"> </span><span style="--0:#C5E478;--1:#3B61B0">number</span><span style="--0:#C792EA;--1:#8844AE"> => </span><span style="--0:#D6DEEB;--1:#403F53">a</span><span style="--0:#C792EA;--1:#8844AE"> + </span><span style="--0:#D6DEEB;--1:#403F53">b;</span></div><div class="ec-line"><span style="--0:#C792EA;--1:#8844AE">const </span><span style="--0:#82AAFF;--1:#3B61B0">result</span><span style="--0:#C792EA;--1:#8844AE"> = </span><span style="--0:#82AAFF;--1:#3B61B0">add</span><span style="--0:#D6DEEB;--1:#403F53">(</span><span style="--0:#D9F5DD;--1:#111111">'</span><span style="--0:#ECC48D;--1:#984E4D">x</span><span style="--0:#D9F5DD;--1:#111111">'</span><span style="--0:#C792EA;--1:#8844AE">, </span><span style="--0:#D9F5DD;--1:#111111">'</span><span style="--0:#ECC48D;--1:#984E4D">y</span><span style="--0:#D9F5DD;--1:#111111">'</span><span style="--0:#D6DEEB;--1:#403F53">); </span><span style="--0:#919F9F;--1:#5D6376">// Argument of type 'string' is not assignable to parameter of type 'number'.</span></div></code></pre><div class="copy"><button title="Copy to clipboard" data-copied="Copied!" data-code="const add = (a: number, b: number): number => a + b;const result = add(&#x27;x&#x27;, &#x27;y&#x27;); // Argument of type &#x27;string&#x27; is not assignable to parameter of type &#x27;number&#x27;."><div></div></button></div></figure></div>
Expand Down
Binary file removed pagefind/fragment/en_b2d886e.pf_fragment
Binary file not shown.
Binary file added pagefind/fragment/en_e049ed7.pf_fragment
Binary file not shown.
Binary file removed pagefind/fragment/zh-cn_12d1ff6.pf_fragment
Binary file not shown.
Binary file added pagefind/fragment/zh-cn_d5f2d6f.pf_fragment
Binary file not shown.
Binary file removed pagefind/index/en_25e77c5.pf_index
Binary file not shown.
Binary file added pagefind/index/en_6e29ae4.pf_index
Binary file not shown.
Binary file removed pagefind/index/en_884b7ae.pf_index
Binary file not shown.
Binary file added pagefind/index/en_dd353f7.pf_index
Binary file not shown.
Binary file added pagefind/index/zh-cn_39709f2.pf_index
Binary file not shown.
Binary file removed pagefind/index/zh-cn_60fb95d.pf_index
Binary file not shown.
Binary file added pagefind/index/zh-cn_8644eae.pf_index
Binary file not shown.
Binary file removed pagefind/index/zh-cn_9cf1e84.pf_index
Binary file not shown.
2 changes: 1 addition & 1 deletion pagefind/pagefind-entry.json
Original file line number Diff line number Diff line change
@@ -1 +1 @@
{"version":"1.0.4","languages":{"zh-cn":{"hash":"zh-cn_6b5d54a01ef9a","wasm":null,"page_count":62},"en":{"hash":"en_b9db87fd47","wasm":"en","page_count":62}}}
{"version":"1.0.4","languages":{"zh-cn":{"hash":"zh-cn_6ed58c31d6131","wasm":null,"page_count":62},"en":{"hash":"en_c5e6b4e35f","wasm":"en","page_count":62}}}
Binary file removed pagefind/pagefind.en_b9db87fd47.pf_meta
Binary file not shown.
Binary file added pagefind/pagefind.en_c5e6b4e35f.pf_meta
Binary file not shown.
Binary file removed pagefind/pagefind.zh-cn_6b5d54a01ef9a.pf_meta
Binary file not shown.
Binary file added pagefind/pagefind.zh-cn_6ed58c31d6131.pf_meta
Binary file not shown.
Loading

0 comments on commit 97af452

Please sign in to comment.