5分钟了解凭啥Typescript 比JS还火

水深无声 2022-02-02 15:57 201阅读 0赞

人的观念和喜好其实对一个成年人，而且有自己特定思想的人来说很难转变，比如生活里，你是宅男、腐女型的。

然后，突然有人说宅不好，要多出去走走，体验体验大自然和不同的生活模式，这对你就造成了一种冲击和下意识抵触，因为这需要改变你平时固有的思维和生活习惯，无疑的痛苦的。

但一旦你跨出去了第一步，并且切实感受到了积极生活习惯带来的变化和好处，那么你就会觉得这是正确的选择和，甚至豁然开朗。

我写了这么多感慨，你们一定以为北妈又在洗脑了对不对（我打死你丫的）？其实这段话我是用来做个引子比喻，延伸到今天的文章系列主题

「Typescript 你别闹」 之 「JavaScript我不服」

**1、【JavaScript 和 TypeScript 的主要差异 】**

**2、【TypeScript 有什么好处和必要 】**

**3、简单初识TypeScript**

之前的我，很信任并且很喜欢JavaScript 这种闲散、自由、弱类型的、无约束的语言风格，才决定一路走到黑，而有的人天生喜欢java、c\#这种严格规范的，无需自己控制语义的成熟语言，这就和自己的性格和习惯有莫大关系了。

所以我第一段说的完全不是废话，而是切实原因，而且我也调查了很多喜欢前端的同行和读者，他们都有一个共性属性，那就是喜欢所见即所得，而且相对自由些的事物，无疑js是最好的契合物。

**二**

那么今天北妈我为何要写关于TypeScript的文章呢？

因为我之前还是一直是js、原生es6都坚定者，TypeScript加了很多类型检测和接口、面向对象概念，我一直不想应用到项目里，虽说好处很多，但限制和严格性也会增多很多，所以我一直不想应用。

但随着越来越多的著名项目和大佬推崇和安利它，而且据最新的框架语言排行榜 TS的热度和应用超过JS本身，成为一件不可思议的事，所以这也说明 **TypeScript** 势必被市场验证了。

你不学也得学了，这不这些天我也在巩固ts，因为我们的项目已经是vue+ts 的架构了。看到这里你以为我又要广告（我打死你啊）？大错特错，这是我的又一个原创系列  「**TypeScript 你别闹****」**

而且这个系列也很重要，我也会一直更下去，直到大家跟着我都学会并且掌握基础，因为这个涉及到我之前说我针对大家出的自己的vue课程系列，因为在 Vue 的下一个大版本 (3.x) 中也计划了相当多的 TypeScript 支持改进，包括内置的基于 class 的组件 API 和 TSX 的支持。

所以我计划把这个技术栈讲一下，在放出vue的课，就可以做到无缝链接了，不然会和主流越差越远，现在线上针对vue+ts结合的系列文章也不多，所以我在这里凑着自己和大家学习也做份贡献。

**三 **

**开始（部分总结摘自网络）**

**1****、【JavaScript 和 TypeScript 的主要差异 】**

TypeScript 和 JavaScript 是目前项目开发中较为流行的两种脚本语言，我们已经熟知 TypeScript 是 JavaScript 的一个超集，但是 TypeScript 与 JavaScript 之间又有什么样的区别呢？

JavaScript 是一种轻量级的解释性脚本语言，可嵌入到 HTML 页面中，在浏览器端执行，能够实现浏览器端丰富的交互功能，为用户带来流畅多样的用户体验。

JavaScript 是基于对象和事件驱动的，无需特定的语言环境，只需在支持的浏览器上就能运行。

**JavaScript 语言具有以下特点：**

*  JavaScript 是一种脚本编写语言，无需编译，只要嵌入 HTML 代码中，就能由浏览器逐行加载解释执行。
 *  JavaScript 是一种基于对象的语言，可以创建对象同时使用现有对象。但是 Javascript 并不支持其它面向对象语言所具有的继承和重载功能。
 *  JavaScript 的语法简单，使用的变量为弱类型。
 *  JavaScript 语言较为安全，仅在浏览器端执行，不会访问本地硬盘数据。
 *  JavaScript 语言具有动态性。JavaScript 是事件驱动的，只根据用户的操作做出相应的反应处理。
 *  JavaScript 只依赖于浏览器，与操作系统的因素无关。因此 JavaScript 是一种跨平台的语言。
 *  JavaScript 兼容性较好，能够与其他技术（如 XML，REST API 等）一起使用。

**TypeScript**

TypeScript 是 Microsoft 开发和维护的一种面向对象的编程语言。它是 JavaScript 的超集，包含了 JavaScript 的所有元素，可以载入 JavaScript 代码运行，并扩展了 JavaScript 的语法。

TypeScript 具有以下特点：

*  TypeScript 是 Microsoft 推出的开源语言，使用 Apache 授权协议
 *  TypeScript 增加了静态类型、类、模块、接口和类型注解
 *  TypeScript 可用于开发大型的应用
 *  TypeScript 易学易于理解

# JavaScript 和 TypeScript 的主要差异 #

TypeScript 可以使用 JavaScript 中的所有代码和编码概念，TypeScript 是为了使 JavaScript 的开发变得更加容易而创建的。例如，TypeScript 使用类型和接口等概念来描述正在使用的数据，这使开发人员能够快速检测错误并调试应用程序

TypeScript 从核心语言方面和类概念的模塑方面对 JavaScript 对象模型进行扩展。

*  JavaScript 代码可以在无需任何修改的情况下与 TypeScript 一同工作，同时可以使用编译器将 TypeScript 代码转换为 JavaScript。
 *  TypeScript 通过类型注解提供编译时的静态类型检查。
 *  TypeScript 中的数据要求带有明确的类型，JavaScript不要求。
 *  TypeScript 为函数提供了缺省参数值。
 *  TypeScript 引入了 JavaScript 中没有的“类”概念。
 *  TypeScript 中引入了模块的概念，可以把声明、数据、函数和类封装在模块中。

# **2、【TypeScript 有什么好处和必要 】**   TypeScript 的优势 #

下面列举 TypeScript 相比于 JavaScript 的显著优势：

## 1. 静态输入 ##

静态类型化是一种功能，可以在开发人员编写脚本时检测错误。查找并修复错误是当今开发团队的迫切需求。有了这项功能，就会允许开发人员编写更健壮的代码并对其进行维护，以便使得代码质量更好、更清晰。

## 2. 大型的开发项目 ##

有时为了改进开发项目，需要对代码库进行小的增量更改。这些小小的变化可能会产生严重的、意想不到的后果，因此有必要撤销这些变化。使用TypeScript工具来进行重构更变的容易、快捷。

## 3. 更好的协作 ##

当发开大型项目时，会有许多开发人员，此时乱码和错误的机也会增加。类型安全是一种在编码期间检测错误的功能，而不是在编译项目时检测错误。这为开发团队创建了一个更高效的编码和调试过程。

## 4. 更强的生产力 ##

干净的 ECMAScript 6 代码，自动完成和动态输入等因素有助于提高开发人员的工作效率。这些功能也有助于编译器创建优化的代码。

# JavaScript 的优势 #

相比于 TypeScript，JavaScript 也有一些明显优势。

## 1. 人气 ##

JavaScript 的开发者社区仍然是巨大而活跃的，在社区中可以很方便地找到大量成熟的开发项目和可用资源。

## 2. 学习曲线 ##

由于 JavaScript 语言发展的较早，也较为成熟，所以仍有一大批开发人员坚持使用他们熟悉的脚本语言 JavaScript，而不是学习 TypeScript。

## 3. 本地浏览器支持 ##

TypeScript 代码需要被编译（输出 JavaScript 代码），这是 TypeScript 代码执行时的一个额外的步骤。

## 4. 不需要注释 ##

为了充分利用 TypeScript 特性，开发人员需要不断注释他们的代码，这可能会使项目效率降低。

## 5. 灵活性 ##

有些开发人员更喜欢 JavaScript 的灵活性。

# 如何抉择 #

TypeScript 正在成为开发大型编码项目的有力工具。因为其面向对象编程语言的结构保持了代码的清洁、一致和简单的调试。  
  
因此在应对大型开发项目时，使用 TypeScript 更加合适。如果有一个相对较小的编码项目，似乎没有必要使用 TypeScript，只需使用灵活的 JavaScript 即可。

**四  
3、简单初识TypeScript**  
篇幅过长，今天这一节先展示下最简单，最典型的静态类型检测功能，剩下的众多属性，后面我们慢慢讲

## 编写第一个 TypeScript 程序 ##

这一节会介绍如何开始体验 TypeScript，下一节开始会介绍一些有特点、有趣的例子。

### 前置准备 ###

安装 TypeScript。

<table style="width:637px;"> 
 <tbody> 
  <tr> 
   <td> <pre>
&nbsp;</pre> <p>npm install -g typescript</p> </td> 
  </tr> 
 </tbody> 
</table>

初始化工作区。

<table style="width:637px;"> 
 <tbody> 
  <tr> 
   <td> <pre>
&nbsp;</pre> <p>mkdir learning-typescript<br> cd learning-typescript</p> </td> 
  </tr> 
 </tbody> 
</table>

新建第一个测试文件。

<table style="width:637px;"> 
 <tbody> 
  <tr> 
   <td> <pre>
&nbsp;</pre> <p>touch taste.ts</p> </td> 
  </tr> 
 </tbody> 
</table>

### 第一个例子 ###

我们刚才已经新建了一个名为 `taste.ts` 的文件，对 TypeScript 的后缀名为 `ts`，那我们写点什么进去吧！

taste.ts

<table style="width:637px;"> 
 <tbody> 
  <tr> 
   <td> <pre>
&nbsp;</pre> <p>function say(text: string) { <br> &nbsp;console.log(text);<br> }<br> say('hello!');</p> </td> 
  </tr> 
 </tbody> 
</table>

然后执行命令（tsc 是刚才 npm 装的 typescript 中带的）。

<table style="width:637px;"> 
 <tbody> 
  <tr> 
   <td> <pre>
&nbsp;</pre> <p>tsc taste.ts</p> </td> 
  </tr> 
 </tbody> 
</table>

然后我们得到一个编译后的文件 `taste.js`，内容如下。

<table style="width:637px;"> 
 <tbody> 
  <tr> 
   <td> <pre>
&nbsp;</pre> <p>function say(text) { <br> &nbsp;console.log(text);<br> }<br> say('hello!');</p> </td> 
  </tr> 
 </tbody> 
</table>

可以看到，只是简单去除了 text 后面的类型标注，然后我们用 `node` 执行 `taste.js`。

<table style="width:637px;"> 
 <tbody> 
  <tr> 
   <td> <pre>
&nbsp;</pre> <p>node taste.js<br> // hello!</p> </td> 
  </tr> 
 </tbody> 
</table>

完美执行，让我再改写东西看看？

taste.ts

<table style="width:637px;"> 
 <tbody> 
  <tr> 
   <td> <pre>
&nbsp;</pre> <p>function say(text: string) { <br> &nbsp;console.log(text);<br> }<br> say(969);</p> </td> 
  </tr> 
 </tbody> 
</table>

然后再执行 `tsc taste.ts`，然后就类型检查就报错了。这就是 TypeScript 的主要功能 —— 静态类型检查。

<table> 
 <tbody> 
  <tr> 
   <td> <pre>
&nbsp;</pre> <p>&gt; tsc taste.ts<br> taste.ts(4,5): error TS2345: Argument of type '969' is not assignable to parameter of type 'string'.</p> <p>&nbsp;</p> </td> 
  </tr> 
 </tbody> 
</table>

意思，如果你规定了你的参数的string类型，就必须是字符串，如果s其他类型，是不允许的。这有助于后面对类型和所有的关联程序的控制，不至于出现各种'undefined'.导致程序无法执行报错。

如果有想了解的，先看下ts相关文献和电子教程

TypeScript 入门教程 ～ https://ts.xcatliu.com/