模块与 tsconfig

这一课你将能做到

1. 用 ES Module import / export 组织代码，区分类型导入和值导入
2. 配置一份适合现代项目的 tsconfig.json，说清每个关键字段的作用
3. 配置路径映射 @/ 别名，并在构建工具里同步生效

为什么要学

模块系统是大型项目的「文件管理系统」。没有模块，所有代码写在一个文件里，改一行就要理解全部。有了模块，每个文件只关心自己的输入（import）和输出（export），职责清晰、依赖透明。

而 tsconfig.json 是 TypeScript 项目的「总控台」：编译目标、模块规范、严格程度、路径别名，全在这里定。项目里 strict: true 到底开了什么？paths 别名为什么 @/ 指向 src？答案都在这一课。

先建立图像

模块化的核心概念：

┌──────────────┐         ┌──────────────┐
│   user.ts    │  export │   app.ts     │
│ 导出：User    │────────▶│ 导入：User   │
│ 导出：format │  import │ 使用：User   │
└──────────────┘         └──────────────┘

类型和值都可以被导出/导入
编译时 TS 检查类型，构建时模块被打包成浏览器/Node 能执行的格式

tsconfig.json 的决策路径：

你的 .ts 源码
    │
    ├── target: ES2020? ES2015? ES5?    （编译成什么版本的 JS）
    ├── module: ESNext? CommonJS?        （用什么模块规范）
    ├── strict: true? false?             （严格程度开关）
    ├── paths: @/* → src/*?              （路径别名）
    └── outDir: dist/?                   （产物目录）

跟着做

新建项目文件夹，逐步实操。

步骤 1：创建项目结构

mkdir module-demo
cd module-demo
mkdir src

创建 src/types.ts：

export interface User {
  id: number;
  name: string;
  email: string;
}

export type Role = "admin" | "editor" | "viewer";

创建 src/user.ts：

import type { User } from "./types";

export function createUser(name: string, email: string): User {
  return { id: Date.now(), name, email };
}

export function formatUser(user: User): string {
  return `#${user.id} ${user.name} <${user.email}>`;
}

创建 src/app.ts：

import { createUser, formatUser } from "./user";

const user = createUser("小明", "ming@example.com");
console.log(formatUser(user)); // #... 小明 <ming@example.com>

编译运行：

tsc --init
tsc
node dist/app.js

步骤 2：导出方式对比