TypeScript学习 (一)

什么是 TypeScript

TypeScript 是一种由微软开发的自由和开源的编程语言，它是 JavaScript 的一个超集，扩展了 JavaScript 的语法。

安装 TypeScript

通过 npm 安装

$ npm install typescript -g

以上命令会在全局环境下安装 tsc 和 tsserver 两个命令，安装完成之后，我们就可以在任何地方执行它了。

tsserver

TypeScript 独立服务器(又名 tsserver )是一个节点可执行文件，它封装了 TypeScript 编译器和语言服务，并通过 JSON 协议公开它们。tsserver 非常适合编辑器和 IDE 支持。

一般工作中不常用到它。进一步了解tsserver

tsc

tsc 为 typescript compiler 的缩写，即 TypeScript 编译器，用于将 TS 代码编译为 JS 代码。使用方法如下：

$ tsc index.ts

编译成功后，就会在相同目录下生成一个同名 js 文件，你也可以通过命令参数来修改默认的输出名称。

默认情况下编译器以 ECMAScript 3（ES3）为目标。可以通过 tsc -h 命令查看相关帮助，可以了解更多的配置。

我们约定使用 TypeScript 编写的文件以 .ts 为后缀，用 TypeScript 编写 React 时，以 .tsx 为后缀。

Hello TypeScript（例子）

结合 tsc 命令，我们一起写一个简单的例子。

创建一个 index.ts 文件。

let text: string = 'Hello TypeScript'

执行 tsc index.ts 命令，会在同目录下生成 index.js 文件。

var text = 'Hello TypeScript';

一个简单的例子就实现完了。我们可以通过官网提供的 Playground 进行验证。

但是在项目开发过程中我们会结合构建工具，如 webpack，和对应的本地服务 dev-server 等相关工具一同使用。

项目根目录中有一个 tsconfig.json 文件，简单介绍其作用。

tsconfig.json

如果一个目录下存在一个 tsconfig.json 文件，那么它意味着这个目录是 TypeScript 项目的根目录。tsconfig.json 文件中指定了用来编译这个项目的根文件和编译选项。 一个项目可以通过以下方式之一来编译：

• 不带任何输入文件的情况下调用 tsc，编译器会从当前目录开始去查找 tsconfig.json文 件，逐级向上搜索父目录。
• 不带任何输入文件的情况下调用 tsc，且使用命令行参数 --project（或 -p ）指定一个包含 tsconfig.json 文件的目录。

当命令行上指定了输入文件时，tsconfig.json文件会被忽略。