[译] TypeScript 快速学习指南

原文连接 TypeScript Quick Start Guide

本文将告诉你如何快速开始使用 TypeScript，同时探讨一下使用 TypeScript 的优缺点。TypeScript 是 JavaScript 和 Ecma TC39 标准 的超集。TypeScript 赋予咱们在代码中定义简单和复杂静态类型变量的能力。

TypeScript 只是简单的将 JavaScript 和可选的变量类型结合起来。你可使用现代 JavaScript 语法(ES2015+)来写 TypeScript，编译器会将 TypeScript 文件(.ts)转换成 JavaScript 文件(.js)，同时也提供将 JavaScript 代码转译为更早版本(如ES5)代码的能力。

须要注意的是，若是你正在浏览器端使用的模块化解决方案是诸如require()或import / export，那么你仍需使用相似 Webpack, Rollup, 或者 SystemJS 的打包工具。

安装 TypeScript

你可使用 npm

npm install -g typescript
复制代码

或 yarn

yarn global add typescript
复制代码

来安装 TypeScript。全局安装后，就能够在你的终端中使用tsc命令了。

编译a.ts文件

打开你的终端，使用如下命令建立一个目录，这里以ts-simple为例：

mkdir ts-simple
复制代码

使用cd命令进入该文件夹，建立一个index.ts文件。在该文件中，咱们建立一个sayHello函数，函数参数为name，类型为string。

如今，使用 tsc命令来编译你的 index.ts文件：

tsc index.ts
复制代码

该操做会移除函数sayHello中参数的类型约束，建立一个index.js文件，同时转换为 ES5 代码。最终的 js 文件能够安全的运行在浏览器或者 Node 环境。你的 JavaScript 文件看起来多是这样的：

为了验证输出结果，使用以下命令运行该文件：

node index.js
// 控制台输出结果
// "Hello, gitconnected!"
复制代码

TypeScript 对编译错误的处理

使用 TypeScript 的一个好处就是若是你代码中变量类型不符，它会自动捕获到这类错误。好比说，假设上面的例子中，咱们想在传入的参数上调用trim()方法。若是咱们传入的参数是其余类型，就会致使咱们的代码再生产环境下抛出异常，而不是在出错前就捕获它。让咱们来看一下若是向函数中传递一个数组会发生什么：

运行 tsc index.ts，出现以下报错：

要是咱们不使用 TypeScript 来保护咱们防止出现相似错误就把代码部署到生产环境中去的话，用户就会在访问咱们站点时出现这样的 Bug：

额外的 TypeScript 文件扩展

除了.ts文件，你还能够用.d.ts文件来标记某个早期的 js 库中对象的类型，或是使用.tsx文件来在 React 项目中用 TypeScript 写 JSX 语法。

使用 TypeScript 的好处

• 在开发环境下捕获错误。 它容许咱们在代码运行出错前就发现错误。
• 智能提示和代码自动补全。 TypeScript 被市面上主流 IDE 和文本编辑器所支持，好比 VS Code 和 Atom。他们对代码自动补全提供了强大的集成度。提供行内错误识别。
• 提升了代码的可读性。 当你的代码中有强类型变量、函数和对象时，TS提供的结构使得更容易推理新代码， 消除了关于数据该采用什么类型的猜想游戏。
• 使用 ES2015+ 。 TypeScript 编译器能处理全部现代 JavaScript 代码，而且能够向后编译到之前版本的 JS 以实现兼容性。
• 可选的静态类型。 TypeScript 不须要全部内容都静态类型化，所以你能够逐步转换项目为 TypeScript。
• 强大的生态。 自2012年以来 TypeScript 一直的茁壮成长，让它具备一个强大的生态系统。 许多开源软件包自己就内置 TypeScript 类型，使集成更加容易。
• 增长职业机会。 TypeScript 已被许多大型科技公司(包括谷歌和微软)使用整合。 经过学习 TypeScript，你能够在职场中提高竞争力。
• 在 React 中使用 TypeScript 无需再引入 PropTypes。 若是你的 React 项目中使用了 TypeScript，则再也不须要为 React 管理 PropTypes，从而能够更快地捕获错误，并使props与代码中使用的类型更紧密地耦合。

TypeScript的不足之处

• 编写代码须要更高的前期成本。 由于须要写更多的代码，就会使新功能的开发速度变慢，这可能不是每一个公司或创业公司都能接受的，须要再三权衡。
• 又多了一个须要持续跟进最新版本的库。 若是你想保持始终使用最新版本的的 TS，那么每当新版本出来后都须要进行一些重构的工做。
• js 工程师的学习曲线。 TypeScript 会使一些之前只写 JS 的工程师的学习曲线变陡。
• 复杂的类型可能很难搞清楚。 若是要将 TypeScript 集成到现有的代码库中可能会遇到麻烦，好比没法正确输入全部内容并处理复杂的数据结构，由于这些数据结构仅在代码为 JS 时才「正常工做」。
• 代码更啰嗦。 虽然结构最终对程序是有帮助的，但与 JavaScript 相比，你将使用更多代码来编写相同的功能。
• 依然须要使用打包工具。 对于ES2015中模块的import / export语法来讲，仍是须要 Webpack等打包工具。