在 TypeScript 中调用 JavaScript

在 TypeScript 中调用 JavaScript 可以分为两种情况：一是调用全局变量或函数；二是调用模块中的变量或函数。

调用全局变量或函数

如果要在 TypeScript 中调用 JavaScript 中的全局变量或函数，可以直接使用 declare 关键字声明：

 declare const jQuery: any;
 ​
 jQuery('#element').hide(); // 调用 JavaScript 中 jQuery 函数

在上面这个例子中，我们使用 declare 关键字声明了全局变量 jQuery，类型为 any，表示它是任意类型的变量。然后我们就可以在 TypeScript 中使用该变量和其中的函数。

调用模块中的变量或函数

如果要在 TypeScript 中调用 JavaScript 模块中的变量或函数，需要先导入模块，并且需要在 Tsconfig.json 文件中配置模块解析方式。

例如，如果要导入一个 JavaScript 模块：

 // module.js
 export const name = 'module';
 export function printName() {
   console.log(name);
 }

我们可以在 TypeScript 中这样导入模块：

 import { name, printName } from './module.js';
 ​
 console.log(name); // 输出：module
 printName(); // 输出：module

在上面这个例子中，我们使用 import 关键字导入了 JavaScript 模块中的变量和函数，并直接使用它们。

但是，在默认情况下，TypeScript 无法识别 JavaScript 模块中的内容，因此需要在 Tsconfig.json 文件中配置模块解析方式。如果要支持 CommonJS 格式的模块，需要将 "module" 字段设置为 "commonjs"：

 {
   "compilerOptions": {
     "module": "commonjs"
  }
 }

如果要支持 ES6 格式的模块，需要将 "module" 字段设置为 "es6"：

 {
   "compilerOptions": {
     "module": "es6"
  }
 }

导入 JavaScript 模块

在 TypeScript 中使用 JavaScript 模块时，需要先将其编译成一个可用的模块。通常情况下，可以使用 Webpack 或者 Rollup 等构建工具将 JavaScript 模块打包成一个可用的模块。对于不需要打包的 JavaScript 模块，可以使用 import 关键字动态加载模块。

动态导入

TypeScript 支持动态导入模块，可以在需要的时候动态加载模块。使用 import() 函数即可动态导入模块，该函数返回一个 Promise，当模块加载完成后，Promise 的 resolve 函数会返回导入的模块。

 const module = await import('./module.js');
 console.log(module.name); // 输出：module
 module.printName(); // 输出：module

在上面这个例子中，我们使用 import() 函数动态导入了 module.js 模块，并在 Promise 中使用 await 关键字等待模块导入完成。然后就可以使用该模块中的变量和函数。

需要注意的是，动态导入的模块需要在 Tsconfig.json 文件中进行配置，将 "module" 字段设置为 "esnext"：

 {
   "compilerOptions": {
     "module": "esnext"
  }
 }

使用 require 导入

另外一种导入 JavaScript 模块的方式是使用 Node.js 中的 require 函数。需要在 TypeScript 中先定义 require 函数的类型，然后才能使用它导入 JavaScript 模块。

 declare function require(moduleName: string): any;
 ​
 const module = require('./module.js');
 console.log(module.name); // 输出：module
 module.printName(); // 输出：module

在上面这个例子中，我们使用 declare 关键字声明了一个名为 require 的函数，并指定其参数为字符串类型，返回值为任意类型。然后我们就可以使用 require 函数导入 JavaScript 模块，并使用其中的变量和函数。

需要注意的是，使用 require 导入 JavaScript 模块需要在 Tsconfig.json 文件中进行配置。将 "module" 字段设置为 "commonjs"，并将 "allowSyntheticDefaultImports" 字段设置为 true，表示可以允许默认导入。

 {
   "compilerOptions": {
     "module": "commonjs",
     "allowSyntheticDefaultImports": true
  }
 }

结论

在实际项目中，可能需要同时使用 TypeScript 和 JavaScript 进行开发，因此了解如何混用 TypeScript 和 JavaScript 是很重要的。本文介绍了如何在 TypeScript 中调用 JavaScript 和导入 JavaScript 模块，并讲解了一些需要注意的地方。需要注意的是，在使用 JavaScript 模块时，需要将其编译成一个可用的模块或者使用动态导入的方式，这样才能在 TypeScript 中使用该模块。