请解释 TypeScript 中的 --allowJs 和 --checkJs 编译选项的作用。如何在 TypeScript 项目中使用 JavaScript 文件？

推荐答案

在 TypeScript 项目中，--allowJs 和 --checkJs 编译选项允许你在项目中混合使用 JavaScript 和 TypeScript 文件。

• --allowJs：允许 TypeScript 编译器处理 JavaScript 文件。这意味着你可以在 TypeScript 项目中包含 .js 文件，并且这些文件会被编译为与 TypeScript 文件相同的输出目录。

• --checkJs：在启用 --allowJs 的基础上，--checkJs 选项会强制 TypeScript 编译器对 JavaScript 文件进行类型检查。TypeScript 会根据 JSDoc 注释和类型推断来检查 JavaScript 文件的类型错误。

本题详细解读

--allowJs 的作用

--allowJs 选项的主要作用是允许 TypeScript 项目包含 JavaScript 文件。默认情况下，TypeScript 编译器只会处理 .ts 和 .tsx 文件。启用 --allowJs 后，编译器也会处理 .js 和 .jsx 文件，并将它们编译到输出目录中。

使用场景

• 当你有一个现有的 JavaScript 项目，并且你想逐步迁移到 TypeScript 时，可以使用 --allowJs 来允许 TypeScript 编译器处理现有的 JavaScript 文件。
• 当你需要在 TypeScript 项目中引入第三方 JavaScript 库时，--allowJs 可以帮助你无缝集成这些库。

--checkJs 的作用

--checkJs 选项在 --allowJs 的基础上，进一步对 JavaScript 文件进行类型检查。TypeScript 会根据 JSDoc 注释和类型推断来检查 JavaScript 文件中的类型错误。

使用场景

• 当你希望在 JavaScript 文件中获得类似 TypeScript 的类型检查功能时，可以使用 --checkJs。
• 当你逐步将 JavaScript 项目迁移到 TypeScript 时，--checkJs 可以帮助你在迁移过程中发现潜在的类型问题。

如何在 TypeScript 项目中使用 JavaScript 文件

1. 启用 --allowJs 和 --checkJs： 在 tsconfig.json 文件中，添加或修改以下配置：

   {
     "compilerOptions": {
       "allowJs": true,
       "checkJs": true
     }
   }

2. 编写 JavaScript 文件： 在项目中编写 .js 文件，并使用 JSDoc 注释来提供类型信息。例如：

   /**
    * @param {string} name
    * @returns {string}
    */
   function greet(name) {
     return `Hello, ${name}`;
   }

3. 在 TypeScript 文件中引用 JavaScript 文件： 在 TypeScript 文件中，你可以像引用 TypeScript 模块一样引用 JavaScript 文件。例如：

   import { greet } from './greet.js';
   
   console.log(greet('World'));

通过这种方式，你可以在 TypeScript 项目中无缝使用 JavaScript 文件，并利用 TypeScript 的类型检查功能来提高代码质量。