Előző

Következő

Gyakorlat – Kód rendszerezése egyetlen fájlnévtér használatával

Befejeződött

A névtereket egyetlen TypeScript-fájlban vagy több TypeScript-fájlban is implementálhatja.

Megjegyzés:

Többfájlos névterek implementálásához IDE-t, például Visual Studio Code-ot kell használnia. Ezt a TypeScript-játszótéren nem lehet megtenni.

Hajtsa végre az egyetlen fájlnévtér definiálásához szükséges lépéseket:

1. Nyisson meg egy új Visual Studio Code-munkaterületet.

2. Hozzon létre egy module08_exercise.ts nevű új fájlt.

3. Adjon meg egy új névteret a namespace kulcsszóval, majd a névtér nevével. Egyetlen TypeScript-fájlban tetszőleges számú névteret definiálhat. A fájl tetején adjon meg két névteret GreetingsGreetingsWithLengthés .

   namespace Greetings {
   }
   namespace GreetingsWithLength {
   }
   

4. Mostantól definiálhat függvényeket és osztályokat a névtérdefiníción belül. A névtérben definiált összes összetevő hatóköre a névtérre terjed ki, és eltávolítja a globális hatókörből. Adjon hozzá egy új függvényt returnGreeting a Greetings névtérhez. Ez a függvény egy paraméter értékét adja vissza a konzolnak.

   namespace Greetings {
       function returnGreeting (greeting: string) {
           console.log(`The message from namespace Greetings is ${greeting}.`);
       }
   }
   

5. Adjon hozzá két új függvényt, returnGreeting és getLengthadja hozzá a GreetingsWithLength névteret. A returnGreeting függvény a segédfüggvény getLength használatával határozza meg a üdvözlés hosszát, mielőtt visszaküldené az üzenetet a konzolra.

   namespace GreetingsWithLength {
       function returnGreeting (greeting: string) {
           let greetingLength = getLength(greeting);
           console.log(`The message from namespace GreetingsWithLength is ${greeting}. It is ${greetingLength} characters long.`);
       }
       function getLength(message: string): number {
           return message.length
       }
   }
   

6. Ha elérhetővé szeretne tenni egy függvényt vagy osztályt a névtéren kívüli kódhoz, adja hozzá a kulcsszót a export neve elé. Ha kihagyja a kulcsszót export , az összetevő csak a névtérben érhető el. Ezt akkor teheti meg, ha olyan összetevőket határoz meg, amelyeknek csak a névtér más összetevői számára legyenek közvetlenül elérhetők. Adja hozzá a export kulcsszót a returnGreeting függvényhez mindkét névtérben. A getLength függvény nem lehet elérhető a GreetingsWithLength névtéren kívül, ezért hagyja ki a kulcsszót export .

   namespace Greetings {
       export function returnGreeting (greeting: string) {
           console.log(`The message from namespace Greetings is ${greeting}.`);
       }
   }
   namespace GreetingsWithLength {
       export function returnGreeting (greeting: string) {
           let greetingLength = getLength(greeting);
           console.log(`The message from namespace GreetingsWithLength is ${greeting}. It is ${greetingLength} characters long.`);
       }
       function getLength(message: string): number {
           return message.length
       }
   }
   

7. Ha osztályt vagy függvényt szeretne használni egy névtérben, előtagként adja meg az összetevő nevét a névtér nevével. Próbálja meg meghívni a függvényt returnGreeting a névtér megadása nélkül. Ez hibát ad vissza, mert mindkét returnGreeting függvény hatókörön kívül esik a globális névtérben. Most próbálja meg az előtagot Greetings vagy GreetingsWithLength a függvényt returnGreeting . Ez hozzáférést biztosít a függvényhez az egyes névtereken belül.

   returnGreeting('Hello');                     // Returns error
   Greetings.returnGreeting('Bonjour');         // OK
   GreetingsWithLength.returnGreeting('Hola');  // OK
   

Kód rendszerezése beágyazott névterek használatával

Névtereket is beágyazhat névterekbe, így még több lehetőséget biztosít a kód rendszerezésére.

Folytassa a munkát a kódszerkesztőben.

1. Hozzon létre egy új névteret, AllGreetings és helyezze át a Greetings korábban létrehozott névtereket GreetingsWithLength . Adja hozzá a kulcsszót export mindkét névtérnév elé. Ez lehetővé teszi, hogy a névtér a névtéren kívül AllGreetings is elérhető legyen.

   namespace AllGreetings {
       export namespace Greetings {
           export function returnGreeting (greeting: string) {
               console.log(`The message from namespace Greetings is ${greeting}.`);
           }
       }
       export namespace GreetingsWithLength {
           export function returnGreeting (greeting: string) {
               let greetingLength = getLength(greeting);
               console.log(`The message from namespace GreetingsWithLength is ${greeting}. It is ${greetingLength} characters long.`);
           }
           function getLength(message: string): number {
               return message.length
           }
       }
   }
   

2. A függvények meghívásához először írja be a legkülső névtér nevét, AllGreetingsegy pontot, majd a következő szintet a névtérhierarchiában, Greetings vagy GreetingsWithLength. Folytassa a hierarchiát, amíg el nem éri a függvény nevét.

   AllGreetings.Greetings.returnGreeting('Bonjour');        // OK
   AllGreetings.GreetingsWithLength.returnGreeting('Hola');  // OK
   

Névtér aliasának definiálása

A TypeScript a beágyazott névterek könnyen navigálható hierarchiáját hozza létre. Mivel azonban a beágyazott névterek összetettebbé válnak, érdemes lehet egy aliast létrehozni a kód lerövidítéséhez és egyszerűsítéséhez. Ehhez használja a kulcsszót import .

Folytassa a munkát a kódszerkesztőben.

1. Type import greet = AllGreetings.Greetings. Ez egy új aliast greet határoz meg, amely a . nevet jelöli AllGreetings.Greetings. Mostantól használhatja greetAllGreetings.Greetings a kód helyett.

   import greet = AllGreetings.Greetings;
   greet.returnGreeting('Bonjour');
   

Egyetlen fájlnévterek összeállítása

Egyetlen fájlnévteret ugyanúgy fordít le, mint bármely más TypeScript-fájlt. Mivel a névterek csak TypeScript-szerkezetek, a rendszer eltávolítja őket az eredményül kapott JavaScript-kódból, és változókká alakítja őket, amelyek szükség szerint beágyazódnak a névtérszerű objektumok létrehozásához.

Folytatás