抛弃 JS，使用 TypeScript

落日映苍穹つ 2021-12-16 23:31 300阅读 0赞

转自：[原文][Link 1]

最近几个月我已经全面抛弃 JavaScript，完全使用 TypeScript 进行前端开发（只在上课的时候用到 JS）。

先说优点：

1.  bug 显著减少，之前会遇到的 xxx 为空的问题几乎不会出现了，类型相关 bug 直线减少。
2.  应用更可控，当你需要约束某些代码的时候，用类型就能很简单地做到，比如 React 里强制写 diaplayName 方便调试。
3.  查文档更方便，以前要打开浏览器看文档，现在直接查看定义就基本明白了。

再说缺点：

没有。哈哈。

## [现在只会 JS 的前端要怎么办？][Link 1] ##

不用慌，TS 的代码跟 JS 差不多，你学完 JS 后，只需要学习一下类型声明就可以掌握 TS 了。

如果你公司的项目目前只支持 JS，也没有关系，只需要加一个 ts-loader 或者 awesome-typescript-loader 就能提供 TypeScript 支持，TS 可以和 JS 共存哦。

然后你就可以逐步用 TS 代替 JS，实现完美过渡。

## [为什么 TypeScript 是好的？][Link 1] ##

如果你现在还没有开始学习 TS，肯定是因为对 TS 有所顾虑。去问问用了 TS 的前端感觉怎么样吧，基本没有一个说后悔的。所以这种顾虑是完全没有必要的。

那么 TS 为什么这么好呢？接下来我们从理论上解释一下。

1.  写代码最怕什么？代码出错，也就是 bug。
2.  如何避免 bug？运行代码看结果，或者添加各种测试。
3.  现在前端并不流行单元测试，所以只能运行代码看结果（比如刷新页面，然后用鼠标点点点，看是否能运行成功）
4.  但当你的前端应用非常大的时候，你不可能每次改代码之后去所有页面上点一遍，因为页面太多了。
5.  所以前端选择模块化，让一次代码改动影响的页面尽量少。但是即使这样，你依然无法通过鼠标点击测试来运行所有代码，因为你可能还需要测试多种不同的账户。
6.  这样做太麻烦了。有没有什么办法能让我快速知道「代码有bug没」

这是一个重要的问题：有没有什么办法能让我快速知道「代码有bug没」。

为了说明类型是如何解决这个问题的，我们先来介绍一种最简单的类型：正负数。

我们把实数分为三种类型：正数、负数和0。

然后看下面这个等式：

28937829 * -1239282 = 35862130598778

聪明的你一眼就看出这个等式不对。为什么？因为「正数」乘以「负数」必然得到「负数」。所以我们根本不用运行这个乘法，就知道这个结果不对。

这就是类型好处。

## [类型能让你「大概」知道代码对不对][Link 1] ##

TS 就是在 JS 上加上类型声明，这样我们就能知道代码是否「大概」正确。

另外，这种方式速度非常快，快到你只要修改代码，TS 就能告诉你代码是否「大概」正确。

从而避免很多 bug。

你只需要稍微花一点点时间，就能让代码质量提升，何乐不为呢？

## [听说 TS 只适合大型项目？][TS] ##

错，只要是有 bug 的 JS 项目，都可以用 TS 替代 JS 从而减少 bug。

所以无论是小项目还是大项目，都有必要使用 TS。

## 万一过几年 TS 不火了呢？ ##

这个问题问得好，前端发展这么快，很多东西都是火几年就不火了，导致后期想招人维护都难（比如 AngularJS 1）。

但是 TS 不存在这个问题。为什么？

因为目前前端三大框架全都支持 **[TS][]** 了：

1.  Angular 很早就支持 **[TypeScript][TS]** 了，而且还把 JS 从自己的名字里去掉了：**[AngluarJS][TS]** \-> **[Angular][TS]**。甚至连 Angular 入门文档里的例子都默认是 TS 版本的。用 JS 写 Angular 不是不可以，只是会显得很「奇怪」，明明有更好的 TS，为什么会有人用 JS。
2.  **[Vue 3.0][TS]** 用 TS 重写了，为了更好的支持 TS，甚至放弃了原本计划推出的 class API。
3.  **[React][TS]**一开始对 TS 的支持也是非常丝滑。不过 React 并没有强绑定到 TS。

如果有一年 TS 不火了，上面框架的维护者会提前为你想好升级方案的，你就不必过多担心了。

毕竟背靠大树好乘凉。

## JS 岂不是白学了？ ##

No No No，TS 里面包含了 JS 的所有语法，所以你在用 TS 的时候，实际上还是在用 JS。

也就是说 JS 的魂还在，我们只是不再单独使用 JS 了。

## 结论 ##

快点学 TypeScript 吧，它很快就是一线互联网公司面试加分项甚至必备项了。

[Link 1]: https://juejin.im/post/5d19b0305188254e2e4e78e8
[TS]: http://edu.duolaimier.cn/forum.php