TypeScript 简明教程:安装 TypeScript

本文为系列文章《TypeScript 简明教程》中的一篇。

  1. 认识 TypeScript
  2. 安装 TypeScript

前言

通过前一篇文章,相信大家对 TypeScript 有了基本的了解,对 TypeScript 的价值也有了一定的认识。不过,光说不练假把式,本节我们学习如何搭建 TypeScript 的开发环境。

TypeScript 官方提供了一个 Playground。你可以在左侧输入 TypeScript 代码,右侧会自动显示出编译后的 JavaScript 代码,十分方便。

事实上,你完全可以跳过下面内容,直接在 Playground 中书写后面教程中的 TypeScript 代码,待到大概熟悉 TypeScript 的语法后,再回头看本节内容。

全局安装 TypeScript

使用如下命令安装 TypeScript 命令行工具:

npm install -g typescript
复制代码

从安装结果我们可以看出,以上命令在全局环境下安装了两条命令:tsctsserver。其中,tsserver 主要用于为编辑器和 IDE 等 提供语义支持,一般来说不常用到。

常用的是 tsc 命令。tsctypescript compiler 的缩写,即 TypeScript 编译器,用于将 TS 代码编译为 JS 代码。使用方法很简单:

tsc index.ts
复制代码

作为约定,使用 TypeScript 编写的文件应以 .ts 为后缀。用 TypeScript 编写 React 时,应使用 .tsx 后缀,而不是 .jsx

Example

首先,我们新建一个 TS 文件 main.ts。输入以下代码:

扫描二维码关注公众号,回复: 5369503 查看本文章
// 创建一个 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 的支持:

猜你喜欢

转载自juejin.im/post/5c78b368e51d453f0a16bd38