逗号表达式 typescript 4.4.x 输出

Question

我有以下输入：

\n

import {onMediaChangeSubscribe} from \'../functions/doOnMediaChange\'\n\nexport class ActionButton extends ElementBase {\n    mount(){\n        onMediaChangeSubscribe(this.render)\n    }\n}\n

\n

Typescript 4.3.x 的输出是：

\n

doOnMediaChange_1.onMediaChangeSubscribe(this.render);\n

\n

Typescript 4.4.x 执行以下操作：

\n

(0, doOnMediaChange_1.onMediaChangeSubscribe)(this.render);\n

\n

W\xcc\xb6h\xcc\xb6a\xcc\xb6t\xcc\xb6 \xcc\xb6t\xcc\xb6h\xcc\xb6e\xcc\xb6 \xcc\xb6h\xcc\xb6a\xcc\xb6c\xcc\xb6k\ xcc\xb6?\xcc\xb6?\xcc\xb6?\xcc\xb6\n我的问题在这里部分得到解答：JavaScript 语法 (0, fn)(args)，但我想澄清一下。

\n

为什么 TypeScript 会有这样的变化？

\n

---

\n

最小复制示例：

\n

a.ts

\n

export function doTheThing(){}\n

\n

b.ts

\n

import {doTheThing} from \'./a\'\n\ndoTheThing()\n

\n

b.ts 编译为：

\n

"use strict";\nObject.defineProperty(exports, "__esModule", { value: true });\nvar a_1 = require("./a");\n(0, a_1.doTheThing)();\n

\n

用过的tsconfig.json：

\n

{\n  "compilerOptions": {\n    "module": "commonjs",\n    "target": "es5",\n    "sourceMap": true,\n    "declaration": true,\n    "strict": true,\n    "noImplicitAny": false,\n    "esModuleInterop": true,\n    "resolveJsonModule": true,\n    "downlevelIteration": true\n  },\n  "exclude": [\n    "node_modules"\n  ]\n}\n

\n

Answer 1

此更改作为microsoft/TypeScript#35420的修复在microsoft/TypeScript#44624中实现，并随 TypeScript 4.4 一起发布。（请注意，早期曾在microsoft/TypeScript#35877进行过修复尝试，但在发布之前已在microsoft/TypeScript#43993中恢复。）

正如另一个问题foo.bar()的答案所解释的，和之间的区别在于前者的上下文是(0, foo.bar)()，而后者的上下文是（在严格模式下，或在草率模式下的全局对象）。 视为的方法，而视为与无关的函数。thisfooundefinedfoo.bar()barfoo(0, foo.bar)()barfoo

根据 TypeScript 的模块 target，发出的 Javascript 会将导入的内容放入对象中，因此

import {onMediaChangeSubscribe} from '../functions/doOnMediaChange'

可以发射为

const doOnMediaChange_1 = require("../functions/doOnMediaChange")

然后任何对的引用都onMediaChangeSubscribe需要作为 发出 doOnMediaChange_1.onMediaChangeSubscribe。

当您调用导入的函数时，您希望它像函数一样运行，而不是您要导入的模块的“方法”。好吧，很多时候没有区别，但如果导入函数的主体碰巧引用了this，您确实希望它this是undefined而不是doOnMediaChange_1，否则它将不等同于本机模块的行为。

这本质上是 microsoft/TypeScript#35420 中的问题。解决方法是使用逗号运算符普遍包装对导入函数的调用，如您所见。