TypeScript 开发环境搭建工欲善其事必先利其器。TS 的社区提供了很多工具，可以帮助我们提高开发效率，我们可以先

这是我参与11月更文挑战的第4天，活动详情查看：2021最后一次更文挑战

TS 写的代码可以在浏览器上运行？

我们用 TS 写的代码能直接在浏览器上运行吗？

不行，TS 在 JS 的基础上增加了类型系统，所以我们需要使用编译器把 TS 编译为 JS，才能够放在浏览器上去运行。

那如何把 TS 编译成 JS？

我们可以使用官方提供的这个编译器把 TS 编译为 JS。

那我们现在就去学习如何编译 TS 吧。

不要着急。工欲善其事必先利其器。

TS 的社区提供了很多工具，可以帮助我们提高开发效率，我们可以先来学习一下，如何搭建一个高效的 TS 开发环境。

基本开发环境

学习类型系统之前，我们先来搭建一个基本的开发环境。

我们在学习 TypeScript 的过程中，必须要一边学，一边动手练习，才能去掌握它。这也是学习编程最有效的手段。

node.js：nodejs.org/
Visual Studio Code
Cmd/Terminal
Chrome

TypeScript 编译器

TS 官网：www.typescriptlang.org/

有很多种渠道使用 TS：

npm 全局安装 TypeScript，先 npm install -g typescript，然后 tsc helloworld.ts，这样就可以将 TS 编译为 JS
Visual Studio Code
其他编辑器

快捷键打开 VSCode 的集成终端

Ctrl + `
Ctrl + Shift + `

打开终端，运行下面命令

npm install -g typescript
tsc helloworld.ts

习题：使用 TSC 编译 TS 文件，求下面代码块结果

/* 
* index.ts                         // 文件名
* @desc npm install -g typescript // 已安装绕过
* @desc tsc index.ts              // 使用 tsc 将 ts 编译为 js
* @desc node index.js
*/

const num = (index: number): number => {
  return 8 << index;
}
console.log(num(2)); // 结果？

将 ts 编译为 js 的结果，如下

var num = function (index) {
    return 8 << index;
};
num(2);

上面代码块是 index.ts 使用 tsc 编译后得到的代码。所以这个代码块的结果就是表达式 8 << 2的结果。8 << 2 表示将 8 的二进制形式向左移 2 比特位，右边用 0 填充。8 的二进制为 1000，所以 8 << 2 => 100000 => 32。

在 vscode 中初始化项目

Visual Studio Code 的特性

集成终端
代码补全
跳转到定义
代码调试
自定义任务

基本的 TS 项目的目录结构是怎样的？

lib：是编译 TS 的结果。比如里面有 index.js
node_modules：存放 npm 依赖包的地方
src：存放 TS 源码的地方。比如里面有 index.ts
.gitignore：git 仓库的忽略文件列表
package.json：存放项目信息和依赖关系的地方
tsconfig.json：ts 项目的配置文件

tsconfig.json 应该怎么配置？

下面是最基本的 tsconfig.json：

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es2015",
    "outDir": "lib"
  },
  "include": [
    "src/**/*"
  ]
}

compilerOptions：是编译的选项，具体内容后面会详细介绍
include：是指 TS 源码的位置

package.json 应该怎么配置？

我们一般使用下面命令，就可以生成一个 package.json。

npm init # 初始化一个 package.json，需要填写对应的信息
npm init -y

package.json 的内容

{
  "name": "learning-typescript",
  "version": "1.0.0",
  "description": "学习 TypeScript",
  "main": "lib/index.js",
  "directories": {
    "lib": "lib"
  },
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "author": "",
  "license": "MIT"
}

习题：在VSCode中运行下面代码，会提示什么错误？

let animal = 'panda';
animal = 10;

A.不能将类型“10”分配给类型“string”

B.不能将类型“number”分配给类型“string”

C.无法分配“animal”，因为它是常数或只读属性

D.“animal”未分配类型“string”

本问题比较简单，VSCode 运行代码即可得出答案。

let animal = 'panda';

此时 animal 的类型为 string;

animal = 10;

此时将 10 赋予 animal，故选 A。

自定义构建脚本

如何将 source 的 ts 编译到 lib 里面去呢？

我们可以使用之前的 tsc 命令去编译，但是那样的话，每次都需要敲命令，会非常地麻烦，一个更优的方式，是将常用的脚本，写到 package.json 里面的 scripts 里面。

区别之前的全局安装，这次我们使用局部安装，在终端运行下面命令：

npm install typescript --save-dev

这样的话，我们的 typescript 依赖，就会被安装到 devDependencies 里面。同时会生成一个 package-lock.json 文件，可以先不用去管它。

给 package.json 里面的 scripts 添加命令：

"build": "tsc"

上面的 tsc 命令，会使用到我们的 tsconfig.json 的配置，这样就实现了把 source 文件，编译到 lib 文件夹中。

执行下命令

npm run build

我们可以看到 lib 里面的文件已经有了更新。

那现在能不能监听到 src 文件夹下面的文件变化，只要你源代码改变，就会自动编译。

这个时候就可以添加另外一个命令

"build": "tsc --watch"

在终端运行下面命令：

npm start

我们来修改下 src/index.ts 文件，看下 lib/index.js，是否有改变。

package.json 完整的内容

{
  "name": "learning-typescript",
  "version": "1.0.0",
  "description": "学习 TypeScript",
  "main": "lib/index.js",
  "directories": {
    "lib": "lib"
  },
  "scripts": {
    "start": "tsc --watch",
    "build": "tsc",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "MIT",
  "devDependencies": {
    "typescript": "^4.4.3"
  }
}