Chinese version of TypeScript Tutorial – Project introduction
TypeScript Tutorial Chinese version – Section 0. preface
TypeScript Tutorial Chinese version – Section 1. An introduction to
TypeScript Tutorial Chinese version – Section 2. Basic types of
TypeScript Tutorial Chinese version – Section 3. Control flow statement
TypeScript Tutorial Chinese – Section 4. function
TypeScript Tutorial Chinese version – Section 5. class
TypeScript Tutorial Chinese version – Section 6. interface
TypeScript Tutorial Chinese version – Section 7. High-level types
TypeScript Tutorial Chinese version – Section 8. The generic
TypeScript Tutorial Chinese version – Section 9. The module
Chinese version of TypeScript Tutorial – Section 10.node.js

Section 9. The module

The module

The original address

In this tutorial, you’ll learn about modules in TypeScript and how to use them to refactor your code.

An introduction to TypeScript modules

Since ES6, JavaScript has begun to support modules as a native feature of the language. TypeScript is consistent with the JavaScript concept of modules.

A module executes in its own scope, not in the global scope, which means that when you declare variables, functions, classes, interfaces, and so on in a module, they are not visible outside the module unless you use the export statement to explicitly export them.

On the other hand, if you want to access variables, functions, classes, etc., in another module, you need to use the import statement to import them.

Like ES6, TypeScript files are treated as modules when they contain the top-level import or export keywords.

Create a module

We create a new module named validator. ts and declare an interface named Validator:

export interface Validator {
  isValid(s: string) :boolean;
}
Copy the code

In this module, we put the export keyword in front of the interface keyword to export it so that it can be used by other modules. In other words, if you do not use the export keyword, the Validator interface is private in the Validator.ts module and cannot be used by other modules.

Export statement

Another way to export declarations from a module is to use the export statement, as follows:

interface Validator {
  isValid(s: string) :boolean;
}

export { Validator };
Copy the code

TypeScript also allows module users to rename declarations like this:

interface Validator {
  isValid(s: string) :boolean;
}

export { Validator as StringValidator };
Copy the code

In this example, the other modules will use the StringValidator interface.

Import a new module

To use a module, use the import statement. Create a new module emailValidator.ts that uses the validator.ts module:

import { Validator } from './Validator';

class EmailValidator implements Validator {
  isValid(s: string) :boolean {
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    returnemailRegex.test(s); }}export { EmailValidator };
Copy the code

When you import a module, you can rename it as follows:

import { Validator as StringValidator } from './Validator';
Copy the code

In the EmailValidator module, replace the Validator interface with the StringValidator interface.

import { Validator as StringValidator } from './Validator';

class EmailValidator implements StringValidator {
  isValid(s: string) :boolean {
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    returnemailRegex.test(s); }}export { EmailValidator };
Copy the code

Here’s how to use the EmailValidator module in an app.ts file:

import { EmailValidator } from './EmailValidator';

let email = '[email protected]';
let validator = new EmailValidator();
let result = validator.isValid(email);

console.log(result);
Copy the code

Output:

true
Copy the code

The import type

The following type is declared in the types.ts module:

export type alphanumeric = string | number;
Copy the code

To import alphanumeric from the types.ts module, you can use the import Type statement:

import type { alphanumeric } from './Types';
Copy the code

Note that TypeScript supports import type statements starting with version 3.8, and uses import statements prior to version 3.8:

import { alphanumeric } from './Types';
Copy the code

Import everything from the module

To import everything in the module, use the syntax shown below:

import * from 'module_name';
Copy the code

To export

A new module named ZipcodeValidator.ts is created using the validator.ts module:

import { Validator } from './Validator';

class ZipCodeValidator implements Validator {
  isValid(s: string) :boolean {
    const numberRegexp = / ^ [0-9] + $/;
    return s.length === 5&& numberRegexp.test(s); }}export { ZipCodeValidator };
Copy the code

You can package the EmailValidator and ZipCodeValidator modules into a new module by exporting all of them together using the syntax shown below:

export * from 'module_name';
Copy the code

The following example demonstrates how to wrap emailValidator. ts and ZipcodeValidator. ts modules in formValidator. ts

export * from './EmailValidator';
export * from './ZipCodeValidator';
Copy the code

The default is derived

TypeScript allows each module to have a default export. To mark an export as a default, you use the default keyword. Here’s how to mark the ZipCodeValidator class as the default export:

import { Validator } from './Validator';

export default class ZipCodeValidator implements Validator {
  isValid(s: string) :boolean {
    const numberRegexp = / ^ [0-9] + $/;
    return s.length === 5&& numberRegexp.test(s); }}Copy the code

To import the default export, use the syntax shown below:

import default_export from 'module_name';
Copy the code

Here’s how to use the ZipCodeValidator module’s default export in app.ts files:

import ZipCodeValidator from './ZipCodeValidator';

let validator = new ZipCodeValidator();
let result = validator.isValid('95134');

console.log(result);
Copy the code

Output:

true
Copy the code

summary

TypeScript is consistent with the ES6 Module concept of modules. A module can contain both declaration and implementation code;
In a module, variables, functions, classes, interfaces, and so on are allowed in their own scope, not in the global scope;
useexportStatements export variables, functions, classes, interfaces, types, etc.
useimportStatement imports content exported by another module.

TypeScript Tutorial Chinese version – Section 9. The module