I TypeScript, när ska man använda reference och när ska man använda import?

I TypeScript finns det två begrepp för att referera till filer/moduler. Även om jag gick igenom TypeScript-dokumentationen kort är det oklart för mig när vilken metod bör användas:

  1. Triple-Slash-referens: /// <reference path="..." />
  2. Import: import { Foo } from "./Foo";

Tack

Svar #1

Det är viktigt att förstå att detta inte är två begrepp för att referera till filer/moduler. De är faktiskt två helt olika saker.

importera

Detta nyckelord introducerades i ES2015 och är således en del av dess implementation, som är JavaScript. Det refererar inte bara till en fil/modul, utan det läser den refererade modulen och gör dess API/exponerade innehåll tillgängligt för dig.

Innan import var vi tvungna att använda någon sorts concat-mekanism eller använda <link> i HTML för att få åtkomst till till exempel jQuery. Nu kan vi göra import * as $ from 'jQuery' och JavaScript/TypeScript kommer att ”automatiskt” ladda modulen åt oss. Åtminstone är det vad det kommer att göra i framtiden så snart Loader är färdig.

Om du använder TypeScript kommer TypeScript-kompilatorn också att veta vilka typer/signaturer/... den exporterade koden har.

/// <referens>

Den lite konstiga <reference>-kommentaren användes för att hämta typdefinitioner från externa .d.ts-filer. Men med en nyare version av TypeScript bör du inte behöva göra detta längre. Du kan läsa om framtiden för deklarationsfiler här.

Så skillnaden mellan import och <reference> är att import kommer att ladda den ”verkliga” koden och göra den tillgänglig för dig. <reference> å andra sidan kommer bara att importera typdefinitioner för dig. I din redigerare/IDE kommer det att se ut som om du använder koden, men faktiskt vet TypeScript om de exponerade API:erna och låtsas att du faktiskt kan använda den laddade modulen. Det blir ditt jobb att göra modulen (globalt) tillgänglig när du vill köra din kod.

Relaterade artiklar