编译 TypeScript - 技术栈

浏览器不能直接运行 TypeScript 代码，需要编译为 JavaScript 再交由浏览器解析器执行。

1. 命令行编译

要把 .ts 文件编译为 .js 文件，需要配置 TypeScript 的编译环境。步骤如下：

第一步：创建一个 demo.ts 文件

例如：

typescript 复制代码

const person = {
  name: "李四",
  age: 18
}
console.log(`我叫${person.name}，我今年${person.age}岁了`)

第二步：全局安装 TypeScript

bash 复制代码

npm i typescript -g

第三步：使用命令编译 .ts 文件

bash 复制代码

tsc demo.ts

编译报错

bash 复制代码

tsc --ignoreConfig demo.ts

2. 自动化编译

第一步：创建 TypeScript 编译控制文件

bash 复制代码

tsc --init

工程中会生成一个 tsconfig.json 配置文件，其中包含着很多编译时的配置。
观察发现，默认编译的 JS 版本是 ES7，我们可以手动调整为其他版本。
需要将tsconfig.json 文件中这几个配置改为false，不然会生成多余的 .js.map 文件。如下：

json 复制代码

    "sourceMap": false,
    "declaration": false,
    "declarationMap": false,

第二步：监控目录中的 .ts 变化

bash 复制代码

tsc --watch 或 tsc -w

第三步：小优化（当编译出错时不生成 .js 文件）

bash 复制代码

tsc --noEmitOnError --watch

备注：当然你也可以修改 tsconfig.json 中的 noEmitOnError 配置来实现相同效果。

自动执行编译后的js

nodemon 是一个用于监视文件变化并自动重启 Node.js 进程的工具

bash 复制代码

npm install --save-dev typescript nodemon

配置自动执行脚本
打开你的 package.json，在 scripts 中添加一条命令，让 nodemon 监听编译后的 JS 文件（假设你的编译输出目录是 dist，入口文件是 index.js）：

json 复制代码

"scripts": {
  "dev": "nodemon dist/index.js"
}

启动自动编译

bash 复制代码

npm run dev

让多个服务在同一个终端窗口里并行运行

oncurrently 是前端和 Node.js 开发中非常主流的做法

bash 复制代码

npm install --save-dev concurrently

修改 package.json 的 scripts

JSON 复制代码

  "scripts": {
    "build:watch": "tsc --watch",
    "start:watch": "nodemon test.js",
    "dev": "concurrently -n tsc,node -c blue,green \"npm run build:watch\" \"npm run start:watch\"",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

使用 ts-node-dev

ts-node-dev 是基于 ts-node 的一个开发工具，它允许你使用 TypeScript 编写 Node.js 应用程序，并且会自动编译 TypeScript 文件。

安装依赖

bash 复制代码

npm install -D ts-node-dev  @types/node

注意和node 版本兼容问题

修改 package.json 的 scripts

json 复制代码

"scripts": {
  "dev": "ts-node-dev --respawn src/test.ts"
}

使用 tsx

安装依赖

bash 复制代码

npm install -D tsx @types/node

修改 package.json 的 scripts

json 复制代码

"scripts": {
  "dev": "tsx watch index.ts"
}