本文将告诉你如何快速开始使用 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 文件扩展
除了.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
等打包工具。