microsoft / microsoft/TypeScript

Support for directory named module

Ouverte
#45,402 2 commentaires 18 réactions 0 personnes assignées Voir sur GitHub

Personne n'a encore pris cette issue.

Awaiting More Feedback Suggestion
Langage dominant
Go
Étoiles
111k
Forks
14.4k
Merge moyen
1 j 19 h
PR mergées (30 j)
117

Description

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

Guide de contribution

Ouvrir le guide de contribution

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Piste de recherche

Commencez par lire l’issue TypeScript #24116 liée et la solution proposée dans le commentaire référencé, puis comparez le comportement demandé avec la conception existante de la résolution des modules. Le travail est terminé lorsqu’un import d’un répertoire résout son fichier TSX du même nom sans exiger le nom de fichier, tout en préservant le comportement existant de index.tsx.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
typescript
Domaine
compilers
Type d'issue
Fonctionnalité
Difficulté
5/5
Temps estimé
Plus d'une semaine
Activité
À l'abandon
Clarté
Plutôt claire
Accessibilité débutants
35/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.