正文

如何使用 TypeScript (TS) 引用 JavaScript (JS) 对象

/0 浏览量
0409

在 TypeScript 中，引用 JavaScript 对象是一个常见的需求，尤其是在混合使用 TypeScript 和 JavaScript 的项目中。以下是如何在 TypeScript 中引用 JavaScript 对象的详细步骤和说明。

1. 直接导入 JavaScript 文件

如果你有一个 JavaScript 文件，其中包含你想要在 TypeScript 中使用的对象，你可以直接在 TypeScript 文件中导入它。

示例：

假设你有一个名为 my-js-object.js 的 JavaScript 文件，其中包含一个对象 myObject：

// my-js-object.js
export const myObject = {
  name: "Alice",
  age: 25
};

在 TypeScript 文件中，你可以这样导入：

// ts-file.ts
import { myObject } from './my-js-object.js';

console.log(myObject.name); // 输出: Alice

2. 使用 require 语法

如果你不想使用 ES6 的 import 语法，可以使用 CommonJS 的 require 语法来导入 JavaScript 对象。

示例：

在 TypeScript 文件中：

// ts-file.ts
const myObject = require('./my-js-object.js');

console.log(myObject.name); // 输出: Alice

请注意，使用 require 语法时，你需要确保你的 TypeScript 配置文件（tsconfig.json）中启用了对 CommonJS 的支持。

3. 使用 import * as 语法

如果你想导入一个 JavaScript 文件中所有的导出，可以使用 import * as 语法。

示例：

在 TypeScript 文件中：

// ts-file.ts
import * as myObject from './my-js-object.js';

console.log(myObject.name); // 输出: Alice

这种方式会创建一个命名空间，你可以通过 myObject 访问所有导出的对象。

4. 使用 import() 动态导入

如果你需要动态地导入 JavaScript 对象，可以使用 import() 函数。

示例：

在 TypeScript 文件中：

// ts-file.ts
async function loadMyObject() {
  const myObject = await import('./my-js-object.js');
  console.log(myObject.default.name); // 输出: Alice
}

loadMyObject();

这种方式特别适合在需要按需加载模块时使用。

5. 在模块内直接引用

如果你需要在同一个模块内部引用另一个模块的对象，可以直接使用 require 或 import。

示例：

假设你有一个名为 module-a.ts 的文件，你想要在 module-b.ts 中引用它：

// module-a.ts
export const myObject = {
  name: "Alice",
  age: 25
};

// module-b.ts
import { myObject } from './module-a';

console.log(myObject.name); // 输出: Alice

总结

在 TypeScript 中引用 JavaScript 对象非常简单，你可以根据需要选择合适的导入方式。无论你使用哪种方法，都要确保你的 TypeScript 配置文件（tsconfig.json）正确设置，以便正确处理导入。

-- 展开阅读全文 --