跳到主要内容

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 使用 allowJscheckJs 配置

tsconfig.json 中,你可以启用 allowJscheckJs 选项,以允许 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 进行开发。