Como Adicionar Propriedades Dinâmicas a um Objeto com Javascript e TypeScript: Guia Completo

Em muitos cenários de desenvolvimento em TypeScript, você pode precisar adicionar propriedades dinamicamente a um objeto.

Essa flexibilidade é extremamente útil quando você precisa lidar com dados variáveis ou quando deseja estender um objeto existente com novas propriedades.

Neste guia, vamos explorar diferentes maneiras de adicionar propriedades dinâmicas a um objeto com Javascript e TypeScript. Acompanhe as instruções abaixo para obter um entendimento completo dessa funcionalidade.

Acompanhe o Blog e o meu Curso de Angular ou Curso de Javascript, Ts e Nodejs

Sintaxe de Ponto

A forma mais comum de adicionar propriedades a um objeto em TypeScript é usando a sintaxe de ponto. Você pode simplesmente atribuir um valor a uma nova propriedade usando a notação de ponto. Veja um exemplo:

const larguraTela = screen.width;
const alturaTela = screen.height;
console.log(`Resolução da tela: ${larguraTela} x ${alturaTela}`);

Nesse caso, você está adicionando a propriedade propriedade ao objeto e atribuindo um valor a ela.

Colchetes 

Outra opção é usar a sintaxe de colchetes para adicionar propriedades dinâmicas a um objeto. Isso é útil quando você tem nomes de propriedades que são determinados em tempo de execução ou quando os nomes contêm caracteres especiais. Veja um exemplo:

const objeto = {};
const nomeDaPropriedade = "propriedade";
objeto[nomeDaPropriedade] = valor;

Nesse exemplo, a propriedade é adicionada ao objeto usando a variável nomeDaPropriedade, que pode ser definida dinamicamente.

Object.assign() 

Uma terceira opção é usar o método Object.assign() para adicionar propriedades a um objeto existente. Esse método permite combinar múltiplos objetos em um só, adicionando suas propriedades ao objeto de destino. Veja um exemplo:

const objetoExistente = { propriedadeExistente: valorExistente };
const propriedadesAdicionais = { novaPropriedade: novoValor };
const objetoFinal = Object.assign({}, objetoExistente, propriedadesAdicionais);

Nesse exemplo, criamos um novo objeto objetoFinal que contém tanto as propriedades do objetoExistente quanto as propriedadesAdicionais.

Acompanhe o Blog e o meu Curso de Angular ou Curso de Javascript, Ts e Nodejs

Conclusão

Adicionar propriedades dinâmicas a um objeto em TypeScript é uma funcionalidade poderosa que permite lidar com dados variáveis de forma flexível. Você pode usar a sintaxe de ponto, a sintaxe de colchetes ou o método Object.assign() para realizar essa tarefa.

Escolha a abordagem que melhor se adequa ao seu caso de uso e aproveite a flexibilidade que o TypeScript oferece. Lembre-se de que a adição de propriedades dinâmicas pode aumentar a complexidade do seu código, então use com cuidado e mantenha um código limpo e organizado.

Esperamos que este guia tenha sido útil e que você possa adicionar propriedades dinâmicas aos seus objetos em TypeScript de forma eficiente e correta. Explore essa funcionalidade em seus projetos e aproveite os benefícios da flexibilidade e extensibilidade oferecidos pelo TypeScript.