Läsare som du hjälper till att stödja MUO. När du gör ett köp med hjälp av länkar på vår webbplats kan vi tjäna en affiliate-provision. Läs mer.

En namnkollision uppstår när två eller flera kodkomponenter använder samma namn för en variabel, funktion eller klass. De är vanliga i stora projekt där många arbetar på samma kodbas. De kan göra det svårt att avgöra vilken kodkomponent som är ansvarig för buggar.

Med hjälp av namnrymder kan du organisera och hantera din kod så att grupper av relaterade komponenter är under en gemensam identifierare. Detta kommer att minska risken för namnkonflikter.

Skapa ett namnområde

Du kan skapa namnutrymmen i TypeScript med hjälp av namnutrymme nyckelord. Följ den med en identifierare för att namnge namnutrymmet och ett block som omges av lockiga klammerparenteser. Syntaxen liknar den du skulle använda skapa en klass i JavaScript.

Till exempel:

namnutrymme Exempel {}

Du kan sedan deklarera medlemmar av namnområdet – variabler, funktioner och klasser – inom namnområdesblocket:

instagram viewer 
namnutrymme Exempel {
exporterafungeraFoo(): tomhet{
trösta.logga("Detta är en funktion i exempelnamnutrymmet");
 }
exporteraklass Bar {
 fast egendom: sträng;


konstruktör(fast egendom: sträng) {
detta.property = egenskap;
 }
 }
exporterakonst baz = "Detta är en namnområdesvariabel"
}

I exemplet ovan, Foo, Bar, och baz är medlemmar i Exempel namnutrymme. Som standard kan du bara komma åt medlemmarna i ett namnområde inom samma namnområde. Använd exportera nyckelord för att göra varje medlem i namnområdet tillgänglig utanför det.

Du kan komma åt alla offentligt tillgängliga medlemmar i ett namnområde genom att anropa medlemsnamnet för namnområdet med hjälp av punktnotation:

Exempel.foo(); // Detta är en funktion i exempelnamnutrymmet
konst bar = ny Exempel. Bar("sträng");
trösta.log (bar.property); // sträng
trösta.log (Example.baz); // Detta är en namnområdesvariabel

Kapslande namnutrymmen

TypeScript låter dig kapsla namnutrymmen inom andra namnområden för att skapa en hierarkisk struktur för din kod. Kapsling av namnområden kan ytterligare minska riskerna för namnkollisioner genom att gruppera relaterade namnområden under en gemensam identifierare.

Till exempel:

namnutrymme Exempel {
exporterakonst egenskap_1 = "Foo";
exporteranamnutrymme Bar {
exporterakonst printFoo = fungera () {
trösta.log (egenskap_1);
 };
 }


exporteranamnutrymme Baz {
exporteraklass Foo {
 fast egendom: sträng;
konstruktör(fast egendom: sträng) {
detta.property = egenskap;
 }
 }
 }
}

Kodblocket ovan ger ett exempel på ett kapslat namnområde. De Exempel namnutrymme är namnutrymmet på översta nivån, som innehåller Bar namnutrymme och Baz namnutrymme.

Du kan komma åt egenskaperna i ett kapslat namnområde med hjälp av punktnotation som följer den hierarkiska struktur du skapade.

Till exempel:

trösta.log (Example.property_1); // Foo
Exempel. Bar.printFoo() // Foo
konst foo = ny Exempel. Baz. Foo("exempel")

Den här exempelkoden får åtkomst till varje medlem av namnområdet via det överordnade namnområdet. Att komma åt en egenskap direkt, istället för genom dess överordnade namnområde, skulle leda till ett fel:

Exempel.printFoo()
// fel TS2339: Egenskapen 'printFoo' finns inte på typen 'typeof Exempel'

Även om kapslande namnrymder kan hjälpa dig att organisera din kod, kan djupt kapslade namnutrymmen ge motsatt effekt. Djupt kapslade namnutrymmen gör din kod svårare att läsa och underhålla.

Namnutrymmesalias

Ett namnområdesalias är ett förkortat namn som ges till en namnområdesmedlem, vilket gör det lättare att referera.

Du kan skapa ett namnområdesalias med hjälp av importera nyckelord följt av namnet du vill tilldela aliaset. Tilldela sedan importera nyckelord och aliasnamnet till en namnområdesmedlem.

Till exempel:

namnutrymme Bil {
exporteranamnutrymme Tesla {
exporteraklass ModelX {
 skapa(): Sträng {
lämna tillbaka"Model X skapad".
 }
 }
 }
exporteranamnutrymme Toyota {
exporteraklass Camry {}
 }


exporteranamnutrymme Ford {
exporteraklass Mustang {}
 }
}


// Skapar aliaset
importera tesla = Bil. Tesla
konst modellX = ny tesla. ModelX()
modelX.create() // Model X Skapad

Detta exempel skapar ett alias för Bil. Tesla namnutrymme. Du kan använda detta alias för att komma åt egenskaperna för Tesla namnutrymme, som ModelX-klassen, lättare.

Använda namnutrymmen i flera filer

För att använda ett namnområde i en annan fil måste du importera det. Att importera namnområden skiljer sig från att importera variabler, funktioner, klasser etc. Beroende på ditt projekt modulsystem, kan du importera dem med antingen behöva eller den importera nyckelord.

Du kan dock bara importera namnområden med hjälp av direktivet med tre snedstreck, som är en enkelradskommentar som innehåller en XML-tagg.

Till exempel:

// main.ts
/// 
Exempel.foo()

Det här exemplet använder direktivet med tre snedstreck inuti a main.ts fil. Direktivet hänvisar till index.ts fil, som innehåller Exempel namnutrymme. Utan import är namnutrymmet endast tillgängligt inom samma fil som definierar det.

Efter att ha hänvisat till index.ts fil kan du komma åt Exempel namnområdet och dess offentligt tillgängliga medlemmar. Du kan till exempel ringa till foo metod på Exempel namnutrymme.

När du använder flera filer måste du se till att TypeScript kompilerar och laddar all nödvändig kod. Du kan göra det genom att sammanfoga utdata från TypeScript-kompilatorn med hjälp av outFile alternativ. Detta kommer sedan att kompilera alla indatafiler till en enda JavaScript-utdatafil. Den allmänna syntaxen för att köra kompilatorn så här är:

tsc --outFile

Byta ut med namnet på din JavaScript-målfil. Byta ut med namnet på TypeScript-filen som innehåller triple-slash-direktivet.

Till exempel:

tsc --outFile index.js main.ts

Detta kommando kommer att kompilera innehållet i main.ts fil, tillsammans med alla filer som hänvisas till av direktivet med tre snedstreck, till index.js fil.

Alternativt kan du ange varje fil individuellt:

tsc --outFile

Det är viktigt att notera att direktivet med tre snedstreck endast är giltigt när det deklareras överst i en fil. Om du försöker använda det någon annanstans kommer TypeScript att behandla det som en vanlig enkelradskommentar utan någon speciell betydelse.

Ska du använda namnutrymmen eller moduler?

Även om namnutrymmen inte är utfasade, rekommenderas ofta att organisera och hantera din kod med ES6-moduler. Moduler är enklare att underhålla och hantera och du kan använda dem i flera filer.

Dessutom kan du specificera relationerna mellan moduler vad gäller import och export på filnivå. Namnutrymmen kan inte definiera sina beroenden.

I slutändan kommer valet mellan namnutrymmen och moduler att bero på ditt projekts specifika behov och krav, eftersom båda erbjuder ett värdefullt sätt att organisera och hantera kod i TypeScript.