microsoft / microsoft/TypeScript

Interoperability with Webpack import statements

Offen
#38,094 1 Kommentar 5 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

Needs Proposal Suggestion
Vorherrschende Sprache
Go
Sterne
111k
Forks
14.3k
Ø Merge
2 T. 4 Std.
Gemergte PRs (30 T.)
132

Beschreibung

Hello!

First of all, thank you for your hard and amazing work.

The thing is, that Webpack supports more complex import statements than the standard. For example it defines "query" part of the import statements, which looks like this:

import { something } from './path/to/module?query';

The ./path/to/module is an actual filesystem path to a referenced module, however, the ?query is a query part. It allows to configure different loaders for different queries, so the same module could be treated differently in different import statements.

For example import component from './component'; would import the default symbol from the ./component module normally, however, import component from './component?raw'; could be used to load the source code of the ./component file as a string and would put it into component variable (this must be configured in Webpack config). This allows to perform very powerful operations on various files and add it to the resulting bundle. We are using it to generate documentation for example.

The problem is that TypeScript doesn't understand these "extended" import statements and shows errors during type checking. We have to either put @ts-ignore on top of such imports or to use paths configuration option to redirect the compiler to a file containing, e.g.: export default '';.

If TypeScript would support interoperability with extended Webpack import statements it would be very useful in complex projects.

By the way, besides "queries", Webpack also allows to specify loaders inline.

What do you think?

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

Das Issue identifiziert Webpack-Query- und inline-loader-Import-Anweisungen, nennt aber keine TypeScript-Dateien, Tests oder Einstiegspunkte. Beginne damit, die Pfade für die Modulauflösung und die Typprüfung zu lokalisieren, und ermittle anschließend, wie die Unterstützung spezifiziert und getestet werden sollte; abgeschlossen bedeutet, dass diese Imports keine Typprüfungsfehler mehr erzeugen.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
typescript, webpack
Bereich
build-system, compilers
Issue-Typ
Feature
Schwierigkeit
5/5
Geschätzter Aufwand
Über eine Woche
Aktivitätsstatus
Veraltet
Klarheit
Muss geklärt werden
Anfängerfreundlichkeit
25/100

Neue Issues direkt in Ihr Postfach

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