TypeScript模块知识详解

TypeScript 模块知识详解

面向编程小白的模块系统全面指南 – 用通俗语言讲解核心概念

什么是模块？

想象你有一本厚厚的百科全书，你不会带着整本书到处走，而是只带需要的章节。在编程中，模块就像这些章节。

模块是独立的代码文件，将相关功能组织在一起。TypeScript 使用模块来：

分割大型程序为小文件
避免命名冲突
提高代码复用性
控制代码的可见性（哪些可被外部使用）

                        // 文件：math.ts (模块文件)
                        export function add(a: number, b: number) {
                            return a + b;
                        }
                    

导出(export) – 分享你的代码

导出就像把商品摆上货架，让其他模块可以”购买”（使用）它们。

主要导出方式：

命名导出：导出多个项目
默认导出：每个模块只能有一个

                        // 命名导出
                        export const PI = 3.14;
                        export function circleArea(r: number) {
                            return PI * r * r;
                        }
                        
                        // 默认导出
                        export default class Calculator {
                            // 类实现...
                        }
                    

导入(import) – 使用他人代码

导入就像从商店购买商品，让你可以使用其他模块的功能。

导入方式对应导出方式：

                        // 导入命名导出
                        import { PI, circleArea } from './math';
                        
                        // 导入默认导出
                        import Calculator from './Calculator';
                        
                        // 导入全部并命名
                        import * as MathUtils from './math';
                        MathUtils.circleArea(5);
                    

导入路径中的 ‘./’ 表示从当前目录导入，这是非常重要的细节！

模块 vs 命名空间

TypeScript 有两种组织代码的方式：

模块：基于文件（推荐方式）
命名空间：旧方法，现在基本被模块取代

                        // 模块方式（现代方式）
                        // file: shapes.ts
                        export class Circle { /* ... */ }
                        
                        // file: app.ts
                        import { Circle } from './shapes';
                    

                        // 命名空间方式（旧方式）
                        namespace Shapes {
                            export class Circle { /* ... */ }
                        }
                        
                        // 使用
                        let circle = new Shapes.Circle();
                    

对于新项目，优先使用模块！

模块解析策略

TypeScript 如何找到你导入的模块？

两种策略：

Classic：旧策略，用于向后兼容
Node：模拟 Node.js 的模块查找方式（推荐）

在 tsconfig.json 中配置：

                        {
                            "compilerOptions": {
                                "moduleResolution": "node"
                            }
                        }
                    

Node 策略查找顺序：

检查当前目录的 node_modules
向父目录查找，直到根目录
检查全局安装的模块

模块文件扩展名

TypeScript 支持多种模块格式：

                        // 导入 TypeScript 文件
                        import { myFunc } from './module'; // 查找 module.ts 或 module.tsx
                        
                        // 导入 JavaScript 文件
                        import { helper } from './utils'; // 查找 utils.js 或 utils.jsx
                        
                        // 导入 JSON 文件
                        import data from './config.json';
                    

实际查找顺序取决于你的配置和运行环境。

最佳实践：导入时省略 .ts 扩展名，让打包工具处理细节。

命名导出 vs 默认导出

命名导出

一个模块可以有多个命名导出
导入时需要明确指定导入项
支持按需导入
重命名导入：import { fn as myFn } from './module'
推荐用于工具函数、常量等

                        // 导出
                        export const version = '1.0';
                        export function log(msg: string) { ... }
                        
                        // 导入
                        import { version, log } from './utils';
                    

默认导出

一个模块只能有一个默认导出
导入时可自定义名称
简化主要功能的导入
常用于类、大型功能组件
可与命名导出共存

                        // 导出
                        export default class User { ... }
                        export const MAX_AGE = 120;
                        
                        // 导入
                        import UserModel, { MAX_AGE } from './models';
                    

实用小贴士

在 tsconfig.json 中设置 "module": "ES2015" 或 "module": "CommonJS" 根据你的运行环境
使用 import type 仅导入类型，减少运行时开销
组织模块：按功能而非类型划分文件（如 user/ 目录包含所有用户相关模块）
避免循环依赖（模块A导入B，B又导入A）
使用 index.ts 文件作为模块的入口点
第三方库：使用 npm install @types/库名 获取类型定义

常见问题解决方案

问题： 无法找到模块”xxx”或其相应的类型声明

解决：

检查模块路径是否正确（区分相对路径 './myModule' 和绝对路径 'src/myModule'）
确保已安装依赖（npm install）
对于JS库，创建声明文件：declare module '库名';
在 tsconfig.json 中添加路径映射：

                "compilerOptions": {
                    "baseUrl": ".",
                    "paths": {
                        "@utils/*": ["src/utils/*"]
                    }
                }
            