La propiedad '...' no tiene inicializador y no está definitivamente asignada en el constructor

en mi aplicación Angular tengo un componente:

import { MakeService } from './../../services/make.service';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-vehicle-form',
  templateUrl: './vehicle-form.component.html',
  styleUrls: ['./vehicle-form.component.css']
})
export class VehicleFormComponent implements OnInit {
  makes: any[];
  vehicle = {};

  constructor(private makeService: MakeService) { }

  ngOnInit() {
    this.makeService.getMakes().subscribe(makes => { this.makes = makes
      console.log("MAKES", this.makes);
    });
  }

  onMakeChange(){
    console.log("VEHICLE", this.vehicle);
  }
}

pero en la propiedad "hace" tengo un error. No sé qué hacer con eso ...

Creo que está utilizando la última versión de TypeScript. Consulte la sección "Inicialización estricta de clases" en el link.

Hay dos formas de solucionar este problema:

R. Si está usando VSCode, necesita cambiar la versión de TS que usa el editor.

B. Simplemente inicialice la matriz cuando la declare dentro del constructor,

makes: any[] = [];

constructor(private makeService: MakeService) { 
   // Initialization inside the constructor
   this.makes = [];
}

Simplemente vaya a tsconfig.json y configure

"strictPropertyInitialization": false

para deshacerse del error de compilación.

De lo contrario, debe inicializar todas sus variables, lo cual es un poco molesto

Esto se debe a que TypeScript 2.7 incluye una comprobación de clase estricta donde todas las propiedades deben inicializarse en el constructor. Una solución es agregar !como sufijo al nombre de la variable:

makes!: any[];

Es posible que recibamos el mensaje Property has no initializer and is not definitely assigned in the constructoral agregar alguna configuración en el tsconfig.jsonarchivo para tener un proyecto Angular compilado en modo estricto:

"compilerOptions": {
  "strict": true,
  "noImplicitAny": true,
  "noImplicitThis": true,
  "alwaysStrict": true,
  "strictNullChecks": true,
  "strictFunctionTypes": true,
  "strictPropertyInitialization": true,

De hecho, el compilador luego se queja de que una variable miembro no está definida antes de ser utilizada.

Para un ejemplo de una variable miembro que no está definida en tiempo de compilación, una variable miembro que tiene una @Inputdirectiva:

@Input() userId: string;

Podríamos silenciar el compilador indicando que la variable puede ser opcional:

@Input() userId?: string;

Pero entonces, tendríamos que lidiar con el caso de que la variable no esté definida y saturar el código fuente con algunas de estas declaraciones:

if (this.userId) {
} else {
}

En cambio, conociendo el valor de esta variable miembro se definiría en el tiempo, es decir, se definiría antes de ser utilizada, podemos decirle al compilador que no se preocupe por no estar definida.

La forma de decirle esto al compilador es agregar el ! definite assignment assertionoperador, como en:

@Input() userId!: string;

Ahora, el compilador entiende que esta variable, aunque no está definida en tiempo de compilación, se definirá en tiempo de ejecución y en el tiempo, antes de que se utilice.

Ahora depende de la aplicación asegurarse de que esta variable esté definida antes de ser utilizada.

Como protección adicional, podemos afirmar que la variable se está definiendo, antes de usarla.

Podemos afirmar que la variable está definida, es decir, el contexto de llamada proporcionó el enlace de entrada requerido:

private assertInputsProvided(): void {
  if (!this.userId) {
    throw (new Error("The required input [userId] was not provided"));
  }
}

public ngOnInit(): void {
  // Ensure the input bindings are actually provided at run-time
  this.assertInputsProvided();
}

Sabiendo que se definió la variable, la variable ahora se puede usar:

ngOnChanges() {
  this.userService.get(this.userId)
    .subscribe(user => {
      this.update(user.confirmedEmail);
    });
}

Tenga en cuenta que el ngOnInitmétodo se llama después del intento de vinculación de entrada, esto, incluso si no se proporcionó una entrada real a las vinculaciones.

Mientras que el ngOnChangesmétodo se llama después del intento de vinculación de entrada, y solo si se proporcionó una entrada real a las vinculaciones.

--strictPropertyInitializationDebe desactivar el al que se refirió Sajeetharan, o hacer algo como esto para satisfacer el requisito de inicialización:

makes: any[] = [];

También puede hacer lo siguiente si realmente no desea inicializarlo.

makes?: any[];

Cuando actualiza usando [email protected], su compilador sigue estrictamente las reglas para el tipo de matriz declare dentro del constructor de la clase del componente.

Para solucionar este problema, cambie el código donde se declaran en el código o evite que el compilador agregue la propiedad "strictPropertyInitialization": false en el archivo "tsconfig.json" y vuelva a ejecutar npm start.

Desarrollo de aplicaciones móviles y web angulares puede ir a www.jtechweb.in

A partir de TypeScript 2.7.2, debe inicializar una propiedad en el constructor si no se asignó en el momento de la declaración.

Si viene de Vue, puede probar lo siguiente:

• Agregue "strictPropertyInitialization": truea su tsconfig.json

• Si no está satisfecho con la desactivación, también puede intentar esto makes: any[] | undefined. Hacer esto requiere que acceda a las propiedades con el ?.operador check ( ) nulo , es decirthis.makes?.length

• También podría intentarlo makes!: any[];, esto le dice a TS que el valor se asignará en tiempo de ejecución.

¿No puedes usar una afirmación de asignación definida? (Ver https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-7.html#definite-assignment-assertions )

es decir, declarar la propiedad como makes!: any[];The! asegura mecanografiado que definitivamente habrá un valor en tiempo de ejecución.

Lo siento, no he probado esto en angular, pero funcionó muy bien para mí cuando tenía exactamente el mismo problema en React.