@shixinde/vuepress-theme-init/docs/assets/TypeScript.html-D-Qjaudh.js

### 其他开源项目

import{_ as n,c as s,o as a,a as e}from"./app-Dx9bNbfq.js";const t={},p=e(`<h2 id="初始化定义" tabindex="-1"><a class="header-anchor" href="#初始化定义"><span>初始化定义</span></a></h2><blockquote><p>从编程语言的动静来区分，TypeScript 属于静态类型的编程语言，JS 属于动态类型的编程语言。 静态类型:编译期做类型检查;动态类型:执行期做类型检查。 代码编译和代码执行的顺序: 1编译2执行。 对于JS来说:需要等到代码真正去执行的时候才能发现错误(晚)。 对于TS来说:在代码编译的时候(代码执行前)就可以发现错误(早)。 并且，配合VSCode等开发工具, TS可以提前到在编写代码的同时就发现代码中的错误，减少找Bug、改Bug时间。</p></blockquote><h2 id="ts-js-转换" tabindex="-1"><a class="header-anchor" href="#ts-js-转换"><span>[TS --&gt; JS] 转换</span></a></h2><blockquote><h3 id="eg-tsc-hello-ts" tabindex="-1"><a class="header-anchor" href="#eg-tsc-hello-ts"><span>eg: tsc .\\hello.ts</span></a></h3></blockquote><h2 id="简化转换步骤" tabindex="-1"><a class="header-anchor" href="#简化转换步骤"><span>简化转换步骤</span></a></h2><blockquote><p>2.3简化运行TS的步骤 问题描述:每次修改代码后，都要重复执行两个命令,才能运行TS代码，太繁琐。 简化方式:使用ts-node包，直接在Node.js中执行TS代码。 安装命令: npm i -g ts-node (ts-node 包提供了ts-node命令)。 使用方式: ts-node hello.ts。 解释: ts-node 命令在内部偷偷的将TS-&gt;JS,然后，再运行JS代码。</p></blockquote><h2 id="typescript-基础类型" tabindex="-1"><a class="header-anchor" href="#typescript-基础类型"><span>TypeScript 基础类型</span></a></h2><p>TypeScript 包含的数据类型如下表:</p><table><thead><tr><th style="text-align:left;">数据类型</th><th style="text-align:left;">关键字</th><th style="text-align:left;">描述</th></tr></thead><tbody><tr><td style="text-align:left;">任意类型</td><td style="text-align:left;">any</td><td style="text-align:left;">声明为 any 的变量可以赋予任意类型的值。</td></tr><tr><td style="text-align:left;">数字类型</td><td style="text-align:left;">number</td><td style="text-align:left;">双精度 64 位浮点值。它可以用来表示整数和分数。<code>let binaryLiteral: number = 0b1010; // 二进制 let octalLiteral: number = 0o744; // 八进制 let decLiteral: number = 6; // 十进制 let hexLiteral: number = 0xf00d; // 十六进制</code></td></tr><tr><td style="text-align:left;">字符串类型</td><td style="text-align:left;">string</td><td style="text-align:left;">一个字符系列，使用单引号（<strong>&#39;</strong>）或双引号（<strong>&quot;</strong>）来表示字符串类型。反引号（**<code>**）来定义多行文本和内嵌表达式。</code>let name: string = &quot;Runoob&quot;; let years: number = 5; let words: string = <code>您好，今年是 \${ name } 发布 \${ years + 1} 周年</code>;\`</td></tr><tr><td style="text-align:left;">布尔类型</td><td style="text-align:left;">boolean</td><td style="text-align:left;">表示逻辑值：true 和 false。<code>let flag: boolean = true;</code></td></tr><tr><td style="text-align:left;">数组类型</td><td style="text-align:left;">无</td><td style="text-align:left;">声明变量为数组。<code>// 在元素类型后面加上[] let arr: number[] = [1, 2]; // 或者使用数组泛型 let arr: Array = [1, 2];</code></td></tr><tr><td style="text-align:left;">元组</td><td style="text-align:left;">无</td><td style="text-align:left;">元组类型用来表示已知元素数量和类型的数组，各元素的类型不必相同，对应位置的类型需要相同。<code>let x: [string, number]; x = [&#39;Runoob&#39;, 1]; // 运行正常 x = [1, &#39;Runoob&#39;]; // 报错 console.log(x[0]); // 输出 Runoob</code></td></tr><tr><td style="text-align:left;">枚举</td><td style="text-align:left;">enum</td><td style="text-align:left;">枚举类型用于定义数值集合。<code>enum Color {Red, Green, Blue}; let c: Color = Color.Blue; console.log(c); // 输出 2</code></td></tr><tr><td style="text-align:left;">void</td><td style="text-align:left;">void</td><td style="text-align:left;">用于标识方法返回值的类型，表示该方法没有返回值。<code>function hello(): void { alert(&quot;Hello Runoob&quot;); }</code></td></tr><tr><td style="text-align:left;">null</td><td style="text-align:left;">null</td><td style="text-align:left;">表示对象值缺失。</td></tr><tr><td style="text-align:left;">undefined</td><td style="text-align:left;">undefined</td><td style="text-align:left;">用于初始化变量为一个未定义的值</td></tr><tr><td style="text-align:left;">never</td><td style="text-align:left;">never</td><td style="text-align:left;">never 是其它类型（包括 null 和 undefined）的子类型，代表从不会出现的值。</td></tr></tbody></table><p>**注意：**TypeScript 和 JavaScript 没有整数类型。</p><h2 id="类型注解-let-age-number-18" tabindex="-1"><a class="header-anchor" href="#类型注解-let-age-number-18"><span>类型注解 let age： number = 18</span></a></h2><blockquote><h2 id="变量加类型" tabindex="-1"><a class="header-anchor" href="#变量加类型"><span>变量加类型</span></a></h2></blockquote><p>注意：</p><p>数组类型也要写类型注解</p><p>下面这两种方法都可以，一般使用上面的这种写法</p><div class="language-typescript line-numbers-mode" data-highlighter="prismjs" data-ext="ts" data-title="ts"><pre class="language-typescript"><code><span class="line"><span class="token keyword">let</span> numbers<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span></span>
<span class="line"><span class="token keyword">let</span> numbers2<span class="token operator">:</span> <span class="token builtin">Array</span><span class="token operator">&lt;</span><span class="token builtin">number</span><span class="token operator">&gt;</span> <span class="token operator">=</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">]</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div></div></div><p>如果数组需要多个类型的话，可以使用下面的这种写法</p><div class="language-typescript line-numbers-mode" data-highlighter="prismjs" data-ext="ts" data-title="ts"><pre class="language-typescript"><code><span class="line"><span class="token keyword">let</span> numbers3<span class="token operator">:</span> <span class="token punctuation">(</span><span class="token builtin">number</span> <span class="token operator">|</span> <span class="token builtin">string</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span><span class="token string">&#39;15&#39;</span><span class="token punctuation">]</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div><blockquote><h2 id="函数加类型-function-const" tabindex="-1"><a class="header-anchor" href="#函数加类型-function-const"><span>函数加类型 function|const</span></a></h2></blockquote><blockquote><h3 id="function-方式" tabindex="-1"><a class="header-anchor" href="#function-方式"><span>function 方式</span></a></h3></blockquote><div class="language-typescript line-numbers-mode" data-highlighter="prismjs" data-ext="ts" data-title="ts"><pre class="language-typescript"><code><span class="line"><span class="token keyword">function</span> <span class="token function">add</span><span class="token punctuation">(</span>num1<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">,</span> num2<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">{</span></span>
<span class="line">    <span class="token keyword">return</span> num1<span class="token operator">+</span>num2</span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"><span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><blockquote><h3 id="const-方式" tabindex="-1"><a class="header-anchor" href="#const-方式"><span>const 方式</span></a></h3></blockquote><div class="language-typescript line-numbers-mode" data-highlighter="prismjs" data-ext="ts" data-title="ts"><pre class="language-typescript"><code><span class="line"><span class="token keyword">const</span> <span class="token function">add</span><span class="token punctuation">(</span>num1<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">,</span> num2<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">{</span></span>
<span class="line">    <span class="token keyword">return</span> num1<span class="token operator">+</span>num2</span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"><span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">//第二种方法</span></span>
<span class="line"><span class="token keyword">const</span> <span class="token function-variable function">add2</span><span class="token operator">:</span> <span class="token punctuation">(</span>num1<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">,</span> num2<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token function-variable function">number</span> <span class="token operator">=</span> <span class="token punctuation">(</span>num1<span class="token punctuation">,</span> num2<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span></span>
<span class="line">    <span class="token keyword">return</span> num1<span class="token operator">+</span>num2</span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><blockquote><p>如果函数返回值没有类型的话 可以是用void</p></blockquote><div class="language-typescript line-numbers-mode" data-highlighter="prismjs" data-ext="ts" data-title="ts"><pre class="language-typescript"><code><span class="line"><span class="token keyword">function</span> <span class="token function">add</span><span class="token punctuation">(</span>num1<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">,</span> num2<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token keyword">void</span><span class="token punctuation">{</span></span>
<span class="line">   <span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">66666</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><blockquote><p>特殊类型 元组(一个可以指定数量的数组)</p></blockquote><p>可以用来存储一些类似于经纬度等只有几个参数的数组</p><h2 id="类型别名-type-定义" tabindex="-1"><a class="header-anchor" href="#类型别名-type-定义"><span>类型别名 type 定义</span></a></h2><blockquote><h3 id="数组对象使用类型别名-type-定义" tabindex="-1"><a class="header-anchor" href="#数组对象使用类型别名-type-定义"><span>数组对象使用类型别名 type 定义</span></a></h3></blockquote><p>首先定义一个变量 ，是这个变量指向一个类型，然后将这个类型加以引用即可</p><div class="language-typescript line-numbers-mode" data-highlighter="prismjs" data-ext="ts" data-title="ts"><pre class="language-typescript"><code><span class="line"><span class="token keyword">type</span> <span class="token class-name">CustomArray</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token builtin">number</span> <span class="token operator">|</span> <span class="token builtin">string</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token punctuation">]</span> </span>
<span class="line"><span class="token keyword">let</span> numbers4<span class="token operator">:</span> CustomArray <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">123</span><span class="token punctuation">,</span> <span class="token string">&#39;11&#39;</span><span class="token punctuation">]</span></span>
<span class="line"><span class="token keyword">let</span> numbers5<span class="token operator">:</span> CustomArray <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token string">&#39;11&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;123&#39;</span><span class="token punctuation">]</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><blockquote><h3 id="只有接口可以使用两个方法来定义" tabindex="-1"><a class="header-anchor" href="#只有接口可以使用两个方法来定义"><span>只有接口可以使用两个方法来定义</span></a></h3><p><code>interface | type</code></p></blockquote><blockquote><h3 id="对象接口别名-interface-定义" tabindex="-1"><a class="header-anchor" href="#对象接口别名-interface-定义"><span>对象接口别名 interface 定义</span></a></h3></blockquote><div class="language-typescript line-numbers-mode" data-highlighter="prismjs" data-ext="ts" data-title="ts"><pre class="language-typescript"><code><span class="line"><span class="token comment">// 接口:</span></span>
<span class="line"><span class="token keyword">interface</span> <span class="token class-name">IPerson</span><span class="token punctuation">{</span></span>
<span class="line">    name<span class="token operator">:</span> <span class="token builtin">string</span></span>
<span class="line">    age<span class="token operator">:</span> <span class="token builtin">number</span></span>
<span class="line">    <span class="token function">sayHi</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">:</span><span class="token keyword">void</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"><span class="token keyword">let</span> person<span class="token operator">:</span> IPerson <span class="token operator">=</span> <span class="token punctuation">{</span></span>
<span class="line">    name<span class="token operator">:</span> <span class="token string">&#39;黎明&#39;</span><span class="token punctuation">,</span></span>
<span class="line">    age<span class="token operator">:</span> <span class="token number">18</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token function">sayHi</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span><span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"><span class="token keyword">let</span> person1 IPerson <span class="token operator">=</span> <span class="token punctuation">{</span></span>
<span class="line">    name<span class="token operator">:</span> <span class="token string">&#39;张三&#39;</span><span class="token punctuation">,</span></span>
<span class="line">    age<span class="token operator">:</span> <span class="token number">32</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token function">sayHi</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><blockquote><h3 id="对象接口使用-类型别名-type-定义" tabindex="-1"><a class="header-anchor" href="#对象接口使用-类型别名-type-定义"><span>对象接口使用 类型别名 type 定义</span></a></h3></blockquote><div class="language-typescript line-numbers-mode" data-highlighter="prismjs" data-ext="ts" data-title="ts"><pre class="language-typescript"><code><span class="line"><span class="token comment">// 类型别名:</span></span>
<span class="line"><span class="token keyword">type</span> <span class="token class-name">IPerson</span><span class="token punctuation">{</span></span>
<span class="line">    name<span class="token operator">:</span> <span class="token builtin">string</span></span>
<span class="line">    age<span class="token operator">:</span> <span class="token builtin">number</span></span>
<span class="line">    <span class="token function">sayHi</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">:</span><span class="token keyword">void</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"><span class="token keyword">let</span> person<span class="token operator">:</span> IPerson <span class="token operator">=</span> <span class="token punctuation">{</span></span>
<span class="line">    name<span class="token operator">:</span> <span class="token string">&#39;黎明&#39;</span><span class="token punctuation">,</span></span>
<span class="line">    age<span class="token operator">:</span> <span class="token number">18</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token function">sayHi</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span><span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"><span class="token keyword">let</span> person1 IPerson <span class="token operator">=</span> <span class="token punctuation">{</span></span>
<span class="line">    name<span class="token operator">:</span> <span class="token string">&#39;张三&#39;</span><span class="token punctuation">,</span></span>
<span class="line">    age<span class="token operator">:</span> <span class="token number">32</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token function">sayHi</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="接口继承-extends" tabindex="-1"><a class="header-anchor" href="#接口继承-extends"><span>接口继承 <code>extends</code></span></a></h2><div class="language-typescript line-numbers-mode" data-highlighter="prismjs" data-ext="ts" data-title="ts"><pre class="language-typescript"><code><span class="line"><span class="token keyword">interface</span> <span class="token class-name">Point2D</span> <span class="token punctuation">{</span> x<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span> y<span class="token operator">:</span> <span class="token builtin">number</span> <span class="token punctuation">}</span></span>
<span class="line"><span class="token keyword">interface</span> <span class="token class-name">Point3D</span> <span class="token keyword">extends</span> <span class="token class-name">Point2D</span> <span class="token punctuation">{</span> z<span class="token operator">:</span> <span class="token builtin">number</span> <span class="token punctuation">}</span></span>
<span class="line"><span class="token keyword">let</span> p3<span class="token operator">:</span> Point3D <span class="token operator">=</span> <span class="token punctuation">{</span></span>
<span class="line">    x<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span></span>
<span class="line">    y<span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span></span>
<span class="line">    z<span class="token operator">:</span><span class="token number">3</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"><span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>p3<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="让用户可以自己选择值-字面量类型" tabindex="-1"><a class="header-anchor" href="#让用户可以自己选择值-字面量类型"><span>让用户可以自己选择值 ，字面量类型</span></a></h2><blockquote><p>字面量类型 : 让用户从所给变量中选择一个值，如果选择其他的值就会报错</p><p>此案例用于定义函数</p></blockquote><p><img src="https://s1.ax1x.com/2022/08/11/v8GKk6.png" alt=""></p><div class="language-typescript line-numbers-mode" data-highlighter="prismjs" data-ext="ts" data-title="ts"><pre class="language-typescript"><code><span class="line"><span class="token keyword">function</span> <span class="token function">changeDirection</span><span class="token punctuation">(</span>direction<span class="token operator">:</span> <span class="token string">&#39;up&#39;</span> <span class="token operator">|</span> <span class="token string">&#39;down&#39;</span> <span class="token operator">|</span> <span class="token string">&#39;left&#39;</span> <span class="token operator">|</span> <span class="token string">&#39;right&#39;</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">    </span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"><span class="token function">changeDirection</span><span class="token punctuation">(</span><span class="token string">&#39;up&#39;</span><span class="token punctuation">)</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><blockquote><p>提前声明 <code>命名常量</code> 枚举</p></blockquote><div class="language-typescript line-numbers-mode" data-highlighter="prismjs" data-ext="ts" data-title="ts"><pre class="language-typescript"><code><span class="line"><span class="token keyword">enum</span> Direction<span class="token punctuation">{</span></span>
<span class="line">    up<span class="token punctuation">,</span></span>
<span class="line">    down<span class="token punctuation">,</span></span>
<span class="line">    left<span class="token punctuation">,</span></span>
<span class="line">    right</span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"><span class="token keyword">function</span> <span class="token function">changeDirection</span><span class="token punctuation">(</span>direction<span class="token operator">:</span> Direction<span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"><span class="token function">changeDirection</span><span class="token punctuation">(</span>Direction<span class="token punctuation">.</span>up<span class="token punctuation">)</span></span>
<span class="line"></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><blockquote><p>使用<code>枚举法</code> 是有<code>值</code>的</p><p>如果不指定的话，<code>默认值</code>为0</p><p>当然可以指定值，指定值后，下面的值还是会自增长</p><p>如果指定值为字符串的话，将不会有自增长</p></blockquote><div class="language-typescript line-numbers-mode" data-highlighter="prismjs" data-ext="ts" data-title="ts"><pre class="language-typescript"><code><span class="line"><span class="token keyword">enum</span> Direction<span class="token punctuation">{</span></span>
<span class="line">    up<span class="token operator">=</span><span class="token number">13</span><span class="token punctuation">,</span></span>
<span class="line">    down<span class="token punctuation">,</span></span>
<span class="line">    left<span class="token operator">=</span><span class="token number">18</span><span class="token punctuation">,</span></span>
<span class="line">    right</span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"><span class="token keyword">function</span> <span class="token function">changeDirection</span><span class="token punctuation">(</span>direction<span class="token operator">:</span> Direction<span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">    <span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>direction<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    </span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"><span class="token function">changeDirection</span><span class="token punctuation">(</span>Direction<span class="token punctuation">.</span>down<span class="token punctuation">)</span></span>
<span class="line"><span class="token comment">// 打印为 14 </span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="类型上下文-typeof-的两个作用" tabindex="-1"><a class="header-anchor" href="#类型上下文-typeof-的两个作用"><span>类型上下文 typeof 的两个作用</span></a></h2><blockquote><p>用于测试 后面变量的类型</p></blockquote><div class="language-typescript line-numbers-mode" data-highlighter="prismjs" data-ext="ts" data-title="ts"><pre class="language-typescript"><code><span class="line"><span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">typeof</span> <span class="token string">&#39;hello&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>   <span class="token comment">//String</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div><blockquote><p>用于引用上文中的类型，来限制下面的类型</p></blockquote><div class="language-typescript line-numbers-mode" data-highlighter="prismjs" data-ext="ts" data-title="ts"><pre class="language-typescript"><code><span class="line"><span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">typeof</span> <span class="token string">&#39;hello&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">let</span> p <span class="token operator">=</span> <span class="token punctuation">{</span> x<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> y<span class="token operator">:</span> <span class="token number">2</span> <span class="token punctuation">}</span></span>
<span class="line"><span class="token keyword">function</span> <span class="token function">formtPoint</span><span class="token punctuation">(</span>point<span class="token operator">:</span> <span class="token keyword">typeof</span> p<span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">    <span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>point<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"><span class="token function">formtPoint</span><span class="token punctuation">(</span><span class="token punctuation">{</span> x<span class="token operator">:</span> <span class="token number">111</span><span class="token punctuation">,</span> y<span class="token operator">:</span> <span class="token number">626</span> <span class="token punctuation">}</span><span class="token punctuation">)</span></span>
<span class="line"><span class="token comment">// string</span></span>
<span class="line"><span class="token comment">// { x: 111, y: 626 }</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="class类-构造函数" tabindex="-1"><a class="header-anchor" href="#class类-构造函数"><span>Class类 构造函数</span></a></h2><div class="language-typescript line-numbers-mode" data-highlighter="prismjs" data-ext="ts" data-title="ts"><pre class="language-typescript"><code><span class="line"><span class="token keyword">class</span> <span class="token class-name">person</span> <span class="token punctuation">{</span></span>
<span class="line">    age<span class="token operator">:</span> <span class="token builtin">number</span></span>
<span class="line">    gender<span class="token operator">:</span> <span class="token builtin">string</span></span>
<span class="line">    <span class="token function">constructor</span><span class="token punctuation">(</span>age<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">,</span> gender<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">        <span class="token keyword">this</span><span class="token punctuation">.</span>age <span class="token operator">=</span> age</span>
<span class="line">        <span class="token keyword">this</span><span class="token punctuation">.</span>gender <span class="token operator">=</span> gender</span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"><span class="token keyword">const</span> p <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">person</span><span class="token punctuation">(</span><span class="token number">18</span><span class="token punctuation">,</span> <span class="token string">&#39;男&#39;</span><span class="token punctuation">)</span></span>
<span class="line"><span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>p<span class="token punctuation">.</span>age<span class="token punctuation">,</span>p<span class="token punctuation">.</span>gender<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token comment">// 结果：  18 男</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="class类-实例方法" tabindex="-1"><a class="header-anchor" href="#class类-实例方法"><span>Class类 实例方法</span></a></h2><div class="language-typescript line-numbers-mode" data-highlighter="prismjs" data-ext="ts" data-title="ts"><pre class="language-typescript"><code><span class="line"><span class="token keyword">class</span> <span class="token class-name">Point</span> <span class="token punctuation">{</span></span>
<span class="line">    x <span class="token operator">=</span> <span class="token number">1</span></span>
<span class="line">    y <span class="token operator">=</span> <span class="token number">2</span></span>
<span class="line">    <span class="token function">scale123</span><span class="token punctuation">(</span>n<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">        <span class="token keyword">this</span><span class="token punctuation">.</span>x <span class="token operator">*=</span> n</span>
<span class="line">        <span class="token keyword">this</span><span class="token punctuation">.</span>y <span class="token operator">*=</span> n</span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"><span class="token keyword">const</span> p <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Point</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line">p<span class="token punctuation">.</span><span class="token function">scale123</span><span class="token punctuation">(</span><span class="token number">10</span><span class="token punctuation">)</span></span>
<span class="line"><span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>p<span class="token punctuation">.</span>x<span class="token punctuation">,</span> p<span class="token punctuation">.</span>y<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token comment">// 结果： 10 20</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="class类-继承" tabindex="-1"><a class="header-anchor" href="#class类-继承"><span>Class类 继承</span></a></h2><blockquote><p><code>extends</code>使用这个关键子</p><p><code>子类</code>就可以使用<code>父类</code>的所有的方法</p></blockquote><div class="language-typescript line-numbers-mode" data-highlighter="prismjs" data-ext="ts" data-title="ts"><pre class="language-typescript"><code><span class="line"><span class="token keyword">class</span> <span class="token class-name">Animal</span><span class="token punctuation">{</span></span>
<span class="line">    <span class="token function">move</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">        <span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&#39;没事走两步&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"><span class="token keyword">class</span> <span class="token class-name">Dog</span> <span class="token keyword">extends</span> <span class="token class-name">Animal</span><span class="token punctuation">{</span></span>
<span class="line">    name<span class="token operator">=</span> <span class="token string">&#39;二哈&#39;</span></span>
<span class="line">    <span class="token function">back</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">        <span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&#39;汪汪！！！&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"><span class="token keyword">const</span> d <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Dog</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line"><span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>d<span class="token punctuation">.</span>name<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">d<span class="token punctuation">.</span><span class="token function">move</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line">d<span class="token punctuation">.</span><span class="token function">back</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line"><span class="token comment">//结果: </span></span>
<span class="line"><span class="token comment">// 二哈</span></span>
<span class="line"><span class="token comment">// 没事走两步</span></span>
<span class="line"><span class="token comment">// 汪汪！！！</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><blockquote><h2 id="接口继承" tabindex="-1"><a class="header-anchor" href="#接口继承"><span>接口继承</span></a></h2></blockquote><div class="language-typescript line-numbers-mode" data-highlighter="prismjs" data-ext="ts" data-title="ts"><pre class="language-typescript"><code><span class="line"><span class="token keyword">interface</span> <span class="token class-name">Single</span><span class="token punctuation">{</span></span>
<span class="line">    <span class="token function">sing</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">:</span><span class="token keyword">void</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">class</span> <span class="token class-name">Person</span> <span class="token keyword">implements</span> <span class="token class-name">Single</span> <span class="token punctuation">{</span></span>
<span class="line">    name<span class="token operator">=</span><span class="token string">&#39;Jack&#39;</span></span>
<span class="line">    <span class="token function">sing</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token keyword">void</span> <span class="token punctuation">{</span></span>
<span class="line">       <span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&#39;你是我的小可爱&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">        </span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"><span class="token keyword">const</span> p <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Person</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line"><span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>p<span class="token punctuation">.</span>name<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">p<span class="token punctuation">.</span><span class="token function">sing</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line"><span class="token comment">// 结果：</span></span>
<span class="line"><span class="token comment">// Jack</span></span>
<span class="line"><span class="token comment">// 你是我的小可爱</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="class类-可见性修饰符" tabindex="-1"><a class="header-anchor" href="#class类-可见性修饰符"><span>Class类 可见性修饰符</span></a></h2><blockquote><h3 id="public-公共的-默认" tabindex="-1"><a class="header-anchor" href="#public-公共的-默认"><span>public 公共的 [ 默认 ]</span></a></h3></blockquote><blockquote><h3 id="private-私有的" tabindex="-1"><a class="header-anchor" href="#private-私有的"><span>private 私有的</span></a></h3></blockquote><div class="language-typescript line-numbers-mode" data-highlighter="prismjs" data-ext="ts" data-title="ts"><pre class="language-typescript"><code><span class="line"><span class="token keyword">class</span> <span class="token class-name">Animal</span> <span class="token punctuation">{</span></span>
<span class="line">    <span class="token keyword">private</span> <span class="token function">move</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">        <span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&#39;没事走两步&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><blockquote><h3 id="protected-受保护的" tabindex="-1"><a class="header-anchor" href="#protected-受保护的"><span>protected 受保护的</span></a></h3><p>protected:表示<code>受保护的</code>，仅对其<code>声明所在类</code>和<code>子类</code>中(非实例对象)可见。</p><ol><li>对自己本身的子方法可以使用</li><li>对于实例化的对象不可以使用</li></ol></blockquote><div class="language-typescript line-numbers-mode" data-highlighter="prismjs" data-ext="ts" data-title="ts"><pre class="language-typescript"><code><span class="line"><span class="token keyword">class</span> <span class="token class-name">Animal</span> <span class="token punctuation">{</span></span>
<span class="line">    <span class="token keyword">protected</span> <span class="token function">move</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">        <span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&#39;没事走两步&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><blockquote><h3 id="readonly-只读修饰符" tabindex="-1"><a class="header-anchor" href="#readonly-只读修饰符"><span>readonly 只读修饰符</span></a></h3><p>readonly 只能够修饰属性，不能够修饰方法</p></blockquote><div class="language-typescript line-numbers-mode" data-highlighter="prismjs" data-ext="ts" data-title="ts"><pre class="language-typescript"><code><span class="line"><span class="token keyword">c