TypeScript 模块

注意: 如果您是 TypeScript 新手，请先查看我们的 TypeScript 入门 教程。

TypeScript 模块是包含 TypeScript 代码的文件，可以在其他 TypeScript 文件中导入和使用。

例如，假设我们有两个.ts文件：square.ts和app.ts。

• 在square.ts中，我们定义并导出一个用于计算平方的函数，使该文件成为一个模块。
• 然后，在app.ts中，我们从square.ts导入该平方函数来使用它。

这里，square.ts是一个模块。

如果您现在不理解，不用担心。我们将在下面详细介绍。

TypeScript 模块

让我们考虑之前讨论过的两个.ts文件：square.ts和app.ts。

square.ts（模块）

此文件通过定义一个函数并使其可供其他文件使用来充当模块。它包含以下内容：

// Function that calculates square of a number
export function square(number: number): number {
    return number * number;
}

请注意，我们使用了export关键字来使该函数在square.ts文件之外可用。

app.ts（使用模块）

此文件使用square.ts模块中定义的函数。在app.ts文件中，我们将square()函数导入为：

// Import the square() function from the square.ts module
import { square } from './square';

// Use the imported function to compute the square 
console.log(square(4)); 

请注意，我们使用了import关键字从square.ts模块导入square()函数。

如果要导入的函数、对象或类型是命名导出，则用花括号{ }括起来。

注意：导入模块时，不包含.ts扩展名——只需文件名（例如，import { square } from './square';）。

导出多个对象

也可以从模块中导出多个对象。例如：

在square.ts文件中：

// Export the name variable
export const name: string = "TypeScript Program";

// Export the square() function
export function square(number: number): number {
    return number * number;
}

在app.ts文件中：

import { name, square } from './square';

console.log(name);
let result = square(6);
console.log(result); // 36

这里，

import { name, square } from './square';

这会从square.ts文件导入name变量和square()函数。

重命名导入和导出

如果您想导入的对象（如变量或函数）与主文件中已有的对象同名，程序可能不会按预期运行。

在这种情况下，程序会使用主文件中的值，而不是导入的文件。

为避免命名冲突，您可以在导出或导入时重命名函数或变量。

1. 在模块中重命名（导出文件）

假设我们有一个名为module.ts的模块文件。在该文件中，我们可以重命名对象以避免冲突。

在module.ts中，

function checkStatus(): void {
    console.log("Checking status...");
}

function updateProfile(): void {
    console.log("Updating profile...");
}

// Export two functions with
// new names to avoid conflicts
export { checkStatus as getStatus, updateProfile as refreshProfile };

在这里，我们在导出时为函数指定了新的名称：

• getStatus 对应于checkStatus()函数
• refreshProfile 对应于updateProfile()函数

我们可以像这样在主文件main.ts中导入它们：

在main.ts中：

import { getStatus, refreshProfile } from './module';

getStatus();  // Checking status...
refreshProfile();  // Updating profile...

2. 在导入文件中重命名

或者，您可以保留模块中的原始名称，并在将它们导入主文件时选择新名称。

在module.ts中：

function checkStatus(): void {
    console.log("Checking status...");
}

function updateProfile(): void {
    console.log("Updating profile...");
}

// Export two functions with original names
export { checkStatus, updateProfile };

在main.ts中：

// import two functions with new
// names to resolve naming conflicts
import { checkStatus as getStatus, updateProfile as refreshProfile } from './module';

getStatus();        // Checking status...
refreshProfile();   // Updating profile...

默认导出

在 TypeScript 模块中，默认导出允许您指定一个主要项（函数、类、对象等）从文件中导出。

在module.ts中：

function checkStatus(): void {
    console.log("Checking status...");
}

function updateProfile(): void {
    console.log("Updating profile...");
}

// Default export of updateProfile function
export default updateProfile;

在这里，我们使用了default关键字来默认导出updateProfile()函数。

在main.ts中：

当我们导入默认导出时，我们可以随意命名它，而无需使用花括号。

// Import the default export using any name (no curly braces needed)
import profileUpdater from './module';

profileUpdater(); // Output: Updating profile...

注意：一个文件可以包含多个命名导出，但只能有一个默认导出。

export function greet(): void {
    // Attempt to use an undeclared variable
    // throws an error in strict mode
    message = "Hello";
    console.log(message);
}

另请阅读

• TypeScript 函数
• TypeScript 泛型