本文为系列文章《TypeScript 简明教程》中的一篇。
前言
通过前一篇文章,相信大家对 TypeScript 有了基本的了解,对 TypeScript 的价值也有了一定的认识。不过,光说不练假把式,本节我们学习如何搭建 TypeScript 的开发环境。
TypeScript 官方提供了一个 Playground。你可以在左侧输入 TypeScript 代码,右侧会自动显示出编译后的 JavaScript 代码,十分方便。
事实上,你完全可以跳过下面内容,直接在 Playground 中书写后面教程中的 TypeScript 代码,待到大概熟悉 TypeScript 的语法后,再回头看本节内容。
全局安装 TypeScript
使用如下命令安装 TypeScript 命令行工具:
npm install -g typescript
复制代码
从安装结果我们可以看出,以上命令在全局环境下安装了两条命令:tsc
和 tsserver
。其中,tsserver
主要用于为编辑器和 IDE 等 提供语义支持,一般来说不常用到。
常用的是 tsc
命令。tsc
为 typescript compiler
的缩写,即 TypeScript 编译器,用于将 TS 代码编译为 JS 代码。使用方法很简单:
tsc index.ts
复制代码
作为约定,使用 TypeScript 编写的文件应以 .ts
为后缀。用 TypeScript 编写 React 时,应使用 .tsx
后缀,而不是 .jsx
。
Example
首先,我们新建一个 TS 文件 main.ts
。输入以下代码:
// 创建一个 sayHi 函数,具有一个参数 person
// person 必须为字符串
function sayHi(person: string) {
return `Hi, ${ person }`
}
sayHi('Hopsken')
复制代码
使用 tsc
命令编译,它会在当前目录下生成编译好的 JS 文件。
tsc main.ts
复制代码
编译后的 JS 代码:
function sayHi(person) {
return "Hi, " + person;
}
sayHi("Hopsken");
复制代码
可以看到,原先 TypeScript 中的类型注解已经被移除,生成的文件中不包含任何类型判断的代码。
此外,细心的同学可能已经注意到了,原先的 TS 代码中我们使用 ES6 的模板字符串语法,但在生成的 JS 中,编译器自动将其转换成了 ES5 的语法。这就是 TypeScript 为我们带来的另一个好处,有了它,我们就可以放心的使用 JavaScript 新特性了。
那么,如果 TS 源码中存在错误呢?比如说,在本该传入 string
的地方传入了 number
。我们在上述程序中做出如下修改:
sayHi(42)
复制代码
再次编译,
可以看到,编译器会自动报出相关错误,并给出相关提示。
注意,尽管编译器会报出错误,但其仍然会生成『有问题』的 JS 文件!
下期预告
从下一期开始,我们将正式介绍 TypeScript 的基本语法。下一节,我们将学习 TypeScript 中的基本类型和类型推论。
附:关于编辑器
目前,主流的编辑器都支持 TypeScript。不过,这里还是要着重推荐一下 Visual Studio Code。
它是一款免费、开源、跨终端的编辑器。由 MicroSoft 开发,与臃肿的 Visual Studio 系列 IDE 不同,这是一款现代化、轻量级的编辑器。
最重要的是,VSCode 本身就是用 TypeScript 编写的,自身内置了 TypeScript 支持。不管是代码补全、接口提示,还是定义跳转、代码重构等等,都可以轻松应对。
获取其他编辑器或 IDE 对 TypeScript 的支持: