TypeScript - 在 node 中搭建 TS 开发环境＜1-2＞

JS & TS

JS 开发中问题

• js 语言本身的特性，决定了该语言无法适应大型的复杂的项目
• 弱类型：可以随时更换变量的类型
• 解释型：只有当运行时，才能发现错误

TS

• TS 是 JS 的超集，包含了 JS 所有功能
• 会对代码中所有的标识符（变量、函数、参数、返回值）进行类型检查，类型检查发生在编译时，而非运行时
• 类型检查的使用时可选的
• 无论是浏览器环境还是 node 环境都不能直接识别 ts 代码，需先转化成 js

在 node 中搭建 TS 开发环境

TS 安装

PS D:\WebWP\TS\lesson2> npm i -g typescript
PS D:\WebWP\TS\lesson2> tsc index.ts  // 同级目录下会生成一个同名 js 文件

默认情况下， 编译时 TS 会做出以下几种假设：

1. 假设当前的执行环境是 dom（浏览器：有 window、document 等对象）
2. 如果代码中没有使用模块化语句（import、export），便认为该代码是全局执行
3. 编译的目标代码是 ES3

有两种方式更改以上假设：

1. 使用 tsc 命令行时，加上选项参数
2. 使用 ts 配置文件（√）

TS 配置文件

生成 ts 配置文件（tsconfig.json）

1. 手动创建
2. 通过命令行创建 tsc --init

使用了配置文件后，使用tsc进行编译时，不能加文件名，如果加了，会忽略配置文件。

配置环境中没有配置 node 环境的选项，当去掉了浏览器环境后，没有了 window、document 等浏览器全局变量的干扰，但同时也没有 node 环境下的全局变量，可以通过安装第三方库@types/node解决（浏览器下是自带的，不需要安装）。

PS D:\WebWP\TS\lesson2> npm i -D @types/node // 开发依赖 编译时有用 运行时不需要

我安装时遇到了报错：

解决办法：
npm cache clean --force

@types是一个 ts 官方的类型库，当我们需要使用一些不是用 ts 编写的第三方库时，希望第三方库的代码也经过类型检查（ts 中可以直接使用 js 编写的第三方库），就可以去类型库中找对应的库。

JQuery: 用 js 写的，没有类型检查
安装@types/jquery，为 jquery 库添加类型定义

使用第三方库简化执行流程

ts-node: 将 ts 代码在内存中完成编译，同时完成运行

nodemon: 用于监测文件的变化

PS D:\WebWP\TS\lesson2> npm i -g ts-node
PS D:\WebWP\TS\lesson2> npm i -g nodemon
// 当 src 文件夹下 ts 类型文件发生变化的时候 执行 src/index.ts 文件
PS D:\WebWP\TS\lesson2> nodemon --watch src -e ts --exec ts-node src/index.ts

• --watch src：只监测 src 文件夹下文件的变化
• -e ts：只监测 ts 文件
• --exec： 执行