原文链接 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 等打包工具.
来源: https://juejin.im/post/5c9484796fb9a070df1664cf