请解释 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 代码：

// www.javascriptcn.com code example
class Animal {
  constructor(public name: string) {}
}

class Dog extends Animal {
  constructor(name: string, public breed: string) {
    super(name);
  }
}

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

// www.javascriptcn.com code example
var __extends = (this && this.__extends) || (function () {
    var extendStatics = function (d, b) {
        extendStatics = Object.setPrototypeOf ||
            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
        return extendStatics(d, b);
    };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();

var Animal = /** @class */ (function () {
    function Animal(name) {
        this.name = name;
    }
    return Animal;
}());

var Dog = /** @class */ (function (_super) {
    __extends(Dog, _super);
    function Dog(name, breed) {
        var _this = _super.call(this, name) || this;
        _this.breed = breed;
        return _this;
    }
    return Dog;
}(Animal));

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

// www.javascriptcn.com code example
import { __extends } from "tslib";

var Animal = /** @class */ (function () {
    function Animal(name) {
        this.name = name;
    }
    return Animal;
}());

var Dog = /** @class */ (function (_super) {
    __extends(Dog, _super);
    function Dog(name, breed) {
        var _this = _super.call(this, name) || this;
        _this.breed = breed;
        return _this;
    }
    return Dog;
}(Animal));

总结

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