TypeScript 开发环境完整搭建指南

在开始之前，请确保计算机已正确安装 Node.js。若未安装，请参考相关的 Node.js 安装图文教程完成基础环境配置。

1. 安装 TS 环境

首先，进入项目所在的文件夹目录，执行命令 进行初始化。该操作会在当前目录下生成一个 package.json 文件，用于管理项目依赖。

接下来需要安装 TypeScript 编译器。如果安装过程中遇到权限报错，请尝试以管理员身份运行终端或检查权限设置。

推荐进行全局安装，执行命令 cnpm i typescript -g 。这种方式便于在任意项目中使用 tsc 命令。

若希望将依赖限制在当前项目内，可选择本地安装，执行命令 cnpm i typescript -D。

注： 是 的简写形式，两者效果一致。

初始化完成后，在项目根目录下生成 tsconfig.json 配置文件，用于定义 TypeScript 的编译选项。

 tsc --init  

打开生成的 tsconfig.json 文件并进行必要配置。需要注意的是，配置中的 dist（输出目录）、src（源文件目录）和 package.json 必须位于同一个父级目录下，否则编译路径可能出错。

"outDir":  "./dist"     //ts编译后生成js文件保存到dist文件夹中
"rootDir": "./src",  //自己编写的ts源文件在src文件夹中
"target": "es5", //编译出来的js文件兼容es5语法

在 src 目录下新建一个示例文件，例如 base.ts，用于后续编译测试。

//创建一个字符串类型的变量str
let str: string = 'hello word';
console.log( str);

执行命令 对 src 目录及其子目录下的所有 .ts 文件进行编译。编译后的 JavaScript 文件将统一输出到 dist 目录中。

tsc

为了实现开发过程中的自动编译，可以启用监听模式。

tsc --watch

2. 安装 ts-node

ts-node 工具允许 Node.js 直接执行 TypeScript 代码，无需预先使用 tsc 将其编译为 JavaScript，从而简化调试流程。

推荐全局安装 ts-node，执行命令 cnpm i ts-node -g ，以便在终端中全局调用。

若需本地安装，执行命令 cnpm i ts-node -D。

安装完成后，在包含 .ts 文件的目录下，直接运行 即可在终端中执行该 TypeScript 文件。

ts-node base.ts

3. 安装 nodemon

nodemon 是一个用于 Node.js 应用程序的开发辅助工具。它能自动检测目录中的文件变更，并自动重启应用程序，极大提升开发效率。

推荐全局安装 nodemon，执行命令 cnpm install -g nodemon。

若需本地安装，执行命令 cnpm i nodemon -D。

在 package.json 文件的 scripts 字段中配置自动检测与重启脚本，以便通过 npm 命令启动开发服务器。

 "scripts": {  //如果已经存在直接将下边的粘进去即可
     "start": "nodemon --watch src/ -e ts --exec ts-node ./src/base.ts"
}

• --watch src/：指定监听目录为 package.json 同级目录下的 src 文件夹。
• -e ts：指定 nodemon 监听的文件扩展名为 .ts。
• --exec ts-node ./src/base.ts：当检测到 src 目录下文件发生变化时，自动重新执行 base.ts 文件。

启动监听src目录 start 为第2步配置时的命名，对应即可

npm start

4. Parcel 打包支持浏览器运行 TS 文件

首先安装 Parcel 打包工具，执行命令：npm install -g parcel-bundler。

在 package.json 所在目录新建 index.html 文件，并在其中引入需要在浏览器中展示的 TypeScript 源文件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入的是ts文件 -->
    <script src="./src/base.ts"></script>
</head>
<body>
    
</body>
</html>

在 package.json 的 scripts 字段中添加启动项，以便通过 npm 命令调用 Parcel 工具包。

"scripts": {
  "startParcel": "parcel ./index.html"  //注意：如果配置中已经有start，可以命名为别的
},

执行 命令启动 Parcel 服务。

 npm  run startParcel 

若上述命令执行报错，可尝试使用 替代，以解决可能的权限或路径问题。

 cnpm  run startParcel 

至此，TypeScript 开发环境的搭建步骤已全部介绍完毕。如需了解更多相关内容，请搜索本站过往文章或继续浏览后续教程。感谢支持！