Prueba las nuevas migraciones de entrada de signals

¿Por qué migrar?

Las entradas de signals proporcionan fantásticas actualizaciones de la funcionalidad de entrada al tiempo que mantienen la paridad de características con las entradas basadas en decoradores.

Una de las principales razones por las que los equipos querrán actualizar es la seguridad de tipos, que permite a los desarrolladores eliminar patrones de código frágiles como las aserciones no nulas en el código. También hay un nuevo patrón que simplifica mucho el control de las entradas.

Considera el siguiente ejemplo, donde MyComponent está utilizando el gancho del ciclo de vida ngOnChanges para realizar un seguimiento de la actualización de la entrada:

export class MyComponent implements OnChanges {
  @Input() myField: string = 'Initial';
  result = expensiveResultUsingInput(this.myField);

  ngOnChanges(changes: SimpleChanges) {
    if (changes['myField']) {
      // re-compute some expensive result based on `this.myField`..
      this.result = expensiveResultUsingInput(this.myField);
    }
  }
}

Este código puede ser refactorizado usando entradas de signals y la primitiva computada de Angular:

export class MyComponent {
  readonly myField = input('Initial');
  readonly result = computed(() => expensiveResultUsingInput(this.myField()));
}

Nuevas soluciones como esta surgirán a lo largo de tu proyecto y en el ecosistema porque los desarrolladores están naturalmente capacitados para usar APIs basadas en signals convenientes para escribir código más claro y efectivo.

Encontramos que las signals en general simplifican el modelo mental de los desarrolladores de Angular, ya que es mucho más fácil razonar sobre cómo se sincroniza el estado con la interfaz de usuario y cómo fluye el estado.

He aquí cómo

Al igual que con otras migraciones en el pasado, puedes ejecutar la migración a través de la CLI de Angular, pero también estamos elevando nuestros esfuerzos de migración para que estén disponibles como acciones de refactorización de código en VSCode.

Al hacer clic en la bombilla amarilla se revelan nuevas acciones sugeridas para migrar entradas basadas en decoradores a entradas basadas en signals.

Y cuando utilices la CLI de Angular, ejecuta el siguiente comando:

ng generate @angular/core:signal-inputs

Tras ejecutar la migración, la herramienta no sólo actualizará las declaraciones @Input, sino que también ajustará las referencias a sus entradas. La migración introduce variables de forma inteligente cuando es necesario, para integrar razonablemente las signals en el código existente de su aplicación.

Consideremos el siguiente ejemplo.

Antes:

@Component(…)
export class MyComp {
  @Input() user?: User|undefined;
  printUser() {
    if (this.user) {
      this.user.printDetails();
    }
  }
}

Despúes

@Component(...)
export class MyComp {
  readonly user = input<User>();

  printUser() {
    const user = this.user();
    if (user) {
      user.printDetails();
    }
  }
}

La migración es configurable y cuenta con algunas opciones que te ayudarán a elegir la estrategia adecuada para migrar tu código, ya sea todo a la vez o quizás sólo rutas específicas. Puedes aprender más en la documentación de migración en blog.angular.dev.

Estamos entusiasmados por seguir avanzando con Angular y acercarnos cada vez más a hacer realidad nuestra visión de un nuevo modelo de reactividad que te permita entregar aplicaciones web con confianza.

Autores: Paul Gschwendtner Mark Thompson

Fuente