说说你对 typescript 的理解？与 javascript 的区别？

<h4>一、是什么</h4><p><code>TypeScript</code> 是 <code>JavaScript</code> 的类型的超集，支持<code>ES6</code>语法，支持面向对象编程的概念，如类、接口、继承、泛型等</p><blockquote>超集，不得不说另外一个概念，子集，怎么理解这两个呢，举个例子，如果一个集合A里面的的所有元素集合B里面都存在，那么我们可以理解集合B是集合A的超集，集合A为集合B的子集</blockquote><p><img src="https://static.ecool.fun//article/f9a27d35-579d-44b5-abd6-7c82021934cc.png" alt="" data-href="" style=""/></p><p>其是一种静态类型检查的语言，提供了类型注解，在代码编译阶段就可以检查出数据类型的错误</p><p>同时扩展了<code>JavaScript</code> 的语法，所以任何现有的<code>JavaScript</code> 程序可以不加改变的在 <code>TypeScript</code> 下工作</p><p>为了保证兼容性，<code>typescript</code>在编译阶段需要编译器编译成纯<code>Javascript</code>来运行，是为大型应用之开发而设计的语言，如下：</p><p><code>tsx</code>文件如下：</p><pre><code class="language-tsx">const hello : string = "Hello World!"
console.log(hello)</code></pre><p>编译文件后：</p><pre><code class="language-js">const hello = "Hello World!"
console.log(hello)</code></pre><h4>二、特性</h4><p><code>typescript</code>的特性主要有如下：</p><ul><li><strong>类型批注和编译时类型检查</strong> ：在编译时批注变量类型</li><li><strong>类型推断</strong>：ts中没有批注变量类型会自动推断变量的类型</li><li><strong>类型擦除</strong>：在编译过程中批注的内容和接口会在运行时利用工具擦除</li><li><strong>接口</strong>：ts中用接口来定义对象类型</li><li><strong>枚举</strong>：用于取值被限定在一定范围内的场景</li><li><strong>Mixin</strong>：可以接受任意类型的值</li><li><strong>泛型编程</strong>：写代码时使用一些以后才指定的类型</li><li><strong>名字空间</strong>：名字只在该区域内有效，其他区域可重复使用该名字而不冲突</li><li><strong>元组</strong>：元组合并了不同类型的对象，相当于一个可以装不同类型数据的数组</li></ul><h3>类型批注</h3><p>通过类型批注提供在编译时启动类型检查的静态类型，这是可选的，而且可以忽略而使用<code>JavaScript</code>常规的动态类型</p><pre><code class="language-tsx">function Add(left: number, right: number): number {
 return left + right;
}</code></pre><p>对于基本类型的批注是<code>number</code>、<code>bool</code>和<code>string</code>，而弱或动态类型的结构则是<code>any</code>类型</p><h3>类型推断</h3><p>当类型没有给出时，TypeScript编译器利用类型推断来推断类型，如下：</p><pre><code class="language-ts">let str = 'string'</code></pre><p>变量<code>str</code>被推断为字符串类型，这种推断发生在初始化变量和成员，设置默认参数值和决定函数返回值时</p><p>如果由于缺乏声明而不能推断出类型，那么它的类型被视作默认的动态<code>any</code>类型</p><h3>接口</h3><p>接口简单来说就是用来描述对象的类型 数据的类型有<code>number</code>、<code>null</code>、<code>string</code>等数据格式，对象的类型就是用接口来描述的</p><pre><code class="language-tsx">interface Person {
    name: string;
    age: number;
}

let tom: Person = {
    name: 'Tom',
    age: 25
};</code></pre><h4>三、区别</h4><ul><li>TypeScript 是 JavaScript 的超集，扩展了 JavaScript 的语法</li><li>TypeScript 可处理已有的 JavaScript 代码，并只对其中的 TypeScript 代码进行编译</li><li>TypeScript 文件的后缀名 .ts （.ts，.tsx，.dts），JavaScript 文件是 .js</li><li>在编写 TypeScript 的文件的时候就会自动编译成 js 文件</li></ul><p>更多的区别如下图所示：</p><p><img src="https://static.ecool.fun//article/3e1fec86-cc9a-435a-8fe7-a3906042df1b.png" alt="" data-href="" style=""/></p>

DreamCoders/CoderGuide

内容风险标识

评论 (0)

DreamCoders/CoderGuide .gitee-modal { width: 500px !important; }

内容风险标识