microsoft / microsoft/TypeScript

`verbatimModuleSyntax` leaves empty curly brackets in the JS output

Offen
#62,239 1 Kommentar 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

Domain: ES Modules Help Wanted Possible Improvement
Vorherrschende Sprache
Go
Sterne
111k
Forks
14.3k
Ø Merge
2 T. 4 Std.
Gemergte PRs (30 T.)
132

Beschreibung

### 🔎 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_

Beitragsleitfaden

Beitragsleitfaden öffnen

Erste Schritte

  1. Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
  3. Forke das Repository und arbeite in einem Branch.
  4. Öffne einen Pull Request, der die Issue-Nummer nennt.

Rechercherichtung

Beginne mit der verknüpften TypeScript Playground-Reproduktion unter Verwendung von verbatimModuleSyntax und des in der Issue gezeigten TSX-Imports. Vergleiche die generierte Ausgabe mit und ohne diese Option; abgeschlossen ist die Aufgabe, wenn nur für Typen verwendete benannte Imports entfernt werden, ohne leere geschweifte Klammern im JavaScript-Import zu hinterlassen.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
typescript
Bereich
compilers
Issue-Typ
Bug
Schwierigkeit
3/5
Geschätzter Aufwand
1-2 Tage
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
45/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.