microsoft / microsoft/TypeScript

`verbatimModuleSyntax` leaves empty curly brackets in the JS output

Aperta
#62,239 1 commento 0 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Domain: ES Modules Help Wanted Possible Improvement
Lingua principale
Go
Stelle
111k
Fork
14.3k
Merge medio
1g 19h
PR unite (30g)
117

Descrizione

🔎 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
import Image, {type ImageProps} from "next/image.js";

export default function ImageWrapper(props: ImageProps) {
    return <Image {...props}/>
}
🙁 Actual behavior

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

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:

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

Guida per i contributori

Apri la guida per i contributori

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Direzione di ricerca

Inizia con la riproduzione collegata di TypeScript Playground usando verbatimModuleSyntax e l'import TSX mostrato nell'issue. Confronta l'output generato con e senza l'opzione; il lavoro è completato quando gli import denominati usati solo per i tipi vengono rimossi senza lasciare parentesi graffe vuote nell'import JavaScript.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
typescript
Ambito
compilers
Tipo di issue
Bug
Difficoltà
3/5
Tempo stimato
1-2 giorni
Stato di attività
Ferma
Chiarezza
Abbastanza chiara
Idoneità per principianti
45/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.