在 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 项目。