Introdução
Com o aumento do uso de bibliotecas de terceiros em software corporativo, frequentemente encontramos o problema de namespaces globais poluídos, causando colisão de nomes entre componentes no namespace global. Portanto, precisamos organizar blocos de código usando namespaces para que variáveis, objetos e classes sejam identificados de forma exclusiva.
Neste artigo, discutiremos os namespaces, quando você precisar deles e como usá-los para melhorar a organização do seu código TypeScript.
Pré-requisitos
Conhecimento de TypeScript familiaridade com JavaScript
O que são namespaces?
Os namespaces são paradigma de organização de código para que variáveis, funções, interfaces ou classes são agrupadas em um escopo local para evitar conflitos de nomenclatura entre componentes no escopo global. Esta é uma das estratégias mais comuns para reduzir a poluição de escopo global.
Enquanto módulos também são usados para organização de código, namespaces são fáceis de usar para implementações simples. Os módulos oferecem alguns benefícios adicionais, como forte isolamento de código, forte suporte para agrupamento, reexportação de componentes e renomeação de componentes que os namespaces não oferecem.
Por que precisamos de namespaces?
Os namespaces têm estas vantagens:
Reutilização de código-A importância dos namespaces para a reutilização de código não pode ser subestimada Escopo global inchado-Os namespaces reduzem a quantidade de código no escopo global, tornando-o menos inchado Bibliotecas de terceiros-Com o aumento número de sites dependendo de bibliotecas de terceiros, é importante proteger seu código usando namespaces para evitar conflitos de mesmo nome entre seu código e as bibliotecas de terceiros Desenvolvimento distribuído-Com o desenvolvimento distribuído se tornando popular, a poluição é quase inevitável porque é muito mais fácil para os desenvolvedores usarem variáveis comuns ou nomes de classes. Isso resulta em colisão de nomes e poluição do escopo global
Considerações de design usando namespaces
Ordem de dependência implícita
Usar namespaces ao trabalhar com algumas bibliotecas externas exigirá uma implementação implícita de dependência entre o seu código e essas bibliotecas. Isso resulta no estresse de gerenciar você mesmo as dependências para que sejam carregadas corretamente, porque as dependências podem estar sujeitas a erros.
Se você se encontrar em tal situação, o uso de módulos evitará o estresse.
Aplicativos Node.js
Para Aplicativos Node.js, módulos são recomendados em vez de namespaces, uma vez que os módulos são o padrão de fato para encapsulamento e organização de código no Node.
Importação de conteúdo não JavaScript
Módulos são recomendados em vez de namespaces ao lidar com conteúdo não JavaScript, uma vez que alguns carregadores de módulo, como SystemJS e AMD permitem a importação de conteúdo não JavaScript.
Código legado
Ao trabalhar com um base de código que não é mais projetada, mas continuamente corrigida, usando namespaces é recomendada em vez de módulos.
Além disso, namespaces são úteis ao portar código JavaScript antigo.
Explorando namespaces no tipo Script
Agora que temos um entendimento comum do que são os namespaces do TypeScript e por que precisamos deles, podemos nos aprofundar em como usá-los.
Dado que o TypeScript é um superconjunto de JavaScript, ele deriva seu conceito de namespace do JavaScript.
Por padrão, JavaScript não tem provisão para namespaces porque temos que implementar namespaces usando IIFE (Immediately Invoked Function Expression):
var Vehicle; (função (Veículo) {deixar nome=”carro”;}) (Veículo || (Veículo={}));
Isso é muito código para definir um namespace. Enquanto isso, o TypeScript faz as coisas de forma diferente.
Namespacing de arquivo único
No TypeScript, os namespaces são definidos usando a palavra-chave do namespace seguida por um nome de sua escolha.
A um único arquivo TypeScript pode ter quantos namespaces forem necessários:
namespace Vehicle {} namespace Animal {}
Como podemos ver, os namespaces do TypeScript são um pedaço de bolo sintático em comparação com nossa implementação JavaScript de namespaces usando o IIFE.
Funções, variáveis e classes podem ser definidas dentro de um namespace da seguinte maneira:
namespace Vehicle {const name=”Toyota”function getName () {return `$ {name}`}} namespace Animal {const name=”Panda”function getName () {return `$ {name}`}}
O código acima nos permite usar a mesma variável e nome de função sem colisão.
Acessando funções , variáveis, objetos e classes fora de um namespace
Para acessar funções ou classes fora de seus namespaces, a palavra-chave export deve ser ad deduzido antes do nome da função ou classe como segue:
namespace Vehicle {const name=”Toyota”export function getName () {return `$ {name}`}}
Observe que tivemos que omitir a palavra-chave export com a variável porque ela não deve estar acessível fora do namespace.
Agora, podemos acessar a função getName da seguinte forma:
Vehicle.getName ()//Toyota
Organizando código usando aninhado namespaces
O TypeScript nos permite organizar nosso código usando namespaces aninhados.
Podemos criar namespaces aninhados da seguinte maneira:
namespace TransportMeans {export namespace Vehicle {const name=”Toyota”export function getName () {return` $ {name} `}}}
Observe a palavra-chave export antes do namespace Vehicle. Isso permite que o namespace seja acessível fora do namespace TransportMeans.
Também podemos realizar aninhamento profundo de namespaces.
Nossos namespaces aninhados podem ser acessados da seguinte maneira:
TransporMeans.Vehicle.getName ()//Toyota
O alias de namespace
Para namespaces profundamente aninhados, o alias de namespace é útil para manter as coisas limpas.
Os aliases de namespace são definidos usando a palavra-chave import da seguinte forma:
import carName=TransporMeans.Vehicle; carName.getName ();//Toyota
Namespacing de vários arquivos
Os namespaces podem ser compartilhados entre vários arquivos TypeScript. Isso é possível pela tag de referência.
Considerando o seguinte:
//constant.ts export const name=”Toyota”//vehicle.ts
Aqui, tivemos que fazer referência ao arquivo constant.ts para acessar name:
//index.ts
Observe como iniciamos nossas referências com o namespace de nível mais alto. É assim que se lida com referências em interfaces de vários arquivos. O TypeScript usará esta ordem ao compilar os arquivos.
Podemos instruir o compilador a compilar nosso código TypeScript de vários arquivos em um único arquivo JavaScript com o seguinte comando:
tsc–outFile index. js index.ts
Com este comando, o compilador TypeScript produzirá um único arquivo JavaScript chamado index.js.
Conclusão
Para construir aplicativos TypeScript escaláveis e reutilizáveis, Os namespaces do TypeScript são úteis porque melhoram a organização e a estrutura de nosso aplicativo.
Neste artigo, pudemos explorar os namespaces, quando necessário, e como implementá-los. Confira TypeScript Handbook: Namespaces para obter mais informações sobre namespaces.
