The TypeScript module system: a way to organize your code

introduction

The TypeScript module system is a way of organizing code that splits code into small chunks for easy management and maintenance. In modern software development, modularization has become an indispensable development method, and its advantages are obvious: reusability, scalability, maintainability and testability have all been greatly improved.

Why do you need a module system?

• In JavaScript, although functions and variables can be used to organize code, it will be very difficult to organize code in this way when the project becomes larger and the amount of code increases. At this time, we need a better way to organize the code, which is the module system.
• Using the module system can divide the code into multiple small files, each containing only a certain part of the code, so that the code can be better managed, maintained and reused. At the same time, the module system can also help us solve scope problems in JavaScript and avoid problems such as naming conflicts.

The Importance of the TypeScript Module System

• In traditional JavaScript applications, it's common practice to put all the code in the same file. This makes the documentation cluttered and difficult to maintain.
• The TypeScript module system helps us break down code into smaller logical units, making each module easier to maintain and test. Modules also facilitate code reuse because they can be shared across different applications and projects.

The basic idea of ​​modularization

• The basic idea of ​​modularization is to split the code into small pieces, each with its own functions and responsibilities. In TypeScript, a module can be one 类, 接口, 变量, 函数, 命名空间etc. They can be distributed in different files, importreferenced export 关键字and exported through and .
• TypeScript's module system supports two types of module specifications: CommonJSand ES6.
• Among them, CommonJSthe specification Node.jsis the module specification adopted by and is mainly used for 服务器端的 JavaScript 编程; while ES6the specification is the module specification used in front-end development, and its characteristics are 可静态分析, 可编译and 可按需加载等.

Types of the TypeScript module system

• There are two types of module systems in TypeScript, namely 内部模块系统and 外部模块系统.
• Internal module system: Also known as 命名空间, it is namespace 关键字defined by . The main role of the internal module system is 将代码分组to avoid 命名冲突such problems. 虽然内部模块系统可以很好地组织代码，但是它并不能解决代码重用的问题. Therefore, we need to use the external module system.
• External module system: 是指将代码分成多个独立的文件，每个文件是一个单独的模块. The external module system can export 关键字import variables, functions, classes, etc. in import 关键字other modules by exporting variables, functions, classes, etc. in the module. The external module system can organize the code well, and it can also solve the problem of code reuse.

The syntax of the TypeScript module system

• In TypeScript, we use the keywords "import" and "export" to define and export modules. Here is a simple example:

  // file1.ts
  export class MyClass {
        
        
      constructor() {
        
        }
  }
  // file2.ts
  import {
        
         MyClass } from './file1';
  const myClassInstance = new MyClass();
  

• In the above example, we defined a class named MyClass and exported it for use in other modules. Then, in another module, we use the "import" statement to import the MyClass class and create an instance of that class.
• TypeScript supports two ways of importing modules: 默认导入and 命名导入. A default import means importing the default exports from a module. 默认导出是通过 export default 语法定义的，只能有一个. 命名导入是指从模块中通过名称导入导出. Here is an example:

  // default-export.ts
  export default function myFunction() {
        
        }
  // named-export.ts
  export function myFunction() {
        
        }
  // app.ts
  import myDefaultFunction from './default-export';
  import {
        
         myFunction } from './named-export';
  

• In the above example, we defined default and named exported functions. In the app.ts file, we import the myDefaultFunction function using default imports and the myFunction function using named imports.

Directory structure of the TypeScript module system

• When using the TypeScript module system, we need to pay attention to, 模块应该与文件的物理位置保持一致. For example, if we have a folder called "models" in our application, and that folder contains multiple model classes, we should put each model class in a separate file and export it to in the "models" module. An example directory structure is as follows:

  app/
  |--models/
      |--user.ts
      |--product.ts
  |--views/
      |--home.ts
      |--cart.ts
  |--app.ts
  

• In the example above, we put each model class in a separate file and exported them into the "models" module. We also put each view component in a separate file and export them into their own view module. Finally, we import the required modules in the app.ts file.

Summarize

The TypeScript module system is an important tool for organizing code and can help developers maintain and test applications better. Using the import and export keywords, we can define modules and place them in the correct place to maintain the overall application structure. By using default imports and named imports, we can easily access exported classes and functions. If you're developing applications using TypeScript, it's important to understand the TypeScript module system.