Skip to main content
3 de 6
se añadieron 6 caracteres en el cuerpo
nestdan
  • 1.3k
  • 1
  • 8
  • 14

En el código del tutorial que seguís es para la versión 11 ahora hay restricciones en tsconfig.json que hacen que el código tenga en cuenta las asignaciones que comentas.

Cuando un valor es nulo o indefinido, debemos probar esos valores antes de usar métodos o propiedades con ese valor. Al igual que verificar si no está definido antes de usar una propiedad opcional los valores que pueden ser nulos o indefinidos no se pueden acceder normalmente, y los valores nulos e indefinidos no se pueden asignar a una propiedad de cualquier tipo si

strictNullChecks esta en on Podes ver la teoría de como tener esto en cuenta en:

strictNullChecks on

También la forma de trabajar con uniones de tipos estrechándolos ( Narrowing) mediante la comprobación de su tipo con typeof

Para Non-null Assertion Operador (Postfix !):

TypeScript también tiene una sintaxis especial para eliminar valores nulos e indefinidos de un tipo sin realizar ninguna verificación explícita. operador! después de cualquier expresión es efectivamente una afirmación de tipo de que el valor no es nulo o indefinido

Son algunas de las cosas a tener en cuenta para que el código de tu ejemplo funcione en las nuevas versiones de Angular

----------------------------------------------
src/app/shared/components/employee-form/employee-form.component.ts:15:3 - error TS2564: Property
 'employeeForm' has no initializer and is not definitely assigned in the constructor.
Lo solucionamos con ! Escritura ! después de cualquier expresión es efectivamente
 una afirmación de tipo de que el valor no es nulo o indefinido:
 employeeForm!: FormGroup
-----------------------------------

src/app/shared/components/employee-form/employee-form.component.ts:38:50 - error TS2345: Argument of type 'string | null' is not assignable to parameter of type 'string'.
  Type 'null' is not assignable to type 'string'.
const employeeId = this.employee?.id || null;
      this.employeesSvc.onSaveEmployee(employee, employeeId!);
-----------------------------------------------------------------------
src/app/shared/components/employee-form/employee-form.component.ts:50:14 - error TS2531: Object is possibly 'null'.
isValidField(field: string): string {
    const validatedField = this.employeeForm.get(field);
    return (!validatedField?.valid && validatedField?.touched)
      ? 'is-invalid' : validatedField?.touched ? 'is-valid' : '';
  }
------------------------------------------------------------------
otro hay varios con lo mismo
onGoToEdit(): void {
    if ( this.navigationExtras.state?.value === 'undefined') {
      this.navigationExtras.state.value = this.employee;
      this.router.navigate(['edit'], this.navigationExtras);
    }
    
  }
----------------------------------
otro
async onGoToDelete(): Promise<void> {
    try {
      await this.employeesSvc.onDeleteEmployees(this.employee?.id!);
      alert('Deleted');
      this.onGoBackToList();
    } catch (err) {
      console.log(err);
    }
  }

  onGoBackToList(): void {
    this.router.navigate(['list']);
  }


}
--------------------------
otro con 
 src/app/app.module.ts:25:49 - error TS2339: Property 'firebaseConfig' does not exist on type '{ production: boolean; }'.

25     AngularFireModule.initializeApp(environment.firebaseConfig)
lo debe de haber explicado en el tutorial o podes consultar esta pregunta que respondieron
https://stackoverflow.com/a/44033177/8957405

Aplique las correcciones para que pueda funcionar en el código que muestro salvo la ultima con respecto a firebase para eso ya hay una una forma de configuración en firebaseConfig

El codigo del tutorial con las correcciones anteriores

tutorial

nestdan
  • 1.3k
  • 1
  • 8
  • 14