打字稿编译器发出不可读的代码答案

【问题标题】：Typescript compiler emits unreadable code打字稿编译器发出不可读的代码
【发布时间】：2021-07-27 15:50:45
【问题描述】：

我正在编写一个 chrome 扩展，审查的要求之一是代码可读。当我使用异步函数时，tsc 会发出非常不可读的信息，如下所示：

var __generator = (this && this.__generator) || function (thisArg, body) {
    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
    function verb(n) { return function (v) { return step([n, v]); }; }
    function step(op) {
        if (f) throw new TypeError("Generator is already executing.");
        while (_) try {
            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
            if (y = 0, t) op = [op[0] & 2, t.value];
            switch (op[0]) {
                case 0: case 1: t = op; break;
                case 4: _.label++; return { value: op[1], done: false };
                case 5: _.label++; y = op[1]; op = [0]; continue;
                case 7: op = _.ops.pop(); _.trys.pop(); continue;
                default:
                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
                    if (t[2]) _.ops.pop();
                    _.trys.pop(); continue;
            }
            op = body.call(thisArg, _);
        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
    }
};

因此，我的扩展名被 CWS 拒绝了。是否有插件可以保持发出的 js 可读？

【问题讨论】：

你确定你在构建过程中没有其他东西导致缩小/丑化吗？默认情况下，TS 不会执行此操作 afaik。寻找 webpack、gulp、babel 等设置。或者，也许您的目标 ECMA 标准比我更老。
这是异步函数在转译为 ES5 时的样子。如果您转译的其余代码有些可读性，我怀疑这会导致任何问题。谷歌的人应该足够“专业”来识别这个代码。 :)
附带说明，这就是为什么我不建议人们在浏览器代码中使用 async/await 的原因，因为它会膨胀包大小并增加（理论上的）性能损失。旧的.then() 和.catch() 更适合浏览器。 :)

标签： typescript tsc

【解决方案1】：

由于 chrome 扩展程序仅适用于基于 chromium 的浏览器，因此您不必担心转换为旧版浏览器支持的 JavaScript。

这意味着您可以在tsconfig 文件中增加target。因为更少的转换被做打字稿应该产生更易读的代码。

在您的 tsconfig.json 文件中添加/更改它。

  "compilerOptions": {
    "target": "ES6",
  }

【讨论】：

谢谢！原来我的目标是 tsconfig.js 中的 ES3。我现在的目标是 esnext。