web-dev-qa-db-fra.com

Structure de répertoire pour les projets TypeScript

Quelle serait une structure de répertoires idiomatique pour un projet TypeScript?

Je voudrais les fonctionnalités suivantes dans une telle structure:

  1. Répertoires séparés pour le code source TypeScript et JavaScript transpilé
  2. Répertoires séparés pour le code source du projet et le code de test
  3. Mécanisme pour résoudre les références à travers les tests et le code source.
typescriptdirectory-structureconventionstypescript1.8
25
codematix

On dirait que je me trompais. J'essayais la structure suivante:

src
|---- lib
|-----|---- mymodule.ts
|---- tests
|-----|---- mymodule.tests.ts

Cependant, j'essayais de compiler le code source sous le répertoire lib séparément du code de test sous tests.

find src/lib -name *.ts | xargs tsc --declaration --sourceMap --module commonjs --target es5 --listFiles --outDir lib

puis le code des tests:

find src/tests -name *.ts | xargs tsc --declaration --sourceMap --module commonjs --target es5 --listFiles --outDir tests

Le dossier tests avait ainsi un autre sous-répertoire lib et un sous-répertoire tests. Ce n'était pas ce que j'avais l'intention d'avoir.

Pour résoudre mon problème, je devais les compiler ensemble, alors maintenant ma commande est:

find src -name *.ts | xargs tsc --declaration --sourceMap --module commonjs --target es5 --listFiles --outDir .

Merci à tous pour votre aide.

5
codematix

Séparation du JS généré du TS source

Je recommanderais de générer une sortie à fichier unique. Que ce soit un navigateur ou pour Node, c'est juste une meilleure idée. Gardez à l'esprit que la plupart des IDE peuvent masquer les fichiers .gitignore D, donc un volet de fichiers épuré ne devrait pas peut être un problème à atteindre, même si vous laissez le .js les fichiers se trouvent juste à côté de leurs fichiers .ts.

Vous pouvez utilisez techniquement --outDir pour produire comme vous le souhaitez en configurant votre tsconfig.json De manière appropriée.

Séparation des tests de la source

C'est assez banal! Maintenez simplement un /tests. Les importations fonctionnent simplement par traversée de répertoire comme import {MyClass} from "../src/modules/my-class" (Où ../ Doit sortir de /tests).

Mécanisme de résolution des références

C'est plus difficile dans le navigateur que sur Node - ce dernier a requires fonctionnant hors de la boîte pour TypeScript.

Sur le navigateur

Je vous recommande fortement d'utiliser quelque chose comme webpack, mais si vous insistez pour vivre la vie du côté dangereux, voici une exigence conviviale que j'utilise pour parcourir rapidement le code TypeScript sans avoir de configuration de processus de construction.

require() pour le navigateur

  • Pas pour les cœurs faibles - c'est la dette technologique que vous accumulerez

Étant donné que les chemins absolus sont nécessaires pour les importations Web de travail, voici comment vous pouvez utiliser mon require() pirater avec TypeScript (généralement pour une session de débogage rapide qui ne nécessite pas de reconstruction).

/entities/user.ts

import {Username} from "../entities/username";
import {Password} from "../entities/password";

export class User {
    username: Username;
    password: Password;
}

Où Username et Password sont exported classes dans /entities/username.ts Et /entities/password.ts Respectivement.

Bien que ../entities/ Puisse sembler superflu, notez qu'il est essentiel que le navigateur ait des chemins absolus appropriés vers nos entités Username et Password. :)

11
Angad

Il est très difficile de donner des conseils concrets, car cela dépend énormément de la taille du projet, des outils, de la plate-forme, etc.

  1. Le compilateur TypeScript a une option --outDir que vous pouvez utiliser pour sortir dans un répertoire séparé. Cependant, vous aimeriez probablement également regrouper, donc la sortie dans un seul fichier pourrait être plus préférable, tant que vous créez des fichiers map ainsi que pour le débogage. Vous pouvez très bien structurer tout cela avec Gulp par exemple.
  2. Qu'est-ce que cela a à voir avec la structure du répertoire? Si vous voulez le diviser, alors divisez-le
  3. Le "mécanisme" est très large et dépend des outils que vous utilisez. Par exemple, le lanceur de test peut "importer" le code de production avant le code de test. Vous pouvez également utiliser une bibliothèque de chargement de modules, etc.
3
Denis Biondic