请解释 TypeScript 中的 --importHelpers 编译选项的作用

推荐答案

--importHelpers 是 TypeScript 编译器的一个选项，用于控制是否从 tslib 库中导入辅助函数。当启用该选项时，TypeScript 会将一些通用的辅助函数（如 __extends、__assign 等）从 tslib 库中导入，而不是在每个文件中生成这些函数的副本。这有助于减少生成的 JavaScript 代码的体积。

本题详细解读

什么是 --importHelpers？

--importHelpers 是 TypeScript 编译器的一个标志，用于优化生成的 JavaScript 代码。TypeScript 在编译过程中会生成一些辅助函数，例如用于实现类继承的 __extends 函数、用于对象合并的 __assign 函数等。默认情况下，这些辅助函数会在每个使用它们的文件中生成一份副本，这会导致生成的代码体积增大。

如何使用 --importHelpers？

要启用 --importHelpers，可以在 tsconfig.json 文件中设置 compilerOptions 下的 importHelpers 选项为 true：

{
  "compilerOptions": {
    "importHelpers": true
  }
}

或者在命令行中使用 --importHelpers 标志：

tsc --importHelpers

tslib 库的作用

tslib 是一个由 TypeScript 团队维护的库，包含了 TypeScript 编译器生成的各种辅助函数。当启用 --importHelpers 时，TypeScript 会从 tslib 库中导入这些辅助函数，而不是在每个文件中生成它们。这样可以显著减少生成的 JavaScript 代码的体积，尤其是在多个文件中使用相同辅助函数的情况下。

示例

假设有以下 TypeScript 代码：

-- -------------------- ---- -------
----- ------ -
  ------------------ ----- ------- --
-

----- --- ------- ------ -
  ----------------- ------- ------ ------ ------- -
    ------------
  -
-

在不使用 --importHelpers 的情况下，编译后的 JavaScript 代码可能会在每个文件中生成 __extends 函数的副本：

-- -------------------- ---- -------
--- --------- - ----- -- --------------- -- --------- -- -
    --- ------------- - -------- --- -- -
        ------------- - --------------------- --
            -- ---------- -- - ---------- ----- -- -------- --- -- - ----------- - -- -- --
            -------- --- -- - --- ---- - -- -- -- --------------------- ---- - ----- --
        ------ ---------------- ---
    --
    ------ -------- --- -- -
        ---------------- ---
        -------- ---- - ---------------- - -- -
        ----------- - - --- ---- - ---------------- - ------------- - ------------ --- ------
    --
-----

--- ------ - --- ------ -- --------- -- -
    -------- ------------ -
        --------- - -----
    -
    ------ -------
-----

--- --- - --- ------ -- --------- -------- -
    -------------- --------
    -------- --------- ------ -
        --- ----- - ----------------- ----- -- -----
        ----------- - ------
        ------ ------
    -
    ------ ----
-----------

而启用 --importHelpers 后，编译后的代码会从 tslib 中导入 __extends 函数：

-- -------------------- ---- -------
------ - --------- - ---- --------

--- ------ - --- ------ -- --------- -- -
    -------- ------------ -
        --------- - -----
    -
    ------ -------
-----

--- --- - --- ------ -- --------- -------- -
    -------------- --------
    -------- --------- ------ -
        --- ----- - ----------------- ----- -- -----
        ----------- - ------
        ------ ------
    -
    ------ ----
-----------

总结

--importHelpers 是一个非常有用的编译选项，特别是在大型项目中，它可以显著减少生成的 JavaScript 代码的体积，并提高代码的可维护性。通过从 tslib 库中导入辅助函数，而不是在每个文件中生成这些函数的副本，可以避免代码重复，并优化构建结果。