逗号表达式 typescript 4.4.x 输出

Question

我有以下输入：

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

export class ActionButton extends ElementBase {
    mount(){
        onMediaChangeSubscribe(this.render)
    }
}

typescript 4.3.x的输出是：

doOnMediaChange_1.onMediaChangeSubscribe(this.render);

和 typescript 4.4.x 执行以下操作：

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

W̶h̶a̶t̶̶t̶h̶e̶̶h̶a̶c̶k̶?̶?̶?̶ 我的问题在这里得到了部分回答：JavaScript syntax (0, fn)(args)，但我想澄清一下。

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

最小复制示例：

a.ts

export function doTheThing(){}

b.ts

import {doTheThing} from './a'

doTheThing()

b.ts 编译为：

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var a_1 = require("./a");
(0, a_1.doTheThing)();

二手 tsconfig.json:

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

Answer 1

此更改已在 microsoft/TypeScript#44624 as a fix to microsoft/TypeScript#35420, and was released with TypeScript 4.4. (Note that there was an earlier fix attempt at microsoft/TypeScript#35877 but this was reverted in microsoft/TypeScript#43993 发布之前实施。）

作为 the other question explains, the difference between foo.bar() and (0, foo.bar)() is that the this context of the former is foo, while in the latter it is undefined (in strict mode 的答案，或者草率模式下的全局对象）。 foo.bar() 将 bar 视为 foo 的方法，而 (0, foo.bar)() 将 bar 视为函数与 foo.

无关

根据 TypeScript 的 module 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 中的问题。解决方法是使用逗号运算符将对导入函数的调用普遍包装起来，如您所见。

逗号表达式 typescript 4.4.x 输出

Comma expression typescript 4.4.x output

typescript

typescript4.0