TypeScript import JavaScript 详解|极客教程

TypeScript import JavaScript 详解

TypeScript 是由 Microsoft 开发的一种开源、跨平台的编程语言。它是 JavaScript 的一个超集，可以编译成纯 JavaScript 代码。在 TypeScript 中，我们可以使用 import 和 export 关键字来进行模块化开发。在本文中，我们将详细介绍 TypeScript 中如何导入 JavaScript 文件。

导入 JavaScript 文件

在 TypeScript 中，我们可以使用 import 关键字来导入 JavaScript 文件。但是需要注意的是，TypeScript 不支持直接导入 JavaScript 文件，而是将其视为模块。下面是一个简单的示例，演示如何导入一个 JavaScript 文件。

// math.js
export function add(a, b) {
  return a + b;
}

// main.ts
import { add } from './math.js';

const result = add(1, 2);
console.log(result);

在上面的示例中，我们创建了一个名为 math.js 的 JavaScript 文件，其中导出了一个 add 函数。然后在 main.ts 文件中使用 import 关键字来导入该函数，并调用它。当我们使用 TypeScript 编译器编译 main.ts 文件时，它会将其编译成 JavaScript 文件，如下所示：

// main.js
import { add } from './math.js';
const result = add(1, 2);
console.log(result);

解析错误

如果 TypeScript 遇到无法解析的 JavaScript 文件时，它会输出错误信息。例如，如果在导入一个不存在的 JavaScript 文件时，会出现类似以下的错误：

[ts] Cannot find module './notfound.js'.

这意味着 TypeScript 找不到指定的 JavaScript 文件。请确保文件路径和文件名正确，并且文件存在于指定的位置。

导入默认导出

除了具名导出，JavaScript 还支持默认导出。在 TypeScript 中，我们可以使用 import 关键字来导入默认导出的 JavaScript 文件。下面是一个简单的示例：

// math.js
export default function add(a, b) {
  return a + b;
}

// main.ts
import add from './math.js';

const result = add(1, 2);
console.log(result);

在上面的示例中，math.js 文件使用 export default 导出了一个 add 函数。然后在 main.ts 文件中使用 import add from './math.js' 来导入该函数。当我们编译 main.ts 文件时，TypeScript 会将其编译成如下 JavaScript 文件：

// main.js
import add from './math.js';
const result = add(1, 2);
console.log(result);

导入全部导出

有时候，我们希望导入一个 JavaScript 文件中的全部导出。在 TypeScript 中，我们可以使用 import * as alias 关键字来导入全部导出的 JavaScript 文件。下面是一个示例代码：

// math.js
export function add(a, b) {
  return a + b;
}
export function subtract(a, b) {
  return a - b;
}

// main.ts
import * as math from './math.js';

const result1 = math.add(1, 2);
const result2 = math.subtract(2, 1);

console.log(result1);
console.log(result2);

在上面的示例中，math.js 文件中导出了 add 和 subtract 函数。在 main.ts 文件中使用 import * as math from './math.js' 语法导入全部导出，并使用 math.add 和 math.subtract 来调用这两个函数。