从零搭建TypeScript工程

如果你刚开始接触TypeScript，很容易停留在“写类型+tsc编译”的阶段。但在真实工程中，TypeScript从来不是一个“语言孤岛”，而是一整套工程体系。本文会带你从零搭建一个项目模板，覆盖完整工具链。

1. 初始化项目

1.1 创建项目

1
2
3

mkdir my-ts-project
cd my-ts-project
npm init -y

1.2 安装TypeScript

1

npm install typescript -D

初始化配置：

1

npm tsc --init

1.3 推荐tsconfig配置

一个常用配置如下：

2. 标准项目结构

一个可维护的TypeScript项目，一定要从结构开始规范：

• modules：业务模块
• utils：纯函数工具
• types：全局类型
• services：外部接口调用

3. 开发工具链

3.1 运行TypeScript(开发环境)

安装：

1

npm install tsx -D

运行：

1

npx tsx src/index.ts

3.2 监听模式开发

1

npx tsx watch src/index.ts

4. 代码规范(ESLint + Prettier)

4.1 安装ESLint

1
2

npm install eslint -D
npx eslint --init

推荐配置：

• TypeScript
• Node.js
• JSON

4.2 Prettier格式化工具

1

npm install prettier -D

.prettierrc文件内容如下：

4.3 ESLint + Prettier协同

1

npm install eslint-config-prettier -D

5. 测试

推荐使用Vitest。

1

npm install vitest -D

示例测试：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

import { describe, it, expect } from 'vitest';

function sum(a: number, b: number) {
  return a + b;
}

describe('sum function', () => {
  it('should return correct result', () => {
    expect(sum(1, 2)).toBe(3);
  });
});

package.json

6. 构建工具

TypeScript不负责构建，需要外部工具。

方案1：tsc (基础方案)

1

npx tsc

缺点：

• 构建慢
• 不支持现代打包能力

方案2：esbuild (高性能)

1

npm install esbuild -D

特点：

• 极速构建
• 适合中大型项目

方案3：tsup

1

npm install tsup -D

优点：

• 零配置
• 适合库开发

7. 调试(VSCode)

创建.vscode/launch.json：

8. 环境变量管理

安装dotenv：

1

npm install dotenv

使用：

1
2
3

import 'dotenv/config';

console.log(process.env.API_KEY);

9. Git工程规范

Husky (Git hooks)

1

npm install husky -D

commitlint (提交规范)

1

npm install commitlint -D

10. Monorepo工程化

当开始写多个项目时，比如：

• 后端API
• 前端Web
• 公共工具库
• 类型共享包

很快我们就会遇到一些问题：

• ❌ 代码无法复用
• ❌ 每个项目都要独立配置一套 TypeScript / ESLint / 构建工具
• ❌ 依赖管理混乱

于是Monorepo出现了。

10.1 什么是Monorepo？

Monorepo（单仓库多项目）指的是在一个 Git 仓库中管理多个项目（packages）。Vue.js就是一个典型的Monorepo。

结构通常如下：

10.2 为什么用用Mongorepo？

✔ 优势

• 代码复用（shared 包）
• 类型统一（types 包）
• 依赖统一管理
• 版本一致性
• 更适合团队开发

❌ 不适合场景

• 只有一个小项目
• 没有复用需求
• 不准备长期维护

10.3 初始化Mongorepo

10.3.1 安装pnpm

1

npm install -g pnpm

10.3.2 初始化项目

1
2
3

mkdir my-monorepo
cd my-monorepo
pnpm init

10.3.3 创建workspace

pnpm-workspace.yaml

1
2
3

packages:
  - 'apps/*'
  - 'packages/*'

10.4 创建项目结构

10.5 创建共享包(shared)

1
2
3

mkdir -p packages/shared
cd packages/shared
pnpm init

示例代码：

1
2
3

export function formatDate(date: Date) {
  return date.toISOString();
}

在app中使用：

1

import { formatDate } from '@repo/shared';

10.6 配置 TypeScript Monorepo

根目录tsconfig.json：

每个包的tsconfig.json

10.7 使用Turborepo

安装

1
2

pnpm add turbo -D

turbo.json

package.json