TypeScript项目化构建过程-优快云博客

本文链接：https://blog.youkuaiyun.com/cc9iixy/article/details/148423245

一、准备工作：确认开发环境

检查 Node.js 和 npm 版本
- 打开终端（Windows 用 cmd 或 PowerShell，macOS/Linux 用终端），输入：
  bash
```
node -v  # 确认 Node.js 版本（建议 v14+）
npm -v   # 确认 npm 版本（建议 v6+）
```
- 若未安装，前往 Node.js 官网下载安装包，按提示完成安装。

安装 TypeScript 编译器

在终端输入：

bash

npm install -g typescript  # 全局安装 TypeScript

验证安装：

bash

tsc -v  # 输出版本号即安装成功

二、创建项目文件夹与结构

新建项目根目录
- 在电脑中选择合适位置（如桌面或开发文件夹），右键 → 新建文件夹，命名为项目名称。
创建源码与输出文件夹
- 在项目根目录下，新建两个子文件夹：
  - src：存放 TypeScript 源码文件（.ts 后缀）
  - dist：存放编译生成的 JavaScript 文件（.js 后缀）
- 命令行操作：
```
mkdir src dist
```

三、初始化 TypeScript 项目

生成 tsconfig.json 配置文件
- 在项目根目录下的终端中输入：
```
tsc --init
```
- 执行后会生成 tsconfig.json 文件，该文件用于配置 TypeScript 编译选项。

修改 tsconfig.json 配置

用文本编辑器（如 VS Code）打开 tsconfig.json，找到以下配置项并修改：

"rootDir": "./src",       // 指定源码根目录为 src 文件夹
"outDir": "./dist",       // 指定编译输出目录为 dist 文件夹

四、初始化 npm 项目

生成 package.json 文件
- 在终端中输入（-y 表示使用默认配置）：
- 生成的 package.json 用于管理项目依赖和脚本。

添加编译脚本（可选）

打开 package.json，在 scripts 字段中添加：

"scripts": {
  "build": "tsc",                // 一次性编译所有 ts 文件
  "watch": "tsc --watch",        // 监听文件变化并自动编译
  "start": "node dist/index.js"  // 运行编译后的 js 文件
}

五、创建 TypeScript 源码文件

在 src 文件夹中新建 ts 文件

例如创建 index.ts：

cd src
touch index.ts  # macOS/Linux 命令
# Windows 可在文件夹中右键新建文本文档，重命名为 index.ts（注意显示文件扩展名）

编写 TypeScript 代码示例

用文本编辑器打开 src/index.ts，输入以下内容：

// 定义一个函数，接收字符串参数并返回
function sayHello(name: string): string {
  return `Hello, ${name}!`;
}

// 调用函数并打印结果
const message = sayHello("TypeScript");
console.log(message);

六、编译与运行项目

方式一：一次性编译（手动）
- 在项目根目录终端中输入：
```
tsc  # 执行后会在 dist 文件夹生成 index.js
```
- 运行编译后的 JS 文件：
```
node dist/index.js  # 输出：Hello, TypeScript!
```
方式二：监听模式（自动编译）
- 在终端中输入（保持终端运行）：
```
tsc --watch  # 或使用 npm 脚本：npm run watch
```
- 此时，修改 src/index.ts 并保存后，dist/index.js 会自动更新。
方式三：通过 npm 脚本运行
- 先编译：
```
npm run build
```
- 再运行：
```
npm run start
```

七、推荐开发工具配置（VS Code）

安装 TypeScript 插件
- 打开 VS Code，点击左侧扩展图标，搜索并安装 TypeScript Language Support 和 ESLint（可选，用于代码规范检查）。
配置自动保存编译
- 点击 VS Code 左下角设置图标 → 用户设置，搜索 typescript.tsc.watch，勾选 启用自动保存时编译。

八、项目目录结构示

my-ts-project/
├── src/                # 源码文件夹
│   └── index.ts       # TypeScript 源文件
├── dist/               # 编译输出文件夹
│   └── index.js       # 生成的 JavaScript 文件
├── tsconfig.json      # TypeScript 配置文件
├── package.json       # npm 项目配置文件
└── package-lock.json  # npm 依赖锁文件（自动生成）