在 Visual Studio Code (VSCode) 中高效使用 TypeScript 进行开发和打包，需要结合合理的配置、工具链和开发流程。以下是详细步骤和最佳实践：
1. 环境准备
1.1 安装必要工具
-
Node.js 和 npm: TypeScript 需要 Node.js 环境。建议安装 LTS 版本。
# 验证安装 node -v npm -v
-
TypeScript 全局安装（可选）：
npm install -g typescript
1.2 VSCode 扩展
安装以下扩展提升开发效率：
-
TypeScript Extension（官方扩展）
-
ESLint（代码规范检查）
-
Prettier（代码格式化）
-
Code Spell Checker（拼写检查）
2. 初始化 TypeScript 项目
2.1 创建项目
mkdir my-ts-project cd my-ts-project npm init -y
2.2 安装 TypeScript
npm install typescript @types/node --save-dev
2.3 生成 tsconfig.json
npx tsc --init
修改 tsconfig.json（关键配置）：
{"compilerOptions": {"target": "ES2020", // 编译目标版本"module": "CommonJS", // 模块系统"outDir": "./dist", // 输出目录"rootDir": "./src", // 源码目录"strict": true, // 启用严格类型检查"esModuleInterop": true, // 兼容 CommonJS/ESM"sourceMap": true, // 生成 SourceMap（调试必需）"skipLibCheck": true // 跳过库类型检查（提升速度）},"include": ["src/**/*"],"exclude": ["node_modules"]
}
3. 开发环境配置
3.1 实时编译与监听
使用 TypeScript 的 --watch 模式自动编译：
npx tsc --watch
或通过 package.json 配置快捷命令：
{"scripts": {"dev": "tsc --watch","build": "tsc"}
}
3.2 结合 ESLint 和 Prettier
-
安装依赖：
npm install eslint prettier eslint-config-prettier eslint-plugin-prettier @typescript-eslint/eslint-plugin @typescript-eslint/parser --save-dev
-
配置
.eslintrc.json：{"root": true,"parser": "@typescript-eslint/parser","plugins": ["@typescript-eslint"],"extends": ["eslint:recommended","plugin:@typescript-eslint/recommended","plugin:prettier/recommended"],"rules": {"@typescript-eslint/no-unused-vars": "warn"} } -
配置
.prettierrc：{"semi": true,"singleQuote": true,"trailingComma": "all" }
4. 调试 TypeScript
4.1 配置调试器
-
在 VSCode 中按
F5创建launch.json，选择 Node.js 环境。 -
修改配置以支持 TypeScript：
{"version": "0.2.0","configurations": [{"type": "node","request": "launch","name": "Debug TS","preLaunchTask": "tsc: build", // 触发编译任务"program": "${workspaceFolder}/src/index.ts","outFiles": ["${workspaceFolder}/dist/**/*.js"],"sourceMaps": true // 启用 SourceMap}] }
5. 打包与构建
5.1 使用 tsc 直接编译
npm run build
5.2 使用打包工具
5.2.1 Webpack
-
安装依赖：
npm install webpack webpack-cli ts-loader --save-dev
-
配置
webpack.config.js：const path = require('path');module.exports = {entry: './src/index.ts',mode: 'production',module: {rules: [{test: /\.ts$/,use: 'ts-loader',exclude: /node_modules/}]},resolve: {extensions: ['.ts', '.js']},output: {filename: 'bundle.js',path: path.resolve(__dirname, 'dist')} }; -
运行打包：
npx webpack
5.2.2 Rollup
-
安装依赖：
npm install rollup rollup-plugin-typescript2 @rollup/plugin-node-resolve --save-dev
-
配置
rollup.config.js：import typescript from 'rollup-plugin-typescript2'; import { nodeResolve } from '@rollup/plugin-node-resolve';export default {input: 'src/index.ts',output: {file: 'dist/bundle.js',format: 'cjs'},plugins: [nodeResolve(), typescript()] };
-
运行打包：
npx rollup -c
5.3 使用现代工具（esbuild/swc）
-
esbuild（极速打包）：
npm install esbuild --save-dev
npx esbuild src/index.ts --bundle --outfile=dist/bundle.js --platform=node
6. 高级优化
6.1 路径别名
在 tsconfig.json 中配置路径别名：
{"compilerOptions": {"baseUrl": ".","paths": {"@/*": ["src/*"]}}
}
同时需在打包工具（如 Webpack/Rollup）中配置对应的别名解析。
6.2 生成声明文件
在 tsconfig.json 中启用声明文件生成：
{"compilerOptions": {"declaration": true,"declarationDir": "types"}
}
7. 项目结构建议
my-ts-project/ ├── src/ │ ├── index.ts │ └── utils/ │ └── helper.ts ├── dist/ ├── types/ ├── node_modules/ ├── tsconfig.json ├── package.json └── .eslintrc.json
8. 推荐工作流
-
使用
tsc --watch或ts-node-dev实时编译和运行。 -
通过 ESLint 和 Prettier 保持代码规范。
-
使用 Webpack/Rollup 进行生产打包。
-
结合
npm scripts管理常用命令：{"scripts": {"dev": "tsc --watch","build": "tsc","lint": "eslint src --ext .ts","bundle": "webpack --mode production"} }
通过以上配置和工具链，可以在 VSCode 中高效开发、调试和打包 TypeScript 项目。
