正文

如何正确在TypeScript中调用同级目录下的JavaScript文件

/0 浏览量
0508

在TypeScript项目中，有时你可能需要从TypeScript文件中调用同级目录下的JavaScript文件。虽然TypeScript和JavaScript在语法上非常相似，但由于它们编译后的输出不同，直接调用可能会遇到一些问题。以下是如何正确地在TypeScript中调用同级目录下的JavaScript文件的方法。

1. 确保JavaScript文件是可访问的

首先，确保你的JavaScript文件在项目的文件结构中是可访问的。通常，这意味着你的JavaScript文件应该位于TypeScript编译后的输出目录中。

2. 使用import语句

在TypeScript文件中，你可以使用import语句来导入JavaScript文件。以下是一个例子：

// 同级目录下的JavaScript文件：utils.js
export function add(a: number, b: number): number {
    return a + b;
}

// TypeScript文件中调用JavaScript文件
import { add } from './utils';

console.log(add(5, 3)); // 输出：8

在这个例子中，utils.js文件导出了一个名为add的函数，而TypeScript文件通过import语句导入了这个函数。

3. 使用require语句

如果你更喜欢使用CommonJS模块系统，可以使用require语句来导入JavaScript文件：

// 同级目录下的JavaScript文件：utils.js
function add(a: number, b: number): number {
    return a + b;
}

// TypeScript文件中调用JavaScript文件
const { add } = require('./utils');

console.log(add(5, 3)); // 输出：8

在这个例子中，utils.js文件导出了一个名为add的函数，而TypeScript文件通过require语句导入了这个函数。

4. 注意编译选项

在编译TypeScript文件时，确保你的tsconfig.json文件包含了正确的编译选项。以下是一个示例配置：

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "outDir": "./dist",
        "rootDir": "./src",
        "esModuleInterop": true
    }
}

在这个配置中，outDir和rootDir指定了编译后的输出目录和源文件目录。esModuleInterop选项允许TypeScript文件导入CommonJS模块。

5. 总结

通过使用import或require语句，你可以从TypeScript文件中导入同级目录下的JavaScript文件。确保你的JavaScript文件在编译后的输出目录中，并正确配置编译选项。这样，你就可以在TypeScript项目中灵活地使用JavaScript代码了。

-- 展开阅读全文 --