Exercício – Organizar códigos usando namespaces de arquivo único

5 minutos

Você pode implementar namespaces em um único ou em vários arquivos TypeScript.

Observação

Você deve usar um IDE, como o Visual Studio Code, para implementar namespaces de vários arquivos. Não é possível fazer isso no Playground do TypeScript.

Conclua as etapas para definir um namespace de arquivo único:

Abra um novo workspace do Visual Studio Code.
Crie um arquivo chamado module08_exercise.ts.
Defina um novo namespace usando a palavra-chave namespace seguida pelo nome do namespace. Você pode definir quantos namespaces forem necessários em um único arquivo TypeScript. Na parte superior do arquivo, defina dois namespaces chamados Greetings e GreetingsWithLength.
```
namespace Greetings {
}
namespace GreetingsWithLength {
}
```
Agora você pode definir funções e classes dentro da definição do namespace. Todos os componentes definidos no namespace têm o escopo definido para o namespace e são removidos do escopo global. Adicione uma nova função chamada returnGreeting ao namespace Greetings. Essa função retorna o valor de um parâmetro para o console.
```
namespace Greetings {
    function returnGreeting (greeting: string) {
        console.log(`The message from namespace Greetings is ${greeting}.`);
    }
}
```

Adicione duas novas funções, returnGreeting e getLength, ao namespace GreetingsWithLength. A função returnGreeting usa a função auxiliar getLength para determinar o comprimento da saudação antes de retornar a mensagem para o console.

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
    }
}

Se você quiser tornar uma função ou classe disponível para o código fora do namespace, adicione a palavra-chave export antes do nome. Se você omitir a palavra-chave export, o componente só estará disponível dentro do namespace. Você poderá fazer isso se definir componentes que só devem ser diretamente acessíveis a outros componentes dentro do namespace. Adicione a palavra-chave export à função returnGreeting em ambos os namespaces. A função getLength não deve ser acessível fora do namespace GreetingsWithLength, portanto, omita a palavra-chave 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
    }
}
```
Para usar uma classe ou função em um namespace, prefixe o nome do componente com o nome do namespace. Tente chamar a função returnGreeting sem especificar o namespace. Isso retorna um erro porque ambas as funçõesreturnGreeting estão fora do escopo no namespace global. Agora, tente prefixar Greetings ou GreetingsWithLength para a função returnGreeting. Isso fornece acesso à função dentro de cada namespace respectivo.
```
returnGreeting('Hello');                     // Returns error
Greetings.returnGreeting('Bonjour');         // OK
GreetingsWithLength.returnGreeting('Hola');  // OK
```

Organizar códigos usando namespaces aninhados

Você também pode aninhar namespaces dentro de namespaces, fornecendo ainda mais opções para organizar seu código.

Continue trabalhando no editor de código.

Crie um namespace chamado AllGreetings e mova os namespaces Greetings e GreetingsWithLength que você criou anteriormente dentro dele. Adicione a palavra-chave export antes dos dois nomes de namespace. Isso permite que o namespace seja acessível fora do namespace AllGreetings.

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
        }
    }
}

Para chamar as funções, comece digitando o nome do namespace mais externo, AllGreetings, um ponto e o próximo nível na hierarquia do namespace, Greetings ou GreetingsWithLength. Continue na hierarquia até alcançar o nome da função.
```
AllGreetings.Greetings.returnGreeting('Bonjour');        // OK
AllGreetings.GreetingsWithLength.returnGreeting('Hola');  // OK
```

Definir um alias de namespace

O TypeScript cria uma hierarquia de fácil navegação de namespaces aninhados. No entanto, como seus namespaces aninhados se tornam mais complexos, talvez você queira criar um alias para reduzir e simplificar seu código. Para fazer isso, use a palavra-chave import.

Continue trabalhando no editor de código.

Digite import greet = AllGreetings.Greetings. Isso define um novo alias chamado greet que representa AllGreetings.Greetings. Agora você pode usar greet no lugar de AllGreetings.Greetings em seu código.
```
import greet = AllGreetings.Greetings;
greet.returnGreeting('Bonjour');
```

Compilar namespaces de arquivo único

Você compila um namespace de arquivo único da mesma maneira que faz isso em qualquer outro arquivo TypeScript. Como os namespaces são um constructo somente TypeScript, eles são removidos do código JavaScript resultante e convertidos em variáveis que são aninhadas conforme necessário para formar objetos semelhantes a namespaces.

Continuar

Exercício – Organizar códigos usando namespaces de arquivo único

Organizar códigos usando namespaces aninhados

Definir um alias de namespace

Compilar namespaces de arquivo único

Comentários