为什么 JavaScript 开发者应该使用 TypeScript

如果你是一名 JavaScript 开发人员，你可能已经听说过 TypeScript。

或者你可能已经快速地涉足其中，但其优点却不是立即显而易见的。

或者你的同事在过去两年里一直谈论它，而你很想知道这些炒作是关于什么的。

就我个人而言，我经历过以上三种情况 —— 当我第一次深入 TypeScript 时，我发现作为一个初学者/爱好者，很难在一个地方找到我需要的所有答案。

我希望这篇文章可以：

• 解释为什么你应该学习 TypeScript

• 向你展示我认为TypeScript 的优点，通过示例演示JavaScript和TypeScript 之间的相似性

为什么要使用 TypeScript?
 

让我们从一个例子开始，找出这段 JavaScript 代码中的错误：

function multiply(value) {    return value * 2;}
var myNumber = multiply('2');

你发现了吗？这是一个相当常见的错误——我们的函数multiply 将传入的数字乘以2......但是我们却把它作为字符串传递了过去。

我们不应该乘以一个字符串——我们应该乘以一个数字！

更糟糕的是，我们很容易忽略这个bug，毕竟，当我们运行这个 JavaScript 时，也许是作为网站或 Node.js 应用程序的一部分嵌入，myNumber 将只是 NaN。

现在，想象一下如果我们把 myNumber 传递给另一个函数，并打算把它用作一个数字，在最好的情况下，我们会回溯以找到这个不那么明显的 bug，而在最坏的情况下，我们的代码被推送出去，并导致用户出现意想不到的行为！

而这，就是 TypeScript 被创建的主要原因之一，TypeScript 在这些问题到达运行时之前就捕获了它们，相反，它们在编译时就被捕获了(我马上就会讲到这是什么意思......)

好吧，我很感兴趣，给我一些例子！
 

和很多开发者一样，我通过例子学习，让我们先来看看一些用 JavaScript 写的基本代码片段，然后再看看如何用 TypeScript 来写。

例1：将两个数字相加

JavaScript:

function addTogether(first, second) {    return first + second;}

TypeScript:

function addTogether(first: number, second: number): number {    return first + second;}

示例 2：获取单词的第一个字母

JavaScript:

function getFirstLetter(word) {    return word.slice(0, 1);}

TypeScript:

function getFirstLetter(word: string): string {    return word.slice(0, 1);}

从这些例子中，你可能会惊讶于 TypeScript 和 JavaScript 的相似之处，其实 TypeScript 就是 JavaScript，只是增加了一些特性让开发者的生活更轻松。

我将在一分钟内进行更详细的解释，但首先，这里有一个更复杂的例子：

例3：创建一个新对象，然后访问它的值

JavaScript:

const myObject = {    greeting: 'Hello!'}
console.log(myObject.greeting);

TypeScript:

type MyObjectType = {    greeting: string;}
const myObject: MyObjectType = {    greeting: 'Hello!'}
console.log(myObject.greeting);

TypeScript解是你已经熟知的JavaScript，只是加上六一些额外的辅助，从长远来看，它们会让你的开发生活变得更加容易。

TypeScript 其实(不完全)就是 JavaScript
 

问题是，我们可以尽情地编写 TypeScript 文件，但目前还没有任何一个 web 浏览器能够理解它。

这就是TypeScript 的声望所在，毕竟TypeScript 会编译成纯 JavaScript。

TypeScript 文件是用 .ts 文件扩展名编写的，而 JavaScript 文件是用 .js 文件扩展名编写的。现代浏览器无法理解 TypeScript 文件的本机形式。因此，我们需要将其转换为它可以理解的格式 —— JavaScript!

一旦我们准备好发布我们的 TypeScript 代码，我们可以在我们的 .ts 文件上运行 TypeScript 编译器，命令如下：

tsc -w ./index.ts - outFile ./index.js

在 index.ts TypeScript文件上运行这个代码之后，我们应该会得到一个 index.js 文件，我们可以将它导入到我们的网站，作为 Node.js 应用程序的一部分使用，创建一个 Chrome 扩展 —— 任何你能用 JavaScript 做的事情！

更重要的是，编译器还有另一个功能，它会在我们编写代码时提示错误，甚至让我们知道如何修复它......

尽早发现错误
 

让我们从本文开头的 JavaScript 为例：

function multiply(value) {    return value * 2;}
var myNumber = multiply('2');

让我们写出它在 TypeScript 中的样子......

function multiply(value: number) {    return value * 2;}
var myNumber = multiply('2');

现在，让我们看看当我们尝试用 TypeScript 编译器编译上面的 TypeScript 代码时会发生什么，就像我们在前面章节中学习的那样......

tsc ./index.ts - outFile ./index.js

哦，这可不好。

TypeScript 创建了 index.js 文件，但它告诉我们代码有问题，它明确地告诉我们不能将字符串传递给需要值参数为数字的函数......所以让我们修复这个 bug!

function multiply(value: number) {    return value * 2;}
var myNumber = multiply(2);

现在，当我们再次运行它时......

嘿，看！没有错误！

我们现在可以将  index.js  文件部署到任何我们想要的地方，并且可以确信我们的代码库中没有任何类型错误。

总结
 

这只是冰山一角，甚至不是冰山一角，它几乎就像一个冰块，平衡在冰山的顶部，如果你对此感到兴奋，那么我向你保证，TypeScript 还有更多令人兴奋的地方，它非常方便和有帮助，但也非常强大。

更重要的是，几乎所有主流的前端框架(React.js, Vue, Angular)现在都支持 TypeScript —— 后端框架也是如此，你将能够使用最新的 JavaScript 特性来编写 TypeScript，并且部署几乎在任何地方都能工作的 JavaScript!

 欢迎关注公众号：文本魔术，了解更多