TypeScript 模块化

什么是模块化？

TypeScript 模块化是将复杂的程序拆分为互相独立且可重用的部分，以便更好地组织代码、降低耦合性、增加可维护性和可扩展性。TypeScript 提供了丰富的模块功能，使得开发者可以更加方便地使用模块化思想来构建和组织自己的代码。

在 TypeScript 中，模块是指一个独立的文件或代码块，它封装了一组相关的数据和函数，并提供了对外的接口。模块可以包含导出（export）的声明，允许其他模块引用并使用这些导出的内容。模块之间可以通过导入（import）语句建立关联，从而实现代码的组合和复用。

模块的类型

TypeScript 支持两种主要的模块类型：

  • ES 模块化（ESM）：这是 TypeScript 的默认模块类型，它与 JavaScript 中的 ES 模块化标准一致。ESM 模块使用 export 关键字来导出成员，并使用 import 关键字来导入其他模块。
  • CommonJS 模块化：这是 Node.js 中常用的模块化标准。CommonJS 模块使用 exports 对象来导出成员，并使用 require() 函数来导入其他模块。

基本语法

ES

  • 模块导出export
  2. //基础类型
  3. export let t: number = 1;
  5. //函数
  6. let fun = function (name: string, age: number): void {
  7.     console.log(`name:${name},age:${age}`);
  8. }
  9. export {fun};
  11. //类
  12. export class User2{
  13.     name:string;
  14.     age:number;
  15.     address?:string;
  16.     [propName: string]: any;//可以添加任意属性
  17.     constructor(name:string,age:number){
  18.         this.name=name;
  19.         this.age=age;
  20.     }
  22.     sayHello(){
  23.         console.log(`name:${this.name},age:${this.age}`);
  24.     }
  25. }
  28. //类实例
  29. let u2:User2=new User2('rose',18);
  30. export default u2;
  • 模块导入import
  1. //模块化导入
  2. import {t,fun,User2,default as d} from './03Module_Export'
  3. import d3 from './03Module_Export'//等同{default as d}
  4. import * as d4 from './03Module_Export'
  6. //基础类型
  7. let t1:any=t;
  8. t1='122';
  9. console.log(t1);
  10. //函数
  11. fun('jack',12);
  12. //类
  13. let u=new User2('ck',12);
  14. u.sayHello();
  15. //类实例
  16. d.name='rose2';
  17. d3.name='rose3'
  18. //d 和d3指向同一个实例。所以d和d3的name都是rose3;
  19. d.sayHello();
  20. d3.sayHello();
  22. //通过 * as d4 导入所有并重命名
  23. d4.fun('导入所有',15);

CommonJS

  • 模块导出export
  1. let numberRegexp = /^[0-9]+$/;
  2. class ZipCodeValidator {
  3.     isAcceptable(s: string) {
  4.         return s.length === 5 && numberRegexp.test(s);
  5.     }
  6. }
  7. export = ZipCodeValidator;
  • 模块导入require
  1. //CommonJs导入
  2. import zip = require("./04Module_CommJS");
  3. // Some samples to try
  4. let strings = ["Hello", "98052", "101"];
  6. // Validators to use
  7. let validator = new zip();
  9. // Show whether each string passed each validator
  10. strings.forEach(s => {
  11.   console.log(`"${ s }" - ${ validator.isAcceptable(s) ? "matches" : "does not match" }`);
  12. });

模块的编译

TypeScript 模块需要经过编译才能转换为可执行的 JavaScript 代码。编译过程中，TypeScript 会将模块的类型信息保留下来，并生成相应的 JavaScript 代码。

可以使用 tsc 命令来编译 TypeScript 代码。例如，以下命令可以将 ModuleA.ts 和 ModuleB.ts 编译为 JavaScript 代码：

  1. tsc ModuleA.ts ModuleB.ts

生成的 JavaScript 代码将位于与 TypeScript 源文件相同的目录中，但文件扩展名改为 .js。例如，ModuleA.ts 将编译为 ModuleA.js，ModuleB.ts 将编译为 ModuleB.js。

注意事项

  • 在 TypeScript 代码中，可以使用 /// <reference path="..." /> 注释来引用其他 TypeScript 模块。这有助于 TypeScript 编译器更好地理解代码结构和类型信息。
  • 在使用 CommonJS 模块化时，需要在项目根目录的 package.json 文件中添加 "type": "commonjs" 字段。
  • TypeScript 还支持其他一些模块化方案，例如 AMD 和 UMD。
  • ts文件引入js文件时报错。导出导入需要使用CommonJS模块化。
  1. //ts 通过es6 import引入js文件模块会报错 无法写入文件“e:/Study/front/TypeScriptDemo/Basic/04Module_JSES.js”，因为它会覆盖输入文件。
  2. // 可以修改04Module_JSES.js 通过 commonjs 规范导出模块。用module.exports 代替export default。同时引入的地方也要用require代替import
  3. //import JSModule from './04Module_JSES.js';
  5. ./04Module_JSES.js 导出文件内容
  6. const moduleJSES = {
  7.     name:'jack',
  8.     sayHello(){
  9.         console.log(this.name+' say hello');
  10.     }
  11. }
  12. module.exports=moduleJSES;
  14. 导入文件内容
  15. const JSModule = require('./04Module_JSES.js');
  16. JSModule.sayHello();

引用

博文源代码https://github.com/chi8708/TypeScriptDemo/blob/main/Basic/04Module_Import.ts 有关 TypeScript 模块化的更多信息，请参阅以下资源：