Ordna kod med hjälp av namnområden med flera filer

Slutförd

Du kan utöka namnområden genom att dela dem i flera TypeScript-filer. När du har namnområden i flera filer som är relaterade till varandra måste du lägga till reference taggar för att berätta för TypeScript-kompilatorn om relationerna mellan filerna. Anta till exempel att du har tre Typescript-filer:

  • interfaces.ts, som deklarerar ett namnområde som innehåller vissa gränssnittsdefinitioner.
  • functions.ts, som deklarerar ett namnområde med funktioner som implementerar gränssnitten i interfaces.ts.
  • main.ts, som anropar funktionerna i functions.ts och representerar programmets huvudkod.

Om du vill informera TypeScript om relationen mellan interfaces.ts och functions.ts lägger du till en reference i interfaces.ts med hjälp av syntaxen för trippelsnedstreck (///) överst i functions.ts. Och sedan i main.ts, som har en relation med både interfaces.ts och functions.ts, lägger du till en reference i båda filerna.

Two files that use namespaces are able to describe the relationship using reference statements. The file functions.ts has a relationship with interfaces.ts and main.ts has a relationship with interfaces.ts and functions.ts.

När det finns en referens till mer än en fil börjar du med namnområdet på den högsta nivån och arbetar dig sedan nedåt. TypeScript använder den här ordningen när filerna kompileras.

Kompilera namnområden för flera filer

Det finns två sätt att kompilera flera filnamnområden: kompilering per fil och enkel filkompilering.

När du kör TypeScript-kompilatorn på main.ts granskar reference den som standard instruktionerna i filen och skapar en JavaScript-fil för varje indatafil. Om du väljer det här alternativet använder du <script> taggar på webbsidan för att läsa in varje genererad fil i rätt ordning.

Du kan också instruera kompilatorn att skapa en enda JavaScript-utdatafil med hjälp --outFile av alternativet . I exemplet ovan instruerar kommandot tsc --outFile main.js main.ts kompilatorn att skapa en enda JavaScript-fil med namnet main.js.