Forem: Levy Henrique Alves Nunes

RxJS Subjects em Angular

Levy Henrique Alves Nunes — Fri, 25 Aug 2023 23:51:03 +0000

Os Subjects são uma parte crucial da biblioteca RxJS e são frequentemente usados em aplicações Angular para gerenciar e manipular fluxos de dados reativos. Vamos mergulhar nas diferenças entre os diferentes tipos de Subjects e ver exemplos práticos de como eles são aplicados em aplicações Angular.

Diferenças entre Subject, BehaviorSubject, ReplaySubject e AsyncSubject

1. Subject

Definição: Um Subject é tanto um Observable quanto um Observer. Isso significa que você pode tanto emitir valores para ele quanto se inscrever nele.
Características: Ao se inscrever em um Subject depois que ele emitiu valores, você não receberá os valores anteriores. Você só receberá os valores emitidos após a inscrição.

2. BehaviorSubject

Definição: Um BehaviorSubject é semelhante a um Subject, mas armazena o último valor emitido. Assim, cada novo inscrito receberá imediatamente o último valor emitido antes da sua inscrição.
Características: Ao criar um BehaviorSubject, você precisa fornecer um valor inicial. Esse será o valor que os novos inscritos receberão se não houver outro valor emitido.

3. ReplaySubject

Definição: Um ReplaySubject grava os valores emitidos e pode reemitir esses valores para novos inscritos.
Características: Ao criar um ReplaySubject, você pode especificar quantos valores recentes deseja armazenar e reemitir para novos inscritos.

4. AsyncSubject

Definição: Um AsyncSubject é semelhante ao BehaviorSubject no sentido de que armazena o último valor. No entanto, o AsyncSubject só emite o valor no momento da conclusão.
Características: Se você se inscrever em um AsyncSubject e ele já tiver sido concluído, receberá imediatamente o último valor emitido.

Exemplos Práticos em Aplicações Angular

1. Subject

Imagine um serviço que informa quando um usuário foi atualizado:

import { Subject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class UserService {
  userUpdated = new Subject<void>();

  updateUser() {
    // Lógica de atualização do usuário
    this.userUpdated.next();
  }
}

Em um componente:

@Component({
  // ...
})
export class UserComponent implements OnInit {
  constructor(private userService: UserService) {}

  ngOnInit() {
    this.userService.userUpdated.subscribe(() => {
      console.log('Usuário atualizado!');
    });
  }
}

2. BehaviorSubject

Utilizado para armazenar o estado atual do usuário:

import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class UserService {
  private currentUser = new BehaviorSubject<User>({ name: 'Guest' });

  getCurrentUser() {
    return this.currentUser.asObservable();
  }

  updateCurrentUser(newUser: User) {
    this.currentUser.next(newUser);
  }
}

3. ReplaySubject

Perfeito para armazenar um histórico de mensagens em um chat:

import { ReplaySubject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class ChatService {
  private messages = new ReplaySubject<string>(5); // Armazena as últimas 5 mensagens

  getMessages() {
    return this.messages.asObservable();
  }

  addMessage(message: string) {
    this.messages.next(message);
  }
}

4. AsyncSubject

Útil para ações que só nos interessam no final, como um pedido HTTP:

import { AsyncSubject } from 'rxjs';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  private dataSubject = new AsyncSubject<Data>();

  constructor(private http: HttpClient) {}

  fetchData() {
    this.http.get<Data>('url').subscribe(data => {
      this.dataSubject.next(data);
      this.dataSubject.complete();
    });

    return this.dataSubject.asObservable();
  }
}

Ao usar o AsyncSubject neste exemplo, os inscritos só receberão um valor quando o pedido HTTP for concluído.

Conclusão

Os Subjects e suas variantes oferecem uma flexibilidade incrível ao trabalhar com fluxos de dados reativos em Angular. Escolher o tipo correto de Subject pode simplificar seu código e tornar sua aplicação mais eficiente.

Transformações de Tipo em Tempo de Compilação no TypeScript

Levy Henrique Alves Nunes — Fri, 25 Aug 2023 23:45:43 +0000

Em programação de sistemas robustos e flexíveis, o entendimento e a manipulação adequados dos tipos são vitais. O TypeScript, como superconjunto tipado do JavaScript, permite operações de asserção de tipo, que orientam o compilador sobre como tratar determinadas variáveis. Vamos mergulhar mais profundamente na diferença entre casting e asserções de tipo e explorar os tipos de asserção personalizados.

Casting vs. Asserções de Tipo: Uma Distinção Fundamental

O que é Casting?

Em linguagens de programação tradicionais, "casting" refere-se ao processo de converter explicitamente um tipo de variável em outro. Esta conversão pode ser tanto em nível de compilação quanto em tempo de execução, e geralmente tem implicações diretas na representação subjacente da variável ou valor.

Asserções de Tipo em TypeScript

No contexto do TypeScript, não estamos alterando a representação subjacente do valor. Em vez disso, estamos simplesmente informando ao compilador para tratar a variável como se ela fosse de um tipo diferente. Essa operação é chamada de "asserção de tipo".

let valor: any = "Uma string qualquer";

let minhaString = valor as string; // asserção de tipo

A asserção acima não muda o valor de valor. Em vez disso, indica ao compilador que o desenvolvedor está confiante de que valor é uma string e que o código subsequente deve tratá-lo como tal.

Tipos de Asserção Personalizados: Indo Além dos Tipos Básicos

Há momentos em que as asserções básicas não são suficientes. Suponha que você não apenas queira assegurar que uma variável é uma string, mas que ela obedece a um formato específico, como um endereço de e-mail.

Introduzindo Marcas de Tipo

Uma marca de tipo é uma maneira de criar um tipo distinto, mesmo que esse tipo seja estruturalmente idêntico a outro.

type Email = string & { __emailValidated: unique symbol };

Aqui, Email é efetivamente uma string, mas não é apenas qualquer string. É uma string que foi "marcada" como um e-mail validado.

Validação e Asserção

Podemos combinar essa marca de tipo com uma função de asserção para criar um sistema robusto de validação:

function validateAsEmail(input: string): asserts input is Email {
    if (!/\S+@\S+\.\S+/.test(input)) {
        throw new Error("Invalid email format.");
    }
    (input as any).__emailValidated = Symbol("emailValidated");
}

Dentro do contexto de uma aplicação, essa função pode ser usada para assegurar que qualquer string passada para ela, se passar pela validação, pode ser tratada com confiança como um e-mail validado no restante do código.

Conclusão

Ao trabalhar com TypeScript, a capacidade de informar ao compilador sobre as características e garantias de nossos tipos é um recurso valioso. Com asserções de tipo e a habilidade de definir e usar marcas de tipo, ganhamos uma ferramenta adicional para construir sistemas que são ao mesmo tempo flexíveis e seguros. Esta interseção entre o entendimento profundo do domínio do problema e as capacidades do sistema de tipos nos permite criar software mais robusto e confiável.

Polimorfismo e Generics Avançados em TypeScript

Levy Henrique Alves Nunes — Fri, 25 Aug 2023 23:37:56 +0000

O TypeScript oferece recursos avançados para tipos e polimorfismo, especialmente ao trabalhar com generics. Estes recursos proporcionam maior segurança ao tipar e flexibilidade em cenários de programação comuns.

Generics com Restrições

Em algumas situações, deseja-se permitir qualquer tipo com generics, mas ainda quer-se restringir os tipos possíveis com certas características. Essas restrições são definidas usando a cláusula extends.

Exemplo:

Suponha que você queira uma função que retorne uma propriedade de um objeto, mas você quer garantir que a propriedade realmente exista no objeto.

function getPropriedade<T, K extends keyof T>(obj: T, chave: K): T[K] {
    return obj[chave];
}

const pessoa = {
    nome: "Ana",
    idade: 25
};

// Uso válido
let nome: string = getPropriedade(pessoa, "nome");

// Erro! "altura" não é uma chave de pessoa.
// let altura: number = getPropriedade(pessoa, "altura");

Neste exemplo, K extends keyof T garante que o segundo argumento seja uma chave do objeto fornecido como primeiro argumento.

Usando a palavra-chave `keyof`

A operação keyof é uma operação de tipo que pega um tipo e produz uma string ou tipo numérico literal que representa as chaves desse tipo.

Exemplo:

interface Carro {
    marca: string;
    modelo: string;
    ano: number;
}

type ChavesDoCarro = keyof Carro;  // "marca" | "modelo" | "ano"

Aqui, ChavesDoCarro é um tipo que pode ser "marca", "modelo" ou "ano".

Usando `keyof` com Generics:

keyof é extremamente útil em conjunto com generics, especialmente quando se deseja garantir que a operação seja realizada com propriedades que existem em um objeto.

function setPropriedade<T>(obj: T, chave: keyof T, valor: T[keyof T]): T {
    obj[chave] = valor;
    return obj;
}

const carro: Carro = {
    marca: "Toyota",
    modelo: "Corolla",
    ano: 2020
};

// Uso válido
setPropriedade(carro, "modelo", "Camry");

// Erro! "cor" não é uma chave de Carro.
// setPropriedade(carro, "cor", "Vermelho");

Conclusão

Polimorfismo e generics avançados em TypeScript ampliam as possibilidades de criar código reutilizável e ainda mantêm uma forte segurança de tipo. Com a combinação de generics restritos e a operação keyof, é possível escrever funções genéricas precisas e seguras que operam em propriedades de objetos. Estes recursos tornam o TypeScript uma ferramenta poderosa para desenvolvimento, combinando flexibilidade com segurança de tipo.

Manipulação Avançada de Tipos com Utility Types

Levy Henrique Alves Nunes — Fri, 25 Aug 2023 23:35:28 +0000

Manipulação Avançada de Tipos com Utility Types

Os Utility Types no TypeScript permitem uma forma de transformar tipos de maneira modular e reutilizável. Alguns dos utility types mais comuns são Partial, Readonly e Record, mas há muitos outros igualmente úteis.

Entendendo Partial, Readonly, Record, e outros

1. `Partial<T>`

Transforma todas as propriedades de um tipo T em propriedades opcionais.

interface Pessoa {
    nome: string;
    idade: number;
}

type PessoaParcial = Partial<Pessoa>;
// Equivalent a:
// type PessoaParcial = {
//    nome?: string;
//    idade?: number;
// }

2. `Readonly<T>`

Torna todas as propriedades de um tipo T como somente leitura.

type PessoaReadonly = Readonly<Pessoa>;
// Equivalent a:
// type PessoaReadonly = {
//    readonly nome: string;
//    readonly idade: number;
// }

3. `Record<K,T>`

Cria um tipo com um conjunto de propriedades K e um tipo de valor T.

type DictionaryNumeros = Record<string, number>;
// Representa um objeto onde as chaves são strings e os valores são números

Casos práticos: transformando tipos com utility types

1. Atualização Parcial

Suponha que você esteja criando uma função para atualizar os detalhes de um usuário. Usando Partial, você pode criar um tipo que representa um subconjunto dos detalhes do usuário:

interface Usuario {
    id: number;
    nome: string;
    email: string;
}

function atualizarUsuario(id: number, detalhes: Partial<Usuario>) {
    // atualiza o usuário no banco de dados
}

2. Objetos Configuráveis

Utilizando o tipo Record, você pode criar um tipo para representar um objeto de configuração onde todas as chaves são strings e todos os valores seguem um tipo específico:

type Configuracoes = Record<string, string | number | boolean>;

function aplicarConfiguracoes(config: Configuracoes) {
    // aplica as configurações
}

3. Objetos Imutáveis

Para garantir que um objeto não seja modificado após ser criado, você pode usar Readonly:

const userReadonly: Readonly<Usuario> = {
    id: 1,
    nome: "João",
    email: "joao@example.com"
};

// A seguinte linha resultará em erro
// userReadonly.nome = "Pedro";

Outros Utility Types úteis:

Pick<T, K extends keyof T>: Cria um tipo selecionando um conjunto de propriedades K de T.
Omit<T, K extends keyof T>: Cria um tipo removendo um conjunto de propriedades K de T.
Exclude<T, U>: Exclui os tipos de U de T.
Extract<T, U>: Seleciona os tipos de T que podem ser atribuídos a U.
ReturnType<T>: Obtem o tipo de retorno de uma função.

Conclusão

Os Utility Types em TypeScript fornecem uma série de ferramentas poderosas para a manipulação de tipos, tornando o sistema de tipos ainda mais flexível e expressivo. Quando você se familiarizar com essas construções, encontrará muitos casos em que elas podem tornar seu código mais limpo e mais seguro.

Namespaces e Módulos em TypeScript

Levy Henrique Alves Nunes — Fri, 25 Aug 2023 23:32:12 +0000

Namespaces e módulos são dois conceitos em TypeScript que ajudam a organizar e modularizar seu código. Embora ambos tenham propósitos semelhantes, eles têm características e casos de uso distintos.

Namespaces

Namespaces, anteriormente conhecidos como "módulos internos", são um meio de agrupar uma coleção relacionada de detalhes sob um único nome.

Como estruturar seu código com Namespaces:

namespace MeuNamespace {
    export class MinhaClasse {
        // Implementação da classe
    }

    export interface MinhaInterface {
        // Definição da interface
    }
}

Para usar elementos dentro do namespace, você precisa prefixar com o nome do namespace:

const minhaInstancia = new MeuNamespace.MinhaClasse();

Namespaces aninhados

Namespaces podem ser aninhados para uma organização ainda mais detalhada:

namespace MeuNamespace {
    export namespace SubNamespace {
        export class MinhaSubClasse {
            // Implementação da classe
        }
    }
}

Módulos

Ao contrário dos namespaces, os módulos em TypeScript correspondem mais estreitamente ao módulo ES6 em JavaScript. Eles não adicionam qualquer valor ao escopo global e são mais adaptáveis às técnicas modernas de empacotamento e carregamento de módulos, como CommonJS e AMD.

Como estruturar seu código com Módulos:

Num arquivo meuModulo.ts:

export class MinhaClasse {
    // Implementação da classe
}

export interface MinhaInterface {
    // Definição da interface
}

Para usar elementos de um módulo, você importa eles:

import { MinhaClasse, MinhaInterface } from './meuModulo';

Importação e Exportação de Módulos Avançados:

Exportando como alias

class ClasseInterna {
    // Implementação
}

export { ClasseInterna as MinhaClasseExportada };

Importação com alias

Se houver conflitos de nome ou se o nome for muito longo, você pode usar um alias:

import { MinhaClasseExportada as AliasDeClasse } from './meuModulo';

Importando tudo

import * as TodoMeuModulo from './meuModulo';

const minhaInstancia = new TodoMeuModulo.MinhaClasse();

Exportações padrão

Cada módulo pode ter no máximo uma exportação padrão:

export default class MinhaClassePadrao {
    // Implementação
}

Importando uma exportação padrão:

import MinhaClasse from './meuModulo';

Conclusão

Enquanto namespaces são ótimos para organizar código interno em grandes bases de código TypeScript, módulos são mais alinhados com o ecossistema moderno JavaScript e se adaptam bem com sistemas de carregamento e empacotamento de módulos. Com a crescente adoção de ES6+ e ferramentas como Webpack e Rollup, usar módulos tornou-se a prática padrão recomendada.

Decorators em TypeScript

Levy Henrique Alves Nunes — Fri, 25 Aug 2023 23:30:06 +0000

Os decorators são um recurso proposto para JavaScript e são adotados por TypeScript para adicionar anotações e uma sintaxe de metaprogramação para classes e membros de classes. Eles oferecem uma maneira de adicionar comportamentos adicionais a classes, métodos, propriedades, parâmetros ou acessadores.

O que são decorators e como usá-los

Decorators são funções especiais que podem ser usadas para estender a funcionalidade de classes, métodos, propriedades e parâmetros. Eles são prefixados com @ e podem ser anexados a várias declarações.

Para usar decorators em TypeScript, você precisa habilitar a opção experimentalDecorators em seu arquivo tsconfig.json.

{
  "compilerOptions": {
    "target": "ES5",
    "experimentalDecorators": true
  }
}

Exemplos práticos

1. Logging

Um decorator simples para registrar quando um método é chamado:

function LogMethod(target: Object, propertyKey: string, descriptor: PropertyDescriptor) {
    const originalMethod = descriptor.value;

    descriptor.value = function (...args: any[]) {
        console.log(`Chamado método ${propertyKey} com argumentos: ${JSON.stringify(args)}`);
        return originalMethod.apply(this, args);
    };

    return descriptor;
}

class MathOperations {
    @LogMethod
    add(x: number, y: number): number {
        return x + y;
    }
}

const math = new MathOperations();
math.add(2, 3);  // Log: Chamado método add com argumentos: [2,3]

2. Memoização

Memoização é uma técnica de otimização em que o resultado de uma função para um conjunto específico de entradas é armazenado, e se a mesma entrada ocorrer novamente, o resultado armazenado é retornado em vez de recalculá-lo.

function Memoize(target: Object, propertyKey: string, descriptor: PropertyDescriptor) {
    const originalMethod = descriptor.value;
    const cache = new Map<string, any>();

    descriptor.value = function (...args: any[]) {
        const cacheKey = JSON.stringify(args);
        if (cache.has(cacheKey)) {
            return cache.get(cacheKey);
        }
        const result = originalMethod.apply(this, args);
        cache.set(cacheKey, result);
        return result;
    };

    return descriptor;
}

class Fibonacci {
    @Memoize
    calculate(n: number): number {
        if (n < 2) return n;
        return this.calculate(n - 1) + this.calculate(n - 2);
    }
}

3. Validação com decorators

Podemos usar decorators para validar argumentos de métodos.

function ValidateNonNull(target: Object, propertyKey: string, parameterIndex: number) {
    const originalMethod = target[propertyKey];

    target[propertyKey] = function (...args: any[]) {
        if (args[parameterIndex] == null) {
            throw new Error(`Argument at index ${parameterIndex} should not be null or undefined.`);
        }
        return originalMethod.apply(this, args);
    };
}

class UserService {
    createUser(@ValidateNonNull name: string) {
        // código para criar um usuário
    }
}

Ao usar o decorator acima, a função createUser lançará um erro se o nome fornecido for nulo ou indefinido.

Conclusão

Os decorators em TypeScript oferecem uma poderosa ferramenta de metaprogramação que permite adicionar comportamentos adicionais ao código existente de maneira elegante e reutilizável. Seja para logging, memoização ou validação, os decorators tornam o código mais limpo e mais fácil de manter.

Tipos Avançados em TypeScript

Levy Henrique Alves Nunes — Fri, 25 Aug 2023 23:27:11 +0000

TypeScript, sendo uma superconjunto de JavaScript, fornece uma camada robusta de recursos de tipagem que nos permitem escrever código de maneira mais segura e previsível. Um desses recursos é o conjunto de tipos avançados. Vamos explorar alguns dos mais notáveis: tipos de união e interseção, tipos literais e mapeamento de tipos, e o tipo condicional e infer.

1. Tipos de União e Interseção

1.1 Tipos de União (`Union Types`)

Um tipo de união é uma maneira de dizer que um valor pode ser de um de vários tipos. Por exemplo:

type StringOrNumber = string | number;

Isso significa que a variável que tem esse tipo pode ser tanto uma string quanto um número.

let value: StringOrNumber;
value = 123;  // válido
value = "abc"; // válido
value = true; // erro

1.2 Tipos de Interseção (`Intersection Types`)

Enquanto um tipo de união indica que um valor pode ser de um tipo ou outro, um tipo de interseção combina múltiplos tipos em um:

type Named = {
  name: string;
}

type Aged = {
  age: number;
}

type Person = Named & Aged;

const person: Person = { name: "Alice", age: 30 }; // válido

2. Tipos Literais e Mapeamento de Tipos

2.1 Tipos Literais (`Literal Types`)

Um tipo literal é uma maneira de definir um tipo que só aceita um valor específico. Por exemplo:

type ButtonType = "submit" | "reset";

Isto significa que só aceitamos as strings "submit" ou "reset" para este tipo.

2.2 Mapeamento de Tipos (`Mapped Types`)

Mapeamento de tipos nos permite criar novos tipos com base em propriedades de um tipo existente:

type ReadOnly<T> = {
  readonly [K in keyof T]: T[K];
}

type User = {
  name: string;
  age: number;
}

type UserReadOnly = ReadOnly<User>;

No exemplo acima, UserReadOnly será um tipo onde todas as propriedades são somente leitura.

3. Tipo Condicional e `infer`

Tipo Condicional

Os tipos condicionais nos permitem escolher um tipo com base em uma condição:

type IsString<T> = T extends string ? "yes" : "no";
type Test = IsString<number>; // "no"

Infer

A palavra-chave infer nos permite inferir um tipo dentro do escopo do tipo condicional:

type ExtractArrayElementType<T> = T extends (infer U)[] ? U : never;

type ElementType = ExtractArrayElementType<string[]>; // string

No exemplo acima, inferimos o tipo do elemento do array, que é string, e atribuímos a ElementType.

Conclusão

TypeScript, com seus tipos avançados, nos oferece uma ferramenta poderosa para escrever código mais seguro e auto-documentado. Esses recursos avançados de tipagem, quando usados corretamente, podem reduzir significativamente a probabilidade de erros em tempo de execução e tornar nossas aplicações mais robustas.

Utilizando Operadores com o Angular HTTP Client para Lidar com Requisições HTTP

Levy Henrique Alves Nunes — Wed, 23 Aug 2023 09:59:23 +0000

Quando se trata de desenvolver aplicações web modernas, a comunicação com backends e APIs é crucial. No ecossistema Angular, o HTTP Client é a escolha preferida para esta finalidade. Combinado com os operadores RxJS, ele se transforma em uma ferramenta poderosa para lidar com requisições HTTP de forma eficiente e reativa. Neste post, vamos explorar como você pode usar operadores do RxJS com o Angular HTTP Client para aprimorar a manipulação de eventos e dados em suas requisições.

1. Introdução ao Angular HTTP Client

Antes de nos aprofundarmos nos operadores, vamos entender brevemente o HTTP Client. Ele é um serviço integrado fornecido pelo Angular para fazer requisições HTTP. Retornando observáveis, ele se integra perfeitamente ao paradigma reativo do Angular.

Para começar a usar o HTTP Client, você precisa importar o HttpClientModule em seu módulo:

import { HttpClientModule } from '@angular/common/http';

@NgModule({
  imports: [ HttpClientModule ],
  // ...
})
export class AppModule { }

2. Operadores Comuns e o HTTP Client

Vamos agora ver alguns operadores comuns que podem ser úteis ao trabalhar com o HTTP Client:

`map`

Transforma os itens emitidos por um Observável.

import { map } from 'rxjs/operators';

this.http.get('/api/data').pipe(
  map(data => data['items'])
).subscribe(items => console.log(items));

`catchError`

Permite capturar e lidar com erros de forma elegante.

import { catchError } from 'rxjs/operators';
import { throwError } from 'rxjs';

this.http.get('/api/data').pipe(
  catchError(error => {
    console.error('Erro na requisição:', error);
    return throwError(error);
  })
).subscribe(/* ... */);

`retry`

Retenta uma requisição falha.

import { retry } from 'rxjs/operators';

this.http.get('/api/data').pipe(
  retry(3)
).subscribe(/* ... */);

`switchMap`

Útil quando um valor do Observável depende de outro. Por exemplo, pegar um ID de um stream e depois fazer uma nova requisição.

import { switchMap } from 'rxjs/operators';

this.http.get('/api/user').pipe(
  switchMap(user => this.http.get(`/api/details/${user.id}`))
).subscribe(details => console.log(details));

3. Lidando com Múltiplas Requisições

Com o poder dos operadores, você pode lidar facilmente com múltiplas requisições, seja elas sequenciais ou em paralelo.

Requisições em Paralelo com `forkJoin`

Se você precisa fazer várias requisições e quer esperar até que todas estejam completas:

import { forkJoin } from 'rxjs';

const req1 = this.http.get('/api/req1');
const req2 = this.http.get('/api/req2');

forkJoin([req1, req2]).subscribe(([res1, res2]) => {
  console.log('Resposta 1:', res1);
  console.log('Resposta 2:', res2);
});

4. Práticas Recomendadas

Ao trabalhar com o HTTP Client e operadores RxJS:

Desinscreva-se de Observáveis: Isso é essencial para evitar vazamentos de memória. Use o padrão takeUntil ou o operador first para automaticamente se desinscrever após a primeira emissão.
Manipule erros globalmente: Considere usar um interceptor HTTP para manipular erros globalmente e mostrar notificações, por exemplo.
Reutilize e Componha: Criar funções de serviço reutilizáveis e encadear operadores pode ajudar a manter seu código DRY e legível.

Conclusão

O Angular HTTP Client, em conjunto com operadores RxJS, oferece uma abordagem reativa e flexível para lidar com requisições HTTP. Com uma boa compreensão dos operadores disponíveis e das práticas recomendadas, você pode criar aplicações mais eficientes, reativas e manuteníveis. Experimente e veja como essa combinação pode transformar sua experiência de desenvolvimento Angular!

Utilizando Operadores para Trabalhar com Eventos e Dados em Angular

Levy Henrique Alves Nunes — Wed, 23 Aug 2023 02:54:56 +0000

Angular, em combinação com RxJS, oferece uma abordagem poderosa e flexível para trabalhar com eventos e dados assíncronos. A magia muitas vezes está nos operadores do RxJS que nos permitem transformar, filtrar, combinar e lidar com estes fluxos de dados de diversas maneiras. Neste post, mergulharemos profundamente em como você pode usar os operadores do RxJS para aprimorar sua experiência Angular.

1. Introdução aos Operadores

Operadores são funções puras que permitem a transformação de Observáveis. Eles são a espinha dorsal do RxJS e permitem uma manipulação complexa e declarativa de streams de dados.

Os operadores podem ser categorizados em:

Criação: Como of, from, interval.
Transformação: Como map, pluck, switchMap.
Filtragem: Como filter, debounceTime, distinctUntilChanged.
Combinação: Como merge, combineLatest, concat.
Erro Handling: Como catchError, retry.

2. Trabalhando com Eventos

Uma das aplicações mais comuns dos operadores RxJS em Angular é para lidar com eventos, como cliques do usuário, entradas de formulário e muito mais.

Exemplo: Filtrando Rapidamente Entradas de Usuário

Imagine que você quer fazer uma pesquisa enquanto o usuário digita em uma caixa de entrada, mas quer esperar até que o usuário pare de digitar por pelo menos 500ms (para evitar chamadas de API desnecessárias):

import { Component, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';
import { debounceTime, distinctUntilChanged, switchMap } from 'rxjs/operators';

@Component({
  selector: 'app-pesquisa',
  template: `
    <input [formControl]="campoPesquisa">
  `
})
export class PesquisaComponent implements OnInit {

  campoPesquisa = new FormControl();

  ngOnInit() {
    this.campoPesquisa.valueChanges.pipe(
      debounceTime(500),
      distinctUntilChanged(),
      switchMap(termo => this.buscarDados(termo))
    ).subscribe(resultado => {
      console.log(resultado);
    });
  }

  buscarDados(termo: string) {
    // Aqui, faça sua chamada de API ou busca de dados.
  }
}

Aqui, debounceTime garante que esperemos 500ms após a última alteração antes de prosseguir. distinctUntilChanged garante que não façamos a busca se o termo de pesquisa não mudou. switchMap é usado para lidar com a chamada assíncrona, garantindo que apenas a mais recente seja considerada.

3. Trabalhando com Dados

RxJS é excelente para lidar com dados, especialmente em situações onde os dados são recebidos assincronamente.

Exemplo: Combinando Dados de Múltiplas Fontes

Suponha que você tenha dois endpoints de API e queira combinar os resultados:

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { combineLatest } from 'rxjs';
import { map } from 'rxjs/operators';

@Component({
  selector: 'app-dados-combinados',
  template: `
    <!-- Seu template aqui -->
  `
})
export class DadosCombinadosComponent implements OnInit {

  dadosCombinados: any;

  constructor(private http: HttpClient) {}

  ngOnInit() {
    const dados1$ = this.http.get('https://api.meusite.com/dados1');
    const dados2$ = this.http.get('https://api.meusite.com/dados2');

    combineLatest([dados1$, dados2$]).pipe(
      map(([dados1, dados2]) => {
        return { ...dados1, ...dados2 };
      })
    ).subscribe(resultado => {
      this.dadosCombinados = resultado;
    });
  }
}

Aqui, combineLatest é usado para combinar os resultados dos dois observáveis. O operador map é usado para transformar a estrutura dos dados como desejado.

4. Manipulação de Erros

Em qualquer aplicação, você inevitavelmente encontrará erros, especialmente ao lidar com operações assíncronas como chamadas de API.

import { catchError } from 'rxjs/operators';
import { of } from 'rxjs';

// ...

meuObservable.pipe(
  catchError(err => {
    console.error('Ocorreu um erro:', err);
    return of([]); // Retorna um valor padrão
  })
).subscribe(/* ... */);

O operador catchError permite que você intercepte e trate erros, e até substitua o valor emitido no caso de um erro.

Conclusão

O RxJS e seus operadores oferecem uma ferramenta poderosa para manipular eventos e dados em aplicações Angular. Com uma compreensão sólida de como usar esses operadores, você pode escrever código mais limpo, eficiente e reativo. Mergulhe nos operadores e experimente-os em seus projetos Angular para explorar seu verdadeiro potencial!

Criando Observáveis e Inscritores em Componentes Angular

Levy Henrique Alves Nunes — Wed, 23 Aug 2023 02:52:15 +0000

Ao desenvolver aplicações Angular, você provavelmente encontrará a necessidade de lidar com operações assíncronas, seja para buscar dados de uma API, responder a eventos do usuário ou qualquer outra operação que não ocorra instantaneamente. Uma das maneiras mais elegantes de lidar com operações assíncronas em Angular é usando Observáveis do RxJS. Neste post, vamos nos aprofundar em como criar Observáveis e Inscritores (Subscribers) em componentes Angular.

1. Introdução aos Observáveis

Observáveis são uma parte central do RxJS, uma biblioteca de programação reativa amplamente usada em aplicações Angular. Eles fornecem uma maneira de produzir uma sequência de valores usando uma API baseada em push, onde os valores são "empurrados" para os inscritores.

Criando um Observável Simples

Para criar um observável, você pode usar a função new Observable() do RxJS:

import { Observable } from 'rxjs';

const meuObservable = new Observable(subscriber => {
  subscriber.next('Olá');
  subscriber.next('Mundo');
  subscriber.complete();
});

2. Inscritores (Subscribers)

Um inscrito é basicamente o consumidor de um observável. Para iniciar a emissão de valores, você deve se inscrever no observável:

meuObservable.subscribe(valor => console.log(valor));

Quando executado, isso irá imprimir:

Olá
Mundo

3. Integrando Observáveis em Componentes Angular

Ao trabalhar com Angular, muitas vezes você desejará integrar observáveis diretamente em seus componentes.

Exemplo: Buscando dados de uma API

Vamos considerar um serviço que retorna dados de uma API:

// meu-servico.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class MeuServicoService {

  constructor(private http: HttpClient) { }

  buscarDados(): Observable<any> {
    return this.http.get('https://api.exemplo.com/dados');
  }
}

No componente, você pode se inscrever nesse observável:

// meu-componente.component.ts

import { Component, OnInit } from '@angular/core';
import { MeuServicoService } from './meu-servico.service';

@Component({
  selector: 'app-meu-componente',
  templateUrl: './meu-componente.component.html'
})
export class MeuComponenteComponent implements OnInit {

  dados: any;

  constructor(private meuServico: MeuServicoService) { }

  ngOnInit(): void {
    this.meuServico.buscarDados().subscribe(
      data => this.dados = data,
      error => console.error('Erro ao buscar dados:', error)
    );
  }
}

4. Lidando com Desinscrição

É importante lembrar de desinscrever-se de observáveis para evitar vazamentos de memória. O Angular fornece o ciclo de vida do componente ngOnDestroy para esse propósito:

import { Component, OnInit, OnDestroy } from '@angular/core';
import { MeuServicoService } from './meu-servico.service';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-meu-componente',
  templateUrl: './meu-componente.component.html'
})
export class MeuComponenteComponent implements OnInit, OnDestroy {

  dados: any;
  inscricao!: Subscription;

  constructor(private meuServico: MeuServicoService) { }

  ngOnInit(): void {
    this.inscricao = this.meuServico.buscarDados().subscribe(
      data => this.dados = data,
      error => console.error('Erro ao buscar dados:', error)
    );
  }

  ngOnDestroy(): void {
    this.inscricao.unsubscribe();
  }
}

Conclusão

Os Observáveis fornecem uma maneira poderosa de trabalhar com operações assíncronas em Angular. Compreender como criar e se inscrever em observáveis, bem como gerenciar a desinscrição, é fundamental para desenvolver aplicações Angular eficientes e sem vazamentos de memória. O RxJS, com sua ampla variedade de operadores, torna a experiência de trabalhar com observáveis ainda mais enriquecedora e permite manipular streams de dados de maneira muito flexível.

Encadeamento com RxJS

Levy Henrique Alves Nunes — Wed, 23 Aug 2023 02:48:48 +0000

Ao trabalhar com aplicações modernas e reativas, uma das bibliotecas mais populares para lidar com fluxos de dados assíncronos é o RxJS. Neste post, vamos explorar o encadeamento de operadores usando o RxJS.

O que é RxJS?

RxJS é uma biblioteca para programação reativa usando Observables, para facilitar a composição de código assíncrono ou baseado em callback. Simplificando, ela permite que você crie e manipule sequências de eventos ou dados de forma declarativa.

Encadeamento com Operadores

Uma das características mais poderosas do RxJS é a capacidade de encadear operadores. Os operadores são funções puras que permitem a composição e transformação de observables.

Vamos dar uma olhada em um exemplo básico:

import { from } from 'rxjs';
import { filter, map } from 'rxjs/operators';

const numbers = from([1, 2, 3, 4, 5]);

const evenSquares = numbers.pipe(
  filter(num => num % 2 === 0),
  map(num => num * num)
);

evenSquares.subscribe(value => console.log(value));

No exemplo acima, começamos com um Observable que emite números de 1 a 5. Primeiro, filtramos os números ímpares e depois mapeamos os números restantes para seus quadrados. O resultado seria:

4
16

Principais operadores e seu encadeamento

Aqui estão alguns dos operadores mais comuns e como você pode encadeá-los:

map: Transforma os valores emitidos pelo observable.
filter: Filtra os valores com base em uma condição específica.
mergeMap/flatMap: Mapeia cada valor para um observable e os "achata" em um único observable.
switchMap: Como o mergeMap, mas cancela qualquer emissão anterior se um novo valor é emitido.
catchError: Captura erros no observable e permite tratá-los ou substituí-los.

Exemplo com encadeamento de múltiplos operadores

Vamos imaginar que queremos obter dados de uma API, transformá-los e filtrar alguns resultados.

import { of } from 'rxjs';
import { catchError, filter, map, switchMap } from 'rxjs/operators';

const apiCall = (url: string) => {
  // Aqui você poderia fazer um fetch ou algo similar
  return of([{ id: 1, name: 'Example' }]); // Dummy data
};

const data$ = of('api/my-endpoint').pipe(
  switchMap(url => apiCall(url)),
  map(data => data.name),
  filter(name => name !== 'ExcludeMe'),
  catchError(error => {
    console.error('Error:', error);
    return of([]);
  })
);

data$.subscribe(data => console.log(data));

Conclusão

O encadeamento com RxJS proporciona uma maneira elegante e declarativa de manipular streams de dados. Com uma compreensão sólida dos operadores disponíveis e como encadeá-los, você pode escrever código assíncrono mais limpo e compreensível. Experimente em seus projetos e veja por si mesmo o poder da programação reativa!

Operadores RxJS: Manipulando Observáveis com Elegância

Levy Henrique Alves Nunes — Wed, 23 Aug 2023 02:45:19 +0000

No mundo do RxJS, os Observáveis podem parecer estrelas no começo. No entanto, assim que começamos a lidar com sequências mais complexas e variadas, os operadores entram em cena como verdadeiros heróis. Neste post, mergulharemos no universo dos operadores RxJS e descobriremos como eles podem elevar nossa programação reativa a um novo patamar.

1. O que são Operadores?

No contexto do RxJS, operadores são funções puras que permitem você manipular, transformar, filtrar e combinar Observáveis. Eles são essenciais para a programação reativa, permitindo-nos trabalhar com sequências assíncronas de forma elegante e declarativa.

2. Tipos de Operadores

Os operadores podem ser categorizados em dois tipos principais:

a) Operadores de Criação

Eles permitem criar Observáveis a partir de várias fontes.

of: Cria um Observável a partir de valores específicos.

  import { of } from 'rxjs';

  const observavel = of(1, 2, 3);

from: Transforma outras estruturas, como arrays ou promises, em Observáveis.

  import { from } from 'rxjs';

  const observavel = from([4, 5, 6]);

b) Operadores de Pipeable

Estes operadores são usados para transformar ou manipular valores emitidos por Observáveis.

map: Aplica uma função a cada valor emitido.

  import { of } from 'rxjs';
  import { map } from 'rxjs/operators';

  const observavel = of(1, 2, 3).pipe(map(x => x * 2));

filter: Filtra os valores com base em uma condição específica.

  import { of } from 'rxjs';
  import { filter } from 'rxjs/operators';

  const observavel = of(1, 2, 3, 4, 5).pipe(filter(x => x % 2 === 0));

3. Combinando Operadores

Uma das maiores vantagens do RxJS é a capacidade de encadear operadores para criar pipelines de transformação.

import { of } from 'rxjs';
import { map, filter } from 'rxjs/operators';

const observavel = of(1, 2, 3, 4, 5)
  .pipe(
    filter(x => x % 2 === 0),
    map(x => x * 10)
  );

Neste exemplo, filtramos números pares e depois multiplicamos o resultado por 10.

4. Conclusão

Os operadores RxJS são ferramentas indispensáveis na caixa de ferramentas do desenvolvedor reativo. Eles fornecem a flexibilidade e o poder para manipular Observáveis de formas quase infinitas. Ao compreender e dominar os operadores, você estará bem preparado para lidar com as complexidades da programação assíncrona e reativa em suas aplicações.

Lembre-se de que o RxJS possui uma vasta gama de operadores, cada um com sua própria utilidade e característica. Portanto, é altamente recomendável explorar a documentação oficial para se aprofundar ainda mais nesse universo!

Forem: Levy Henrique Alves Nunes

RxJS Subjects em Angular

Diferenças entre Subject, BehaviorSubject, ReplaySubject e AsyncSubject

1. Subject

2. BehaviorSubject

3. ReplaySubject

4. AsyncSubject

Exemplos Práticos em Aplicações Angular

1. Subject

2. BehaviorSubject

3. ReplaySubject

4. AsyncSubject

Conclusão

Transformações de Tipo em Tempo de Compilação no TypeScript

Casting vs. Asserções de Tipo: Uma Distinção Fundamental

O que é Casting?

Asserções de Tipo em TypeScript

Tipos de Asserção Personalizados: Indo Além dos Tipos Básicos

Introduzindo Marcas de Tipo

Validação e Asserção

Conclusão

Polimorfismo e Generics Avançados em TypeScript

Generics com Restrições

Exemplo:

Usando a palavra-chave keyof

Exemplo:

Usando keyof com Generics:

Conclusão

Manipulação Avançada de Tipos com Utility Types

Entendendo Partial, Readonly, Record, e outros

1. Partial<T>

2. Readonly<T>

3. Record<K,T>

Casos práticos: transformando tipos com utility types

1. Atualização Parcial

2. Objetos Configuráveis

3. Objetos Imutáveis

Outros Utility Types úteis:

Conclusão

Namespaces e Módulos em TypeScript

Namespaces

Como estruturar seu código com Namespaces:

Namespaces aninhados

Módulos

Como estruturar seu código com Módulos:

Importação e Exportação de Módulos Avançados:

Exportando como alias

Importação com alias

Importando tudo

Exportações padrão

Conclusão

Decorators em TypeScript

O que são decorators e como usá-los

Exemplos práticos

1. Logging

2. Memoização

3. Validação com decorators

Conclusão

Tipos Avançados em TypeScript

1. Tipos de União e Interseção

1.1 Tipos de União (Union Types)

1.2 Tipos de Interseção (Intersection Types)

2. Tipos Literais e Mapeamento de Tipos

2.1 Tipos Literais (Literal Types)

2.2 Mapeamento de Tipos (Mapped Types)

3. Tipo Condicional e infer

Tipo Condicional

Infer

Conclusão

Utilizando Operadores com o Angular HTTP Client para Lidar com Requisições HTTP

1. Introdução ao Angular HTTP Client

2. Operadores Comuns e o HTTP Client

map

catchError

retry

switchMap

3. Lidando com Múltiplas Requisições

Requisições em Paralelo com forkJoin

4. Práticas Recomendadas

Conclusão

Usando a palavra-chave `keyof`

Usando `keyof` com Generics:

1. `Partial<T>`

2. `Readonly<T>`

3. `Record<K,T>`

1.1 Tipos de União (`Union Types`)

1.2 Tipos de Interseção (`Intersection Types`)

2.1 Tipos Literais (`Literal Types`)

2.2 Mapeamento de Tipos (`Mapped Types`)

3. Tipo Condicional e `infer`

`map`

`catchError`

`retry`

`switchMap`

Requisições em Paralelo com `forkJoin`