Katalogstruktur for TypeScript-prosjekter

Hva ville være en idiomatisk mappestruktur for et TypeScript-prosjekt?

Jeg ønsker de følgende funksjonene i en slik struktur:

  1. Separate kataloger for TypeScript-kildekode og transpilert JavaScript
  2. Separate kataloger for prosjektskoden og testkoden
  3. Mekanisme for å løse referanser på tvers av tester og kildekode.

Svar #1

Separere generert JS fra kilde-TS

Jeg vil anbefale å generere en enkeltfilutgang. Enten det er for nettleser eller for Node, er det bare en bedre idé. Husk at de fleste IDE-er kan skjule .gitignored filer, så et ryddig filpanel bør ikke være et problem å oppnå, selv om du lar .js-filene ligge rett ved siden av sine .ts-filer.

Du kan teknisk sett bruke --outDir for å outputte på den måten du ønsker ved å sette opp din tsconfig.json på riktig måte.

Separere tester fra kildekoden

Dette er ganske trivielt! Bare oppretthold en /tests. Importer fungerer enkelt ved å gå gjennom kataloger slik: import {MyClass} from "../src/modules/my-class" (hvor ../ er for å komme ut av /tests).

Mekanisme for å løse referanser

Dette er mer utfordrende i nettleseren enn på Node — sistnevnte har require som fungerer rett ut av boksen for TypeScript.

På nettleseren

Anbefaler på det sterkeste at du bruker noe som webpack, men hvis du insisterer på å leve livet på den farlige siden, her er en nettleservennlig require som jeg bruker for å raskt iterere på TypeScript-kode uten å ha en byggprosess satt opp.

require() for nettleseren

  • Ikke for svake sjeler — dette er teknisk gjeld du vil pådra deg

Siden absolutte stier er nødvendige for å arbeide med web-innføringer, her er hvordan du kan bruke mitt require()-triks med TypeScript (vanligvis for en rask feilsøkingsøkt som ikke krever ombygging).

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

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

Hvor Username og Password er exporterte klasser i /entities/username.ts og /entities/password.ts henholdsvis.

Selv om ../entities/ kan virke overflødig, legg merke til at det er essensielt for at nettleseren skal ha riktige absolutte stier til våre Username og Password enheter. :)

Svar #2

Ser ut som om jeg gjorde det feil. Jeg prøvde følgende struktur:

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

Jeg forsøkte imidlertid å kompilere kildekoden under lib-katalogen separat fra testkoden under tests.

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

og deretter testkoden:

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

Dette førte til at tests-mappen fikk en ny lib-undermappe og en tests-undermappe. Dette var ikke det jeg hadde tenkt å ha.

For å løse problemet mitt trengte jeg å kompilere dem sammen, så nå er kommandoen min:

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

Takk alle sammen for hjelpen.

Relaterte artikler