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

Befejeződött

Névtereket egyetlen TypeScript-fájlban vagy több TypeScript-fájlban is megvalósíthat.

Megjegyzés

Több fájlból álló névterek megvalósításához egy IDE-t, például Visual Studio Code-et kell használnia. Ez a TypeScript-játszóterek használatával nem lehetséges.

Egyetlen fájlnévtér meghatározásához kövesse az alábbi lépéseket:

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

  2. Hozzon létre egy új fájlt module08_exercise.ts néven.

  3. Definiálhat egy új névteret a namespace kulcsszóval és a névtér nevével. Egy TypeScript-fájlban annyi névteret határozhat meg, amennyit csak szükséges. A fájl tetején határozzon meg két névteret és Greetings GreetingsWithLength néven.

    namespace Greetings {
    }
    namespace GreetingsWithLength {
    }
    
  4. Most már definiálhat függvényeket és osztályokat a névtér definíciójában. A névtéren belül definiált összes összetevő hatóköre a névtérre terjed ki, és el lesz távolítva a globális hatókörből. Adjon hozzá egy nevű új függvényt a returnGreeting Greetings névtérhez. Ez a függvény egy paraméter értékét adja vissza a konzolon.

    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 getLength ) a GreetingsWithLength névtérhez. A függvény a segítő függvény használatával határozza meg az üdvözlés hosszát, mielőtt visszaadja az üzenetet a returnGreeting getLength konzolnak.

    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ód számára, adja hozzá a export kulcsszót a neve előtt. Ha kihagyja a export kulcsszót, az összetevő csak a névtérben érhető el. Ezt akkor használhatja, ha olyan összetevőket definiál, amelyek csak a névtér más összetevői számára legyenek közvetlenül elérhetők. Adja hozzá export a kulcsszót returnGreeting a 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 kihagyja a export kulcsszót.

    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 használ egy névtéren belül, az összetevő nevének előtagját a névtér nevével kell előtagként használnia. Próbálja meg a returnGreeting függvényt a névtér megadása nélkül hívni. Ez hibát ad vissza, mert mindkét függvény hatóköre kívül van returnGreeting a globális névtérben. Most próbáljon meg előtagot vagy Greetings a GreetingsWithLength returnGreeting függvényt használni. Ez hozzáférést biztosít a függvényhez az egyes névterek között.

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

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

A névtereket névterekbe is beágyazhatja, í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 néven, majd helyezze át a korábban létrehozott és AllGreetings Greetings GreetingsWithLength névtereket. Adja hozzá export a kulcsszót mindkét névtérnév előtt. Ez lehetővé teszi, hogy a névtér a névtéren AllGreetings kívül 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 hívásához kezdje azzal, hogy begépeli a névtéren belül a névtér nevét () egy pont, majd a következő szintet AllGreetings a névtér-hierarchiá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 egy könnyen navigálható hierarchiáját hozza létre. Mivel azonban a beágyazott névterek egyre összetettebbek, létrehozhat egy aliast, amely lerövidíti és leegyszerűsíti a kódot. Ehhez használja a import kulcsszót.

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

  1. Gépelje be: import greet = AllGreetings.Greetings. Ez egy nevű új aliast határoz meg, amely a nevet greet AllGreetings.Greetings jelöli. Most már greet használhatja a helyére AllGreetings.Greetings a kódot.

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

Egyetlen fájlnévtér fordí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 olyan változókká alakítja őket, amelyek szükség szerint beágyaznak a névtérszerű objektumok felépítéséhez.