microsoft / microsoft/TypeScript

Support for directory named module

Offen
#45,402 2 Kommentare 18 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

Awaiting More Feedback Suggestion
Vorherrschende Sprache
Go
Sterne
111k
Forks
14.4k
Ø Merge
1 T. 19 Std.
Gemergte PRs (30 T.)
117

Beschreibung

When creating an application that follows atomic design, you usually want to create 1 folder per module, this folder containing both the tsx file and the scss file.

The issue is that, right now you're forced to either name your tsx files "index.tsx", so that you can import them using 'import "/path/to/DirectoryName"', but then it means that every single file module file in your project now have the same "index.tsx" name, which is a pain.

The other solution is to name your component files the same name as the folder, but now you have to specify the file name in the import. Exemple : 'import "/path/to/DirectoryName/DirectoryName".
But now you have import statements that are longer than needed, and it doesn't force you to name your tsx file correctly (unless you use CI), because it's not a default name anymore.

To have the best of both wold, we'd need for the default name to be either index.tsx or DirectoryName.tsx, so that we can do 'import "/path/to/DirectoryName"' to import /path/to/DirectoryName/DirectoryName.tsx

Webpack already supports this through this plugin : https://www.npmjs.com/package/directory-named-webpack-plugin (25k weekly downloads), so you can get an application that works using this kind of imports.

But the IDE's can't resolve the directory named imports, mostly because TS doesn't support it.

Adding support to this would be greatly appreciated.

This is been an issue for quite a long time, as been documented here : https://github.com/microsoft/TypeScript/issues/24116
This linked above issue also contains a proposed solution by @tylerkayser
@gaui 's comment summarizes that well : https://github.com/microsoft/TypeScript/issues/24116#issuecomment-399724546

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 damit, das verlinkte TypeScript-Issue #24116 und die vorgeschlagene Lösung im referenzierten Kommentar zu lesen, und vergleiche dann das angeforderte Verhalten mit dem bestehenden Design der Modulauflösung. Erledigt ist die Aufgabe, wenn ein Import eines Verzeichnisses seine gleichnamige TSX-Datei auflöst, ohne den Dateinamen zu erfordern, und dabei das bestehende Verhalten von index.tsx erhalten bleibt.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
typescript
Bereich
compilers
Issue-Typ
Feature
Schwierigkeit
5/5
Geschätzter Aufwand
Über eine Woche
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
35/100

Neue Issues direkt in Ihr Postfach

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