Uma colisão de nomenclatura ocorre quando dois ou mais componentes de código usam o mesmo nome para uma variável, função ou classe. Eles são comuns em grandes projetos onde muitas pessoas trabalham na mesma base de código. Eles podem dificultar a determinação de qual componente de código é responsável pelos bugs.
Usando namespaces, você pode organizar e gerenciar seu código para que grupos de componentes relacionados estejam sob um identificador comum. Isso reduzirá o risco de conflitos de nomes.
Criando um Namespace
Você pode criar namespaces no TypeScript usando o namespace palavra-chave. Siga-o com um identificador para nomear o namespace e um bloco entre chaves. A sintaxe é semelhante à que você usaria para criar uma classe em JavaScript.
Por exemplo:
namespace Exemplo {}
Você pode então declarar membros do namespace — variáveis, funções e classes — dentro do bloco de namespace:
namespace Exemplo {
exportarfunçãoFoo(): vazio{
console.registro("Esta é uma função dentro do namespace Example");
}exportaraula Bar {
propriedade: corda;construtor(propriedade: corda) {
esse.propriedade = propriedade;
}
}
exportarconst baz = "Esta é uma variável de namespace"
}
No exemplo acima, Foo, Bar, e baz são membros do Exemplo namespace. Por padrão, você só pode acessar os membros de um namespace dentro desse mesmo namespace. Use o exportar palavra-chave para tornar cada membro do namespace acessível fora dele.
Você pode acessar todos os membros publicamente disponíveis de um namespace chamando o nome do membro do namespace usando a notação de ponto:
Exemplo.foo(); // Esta é uma função dentro do namespace Exampleconst barra = novo Exemplo. Bar("corda");
console.log (bar.propriedade); // corda
console.log (Example.baz); // Esta é uma variável de namespace
Aninhamento de Namespaces
O TypeScript permite aninhar namespaces dentro de outros namespaces para criar uma estrutura hierárquica para seu código. O aninhamento de namespaces pode reduzir ainda mais os riscos de colisões de nomes, agrupando namespaces relacionados sob um identificador comum.
Por exemplo:
namespace Exemplo {
exportarconst propriedade_1 = "Foo";exportarnamespace Bar {
exportarconst printFoo = função () {
console.log (propriedade_1);
};
}exportarnamespace Baz {
exportaraula Foo {
propriedade: corda;
construtor(propriedade: corda) {
esse.propriedade = propriedade;
}
}
}
}
O bloco de código acima fornece um exemplo de namespace aninhado. O Exemplo namespace é o namespace de nível superior, contendo o Bar espaço de nomes e o baz namespace.
Você pode acessar as propriedades em um namespace aninhado usando a notação de ponto que segue a estrutura hierárquica que você criou.
Por exemplo:
console.log (Example.property_1); // Foo
Exemplo. Bar.printFoo() // Foo
const foo = novo Exemplo. Baz. Foo("exemplo")
Este código de exemplo acessa cada membro do namespace por meio do namespace pai. Acessar uma propriedade diretamente, em vez de por meio de seu namespace pai, geraria um erro:
Exemplo.printFoo()
// erro TS2339: A propriedade 'printFoo' não existe no tipo 'typeof Example'
Embora os namespaces aninhados possam ajudá-lo a organizar seu código, os namespaces profundamente aninhados podem produzir o efeito oposto. Namespaces profundamente aninhados tornam seu código mais difícil de ler e manter.
Aliases de namespace
Um alias de namespace é um nome abreviado dado a um membro de namespace, o que facilita a referência.
Você pode criar um alias de namespace usando o importar palavra-chave seguida do nome que deseja atribuir ao alias. Em seguida, atribua o importar palavra-chave e o nome do alias para um membro do namespace.
Por exemplo:
namespace Carro {
exportarnamespace Tesla {
exportaraula Modelo X {
criar(): Corda {
retornar`Modelo X Criado`
}
}
}exportarnamespace Toyota {
exportaraula Cami {}
}exportarnamespace Ford {
exportaraula Mustang {}
}
}// Criando o alias
importar tesla = carro. tesla
const modeloX = novo tesla. ModeloX()
modelX.create() // Modelo X criado
Este exemplo cria um alias para o Carro. tesla namespace. Você pode usar este alias para acessar as propriedades do tesla namespace, como a classe ModelX, mais facilmente.
Usando Namespaces em Vários Arquivos
Para usar um namespace em um arquivo diferente, você precisa importá-lo. Importar namespaces é diferente de importar variáveis, funções, classes, etc. Dependendo do seu projeto sistema modular, você pode importá-los usando o exigir ou o importar palavra-chave.
No entanto, você só pode importar namespaces usando a diretiva de barra tripla, que é um comentário de uma única linha contendo uma tag XML.
Por exemplo:
// main.ts
///
Exemplo.foo()
Este exemplo usa a diretiva de barra tripla dentro de um main.ts arquivo. A diretiva faz referência ao index.ts arquivo, que contém o Exemplo namespace. Sem importar, o namespace só está disponível no mesmo arquivo que o define.
Depois de referenciar o index.ts arquivo, você pode acessar o Exemplo namespace e seus membros publicamente disponíveis. Por exemplo, você pode chamar o foo método no Exemplo namespace.
Depois de usar vários arquivos, você precisará garantir que o TypeScript compila e carrega todo o código necessário. Você pode fazer isso concatenando a saída do compilador TypeScript usando o método outArquivo opção. Isso compilará todos os arquivos de entrada em um único arquivo de saída JavaScript. A sintaxe geral para executar o compilador assim é:
tsc --outArquivo
Substituir com o nome do arquivo JavaScript de destino. Substituir com o nome do arquivo TypeScript que contém a diretiva de barra tripla.
Por exemplo:
tsc --outFile index.js main.ts
Este comando irá compilar o conteúdo do main.ts arquivo, juntamente com todos os arquivos referenciados pela diretiva de barra tripla, no index.js arquivo.
Como alternativa, você pode especificar cada arquivo individualmente:
tsc --outArquivo
É importante observar que a diretiva de barra tripla só é válida quando declarada no início de um arquivo. Se você tentar usá-lo em qualquer outro lugar, o TypeScript o tratará como um comentário regular de uma linha sem nenhum significado especial.
Você deve usar namespaces ou módulos?
Embora os namespaces não sejam obsoletos, geralmente é recomendável organizar e gerenciar seu código usando módulos ES6. Os módulos são mais fáceis de manter e gerenciar e você pode escolhê-los em vários arquivos.
Além disso, você pode especificar as relações entre os módulos em termos de importações e exportações no nível do arquivo. Namespaces não podem definir suas dependências.
Em última análise, a escolha entre namespaces e módulos dependerá das necessidades e requisitos específicos do seu projeto, pois ambos oferecem uma maneira valiosa de organizar e gerenciar o código no TypeScript.