TypeScript 基本结构

TypeScript 项目的基本结构

一个典型的 TypeScript 项目（尤其是使用现代工具链的）会有清晰的目录结构和核心配置文件。下面以一个标准的前端或 Node.js 项目为例，介绍常见的基本结构。

1. 典型目录结构（推荐）

my-ts-project/ ├── src/ # 源码目录（所有 .ts 或 .tsx 文件放在这里） │ ├── index.ts # 入口文件（Node.js）或 main.ts │ ├── app.ts # 主要逻辑 │ ├── utils/ # 工具函数 │ │ └── helper.ts │ ├── types/ # 自定义类型、接口（可选） │ │ └── index.d.ts │ └── components/ # 如果是前端（如 React），放组件 │ └── Button.tsx ├── public/ # 静态资源（前端项目，如 index.html） │ └── index.html ├── dist/ # 编译输出目录（tsc 编译后生成，不要手动修改） ├── node_modules/ # 依赖包 ├── .gitignore ├── package.json # 项目元数据和依赖 ├── tsconfig.json # TypeScript 核心配置文件（最重要！） └── README.md

• src/：所有 TypeScript 源代码都放在这里，便于管理和编译。
• dist/：运行tsc后生成的纯 JavaScript 文件，通常部署这个目录。
• 对于 React + Vite 项目，结构类似，但可能有vite.config.ts。
• 对于 NestJS 等后端框架，会有src/main.ts作为入口。

2. 核心文件：tsconfig.json（必须）

这是 TypeScript 编译器的配置文件，定义了如何编译项目。以下是一个推荐的现代、严格模式基础配置（适用于大多数项目）：

{"compilerOptions":{/* 基础选项 */"target":"ES2022",// 编译目标 JS 版本（可根据需要调整为 ES2020/ESNext）"module":"ESNext",// 模块系统（Vite/Webpack 用 ESNext，Node 用 CommonJS）"lib":["ES2022","DOM"],// 包含的类型库/* 严格模式（强烈推荐全部开启） */"strict":true,// 启用所有严格类型检查"noImplicitAny":true,"strictNullChecks":true,"strictFunctionTypes":true,"strictBindCallApply":true,"strictPropertyInitialization":true,"noImplicitThis":true,"alwaysStrict":true,/* 模块解析 */"moduleResolution":"node",// 或 "nodenext"（Node.js 新模式）"esModuleInterop":true,// 更好兼容 CommonJS 模块"resolveJsonModule":true,// 允许 import json 文件/* 输出控制 */"outDir":"./dist",// 输出目录"rootDir":"./src",// 源码根目录"sourceMap":true,// 生成 .map 文件，便于调试"removeComments":true,// 移除注释/* 其他实用选项 */"skipLibCheck":true,// 跳过第三方库类型检查（加速编译）"forceConsistentCasingInFileNames":true},"include":["src/**/*.ts",// 包含所有 src 下的 ts 文件"src/**/*.tsx"// 如果有 React],"exclude":["node_modules","dist"]}

3. package.json 中的脚本示例

{"name":"my-ts-project","version":"1.0.0","scripts":{"build":"tsc",// 编译：生成 dist 目录"build:watch":"tsc --watch",// 监视模式，文件变化自动重编"start":"node dist/index.js",// 运行编译后的代码"dev":"ts-node src/index.ts"// 使用 ts-node 直接运行 TS（开发时推荐）},"devDependencies":{"typescript":"^5.9","ts-node":"^10.9",// 可直接运行 TS 而不需先编译"@types/node":"^20.0"// Node.js 类型定义}}

4. 入门项目快速搭建步骤

1. 创建文件夹并初始化：

   mkdirmy-ts-project&&cdmy-ts-projectnpminit -y

2. 安装 TypeScript：

   npminstall-D typescript ts-node @types/node

3. 生成 tsconfig.json：

   npx tsc --init

   然后手动修改为上面的推荐配置。

4. 创建 src/index.ts：

   console.log("Hello TypeScript!");interfaceUser{name:string;age:number;}constuser:User={name:"Alice",age:25};console.log(user);

5. 运行：

   npmrun dev# 或 npx ts-node src/index.ts

小结

• 核心三要素：src/（源码） +tsconfig.json（配置） +package.json（脚本和依赖）
• 推荐始终开启"strict": true，养成良好的类型习惯。
• 中大型项目可引入 ESLint + Prettier 进一步规范代码。

如果您想看特定类型项目的结构（如 React + Vite、Next.js、NestJS、Electron 等），或者需要一个完整可运行的示例仓库结构，请告诉我！