跳到主要内容

TypeScript 与JavaScript代码混用

TypeScript 是 JavaScript 的超集，这意味着任何有效的 JavaScript 代码也是有效的 TypeScript 代码。然而，在实际开发中，我们可能会遇到需要在 TypeScript 项目中混用 JavaScript 代码的情况。本文将详细介绍如何在 TypeScript 中与 JavaScript 代码互操作，并通过实际案例帮助你更好地理解这一概念。

1. 为什么需要混用 TypeScript 和 JavaScript？​

在以下场景中，你可能需要在 TypeScript 项目中混用 JavaScript 代码：

  • 逐步迁移：将现有的 JavaScript 项目逐步迁移到 TypeScript。
  • 使用第三方库：某些第三方库可能只提供了 JavaScript 版本。
  • 遗留代码：项目中可能包含一些尚未迁移的 JavaScript 代码。

2. 如何在 TypeScript 中使用 JavaScript 代码​

2.1 直接引入 JavaScript 文件​

TypeScript 允许你直接引入 JavaScript 文件。假设你有一个 JavaScript 文件 math.js：

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

module.exports = { add };

你可以在 TypeScript 文件中直接引入并使用它：

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

console.log(add(2, 3)); // 输出: 5

2.2 为 JavaScript 代码添加类型声明​

为了在 TypeScript 中获得更好的类型检查和代码提示，你可以为 JavaScript 代码添加类型声明文件（.d.ts）。例如，为 math.js 创建一个 math.d.ts 文件：

typescript
// math.d.ts
export function add(a: number, b: number): number;

这样，TypeScript 就能正确推断 add 函数的类型。

2.3 使用 allowJs 和 checkJs 配置​

在 tsconfig.json 中，你可以启用 allowJs 和 checkJs 选项，以允许 TypeScript 编译和检查 JavaScript 文件：

json
{
  "compilerOptions": {
    "allowJs": true,
    "checkJs": true
  }
}
  • allowJs：允许 TypeScript 编译 JavaScript 文件。
  • checkJs：对 JavaScript 文件进行类型检查。

3. 实际案例：逐步迁移 JavaScript 项目到 TypeScript​

假设你有一个简单的 JavaScript 项目，包含以下文件：

javascript
// utils.js
function greet(name) {
  return `Hello, ${name}!`;
}

module.exports = { greet };
javascript
// index.js
const { greet } = require('./utils');

console.log(greet('World'));

3.1 第一步：重命名文件​

将 utils.js 重命名为 utils.ts，并添加类型注解：

typescript
// utils.ts
export function greet(name: string): string {
  return `Hello, ${name}!`;
}

3.2 第二步：更新 index.js​

将 index.js 重命名为 index.ts，并更新导入语句：

typescript
// index.ts
import { greet } from './utils';

console.log(greet('World'));

3.3 第三步：配置 tsconfig.json​

确保 tsconfig.json 中包含以下配置：

json
{
  "compilerOptions": {
    "allowJs": true,
    "checkJs": true,
    "outDir": "./dist",
    "rootDir": "./src"
  },
  "include": ["src/**/*"]
}

3.4 第四步：编译并运行​

使用 TypeScript 编译器 (tsc) 编译项目，并运行生成的 JavaScript 代码：

bash
tsc
node dist/index.js

4. 总结​

在 TypeScript 项目中混用 JavaScript 代码是一个常见的需求，尤其是在逐步迁移或使用第三方库时。通过直接引入 JavaScript 文件、添加类型声明文件以及配置 tsconfig.json，你可以轻松实现 TypeScript 与 JavaScript 的互操作。

5. 附加资源与练习​

通过本文的学习，你应该已经掌握了如何在 TypeScript 项目中混用 JavaScript 代码。继续实践和探索，你将更加熟练地使用 TypeScript 进行开发。