microsoft / microsoft/TypeScript

`verbatimModuleSyntax` leaves empty curly brackets in the JS output

未关闭
#62,239 1 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看

还没有人认领这个 Issue。

Domain: ES Modules Help Wanted Possible Improvement
主要语言
Go
星标
111k
派生
14.3k
平均合并
2 天 4 小时
30 天内合并 PR
132

描述

### 🔎 Search Terms

"verbatimModuleSyntax", "curly brackets", "empty brackets"

### 🕗 Version & Regression Information

- This is the behavior in every 5.x version I tried, and I reviewed the FAQ for entries about `verbatimModuleSyntax`

### ⏯ Playground Link

https://www.typescriptlang.org/play/?jsx=4&verbatimModuleSyntax=true&ts=5.9.2#code/JYWwDg9gTgLgBASRAQwOYFMA0cDeMCeY6iKGAClBGAM4C+cAZpSHAEQB26AHjAPShp0AOgBW1VgG4AUFO6RYcACboGyAK4AbeAzXsAxjGAR2JQQHUoyMESgAKMJRoAuU+UfUAlLilxfcKOgwalAmADxIgrhC0Q5UdLwAfFK0UkA

### 💻 Code

```tsx
import Image, {type ImageProps} from "next/image.js";

export default function ImageWrapper(props: ImageProps) {
return
}
```

### 🙁 Actual behavior

TS produces the following JS output when `verbatimModuleSyntax` is set to `true`:

```js
import { jsx as _jsx } from "react/jsx-runtime";
import Image, {} from "next/image.js";
export default function ImageWrapper(props) {
return _jsx(Image, Object.assign({}, props));
}
```

Notice the empty curly brackets in the import statement that were left off after removing type-only named imports.

### 🙂 Expected behavior

The empty curly brackets are unnecessary in this case. It is precisely the output TS produces when `verbatimModuleSyntax` is not enabled:

```js
import { jsx as _jsx } from "react/jsx-runtime";
import Image from "next/image.js";
export default function ImageWrapper(props) {
return _jsx(Image, Object.assign({}, props));
}
```

https://www.typescriptlang.org/play/?jsx=4&verbatimModuleSyntax=false&ts=5.9.2#code/JYWwDg9gTgLgBASRAQwOYFMA0cDeMCeY6iKGAClBGAM4C+cAZpSHAEQB26AHjAPShp0AOgBW1VgG4AUFO6RYcACboGyAK4AbeAzXsAxjGAR2JQQHUoyMESgAKMJRoAuU+UfUAlLilxfcKOgwalAmADxIgrhC0Q5UdLwAfFK0UkA

### Additional information about the issue

_No response_

贡献指南

打开贡献指南

从这里开始

  1. 先读完整个 Issue,再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库,在一个分支上完成修改。
  4. 提交 Pull Request,并在描述里引用这个 Issue 编号。

调研方向

从链接的 TypeScript Playground 复现开始,使用 verbatimModuleSyntax 和 issue 中所示的 TSX import。比较启用和不启用该选项时生成的输出;当仅用于类型的具名 import 被移除,且 JavaScript import 中没有留下空的大括号时,即表示完成。

由索引模型根据 Issue 内容生成。

评估

技术栈
typescript
领域
compilers
Issue 类型
缺陷
难度
3/5
预计耗时
1-2 天
活跃度
停滞
描述清晰度
基本清楚
新手友好度
45/100

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。