Właściwość „…” nie ma inicjatora i nie jest ostatecznie przypisana w konstruktorze

w mojej aplikacji Angular mam komponent:

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);
  }
}

ale we właściwości „czyni” mam błąd. Nie wiem, co z tym zrobić ...

Myślę, że używasz najnowszej wersji TypeScript. Zobacz sekcję „Ścisłe inicjowanie klas” w link.

Istnieją dwa sposoby, aby to naprawić:

O. Jeśli używasz VSCode, musisz zmienić wersję TS używaną przez edytor.

B. Po prostu zainicjalizuj tablicę, gdy zadeklarujesz ją wewnątrz konstruktora,

makes: any[] = [];

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

Po prostu przejdź do tsconfig.json i ustaw

"strictPropertyInitialization": false

aby pozbyć się błędu kompilacji.

W przeciwnym razie musisz zainicjalizować wszystkie swoje zmienne, co jest trochę denerwujące

Dzieje się tak, ponieważ TypeScript 2.7 zawiera ścisłe sprawdzanie klasy, gdzie wszystkie właściwości powinny zostać zainicjowane w konstruktorze. Obejściem problemu jest dodanie !jako przyrostka do nazwy zmiennej:

makes!: any[];

Komunikat możemy otrzymać Property has no initializer and is not definitely assigned in the constructorpodczas dodawania konfiguracji w tsconfig.jsonpliku, aby projekt Angular był skompilowany w trybie ścisłym:

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

Rzeczywiście, kompilator następnie skarży się, że zmienna składowa nie jest zdefiniowana przed użyciem.

Na przykład zmiennej składowej, która nie jest zdefiniowana w czasie kompilacji, zmienna składowa mająca @Inputdyrektywę:

@Input() userId: string;

Moglibyśmy wyciszyć kompilator, stwierdzając, że zmienna może być opcjonalna:

@Input() userId?: string;

Ale wtedy musielibyśmy poradzić sobie z przypadkiem niezdefiniowanej zmiennej i zaśmiecać kod źródłowy takimi instrukcjami:

if (this.userId) {
} else {
}

Zamiast tego, wiedząc, że wartość tej zmiennej składowej zostanie zdefiniowana w czasie, to znaczy zostanie zdefiniowana przed użyciem, możemy powiedzieć kompilatorowi, aby nie martwił się, że nie zostanie zdefiniowana.

Sposobem na przekazanie tego kompilatorowi jest dodanie ! definite assignment assertionoperatora, na przykład:

@Input() userId!: string;

Teraz kompilator rozumie, że ta zmienna, chociaż nie została zdefiniowana w czasie kompilacji, powinna zostać zdefiniowana w czasie wykonywania i w czasie, zanim zostanie użyta.

Teraz aplikacja musi upewnić się, że ta zmienna została zdefiniowana przed użyciem.

Jako dodatkowe zabezpieczenie możemy zapewnić, że zmienna jest definiowana, zanim jej użyjemy.

Możemy stwierdzić, że zmienna jest zdefiniowana, to znaczy, że wymagane powiązanie wejściowe zostało faktycznie dostarczone przez kontekst wywołujący:

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();
}

Wiedząc, że zmienna została zdefiniowana, można jej teraz użyć:

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

Należy zauważyć, że ngOnInitmetoda jest wywoływana po próbie powiązań wejściowych, nawet jeśli żadne rzeczywiste dane wejściowe nie zostały dostarczone do powiązań.

Podczas gdy ngOnChangesmetoda jest wywoływana po próbie powiązań wejściowych i tylko wtedy, gdy rzeczywiste dane wejściowe zostały dostarczone do powiązań.

Możesz również wykonać następujące czynności, jeśli naprawdę nie chcesz go inicjalizować.

makes?: any[];

Musisz albo wyłączyć --strictPropertyInitializationten Sajeetharan, o którym mowa, albo zrobić coś takiego, aby spełnić wymóg inicjalizacji:

makes: any[] = [];

Począwszy od TypeScript 2.7.2, musisz zainicjować właściwość w konstruktorze, jeśli nie została ona przypisana w momencie deklaracji.

Jeśli pochodzisz z Vue, możesz spróbować następujących rzeczy:

• Dodaj "strictPropertyInitialization": truedo swojego tsconfig.json

• Jeśli nie jesteś zadowolony z wyłączenia go, możesz również spróbować tego makes: any[] | undefined. Aby to zrobić, musisz uzyskać dostęp do właściwości za pomocą ?.operatora null check ( ), tjthis.makes?.length

• Możesz równie dobrze spróbować makes!: any[];, to mówi TS, że wartość zostanie przypisana w czasie wykonywania.

Podczas uaktualniania przy użyciu [email protected] jego kompilator ściśle przestrzega zasad dla typu tablicowego zadeklarowanego wewnątrz konstruktora klasy komponentów.

Aby rozwiązać ten problem, zmień kod, w którym są zadeklarowane w kodzie, lub unikaj kompilatora, aby dodać właściwość „strictPropertyInitialization”: false w pliku „tsconfig.json” i uruchom ponownie npm start.

Angular Web and Mobile Application Development można przejść do www.jtechweb.in

Czy nie możesz po prostu użyć określonego asercji przydziału? (Zobacz https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-7.html#definite-assignment-assertions )

tj. zadeklarowanie własności jako makes!: any[];The! zapewnia, że ​​maszynopis na pewno będzie miał wartość w czasie wykonywania.

Przepraszam, że nie próbowałem tego w trybie kątowym, ale działało świetnie, gdy miałem dokładnie ten sam problem w Reakcie.

Uzyskaj ten błąd podczas dodawania Node do mojego projektu Angular -

TSError:? Nie można skompilować TypeScript: (ścieżka) /base.api.ts:19:13 - błąd TS2564: Właściwość „apiRoot Path” nie ma inicjatora i nie jest ostatecznie przypisana w konstruktorze.

prywatny apiRootPath: string;

Rozwiązanie -

Dodano "strictPropertyInitialization": falsew „compilerOptions” pliku tsconfig.json .

my package.json -

"dependencies": {
    ...
    "@angular/common": "~10.1.3",
    "@types/express": "^4.17.9",
    "express": "^4.17.1",
    ...
}

Ref URL - https://www.ryadel.com/en/ts2564-ts-property-has-no-initializer-typescript-error-fix-visual-studio-2017-vs2017/

Błąd jest uzasadniony i może uniemożliwić awarię aplikacji. Wpisałeś makesjako tablicę, ale może być również niezdefiniowany.

Masz 2 opcje (zamiast wyłączać przyczynę istnienia ...):

1. W twoim przypadku najlepiej jest wpisać makesmożliwie niezdefiniowane.

makes?: any[]
// or
makes: any[] | undefined

W takim przypadku kompilator poinformuje Cię za każdym razem, gdy spróbujesz uzyskać do makesniego dostęp , że może to być niezdefiniowane. Na przykład, jeśli napiszesz // <-- Not okponiższe wiersze przed getMakeszakończeniem lub jeśli się getMakesnie powiedzie, zostanie zgłoszony błąd kompilacji. W przeciwnym razie aplikacja ulegnie awarii.

makes[0] // <-- Not ok
makes.map(...) // <-- Not ok

if (makes) makes[0] // <-- Ok
makes?.[0] // <-- Ok
(makes ?? []).map(...) // <-- Ok

2. Możesz założyć, że to się nigdy nie zawiedzie i nigdy nie będziesz próbował uzyskać do niego dostępu przed inicjalizacją, pisząc poniższy kod (ryzykowne!). Więc kompilator nie zajmie się tym.

makes!: any[]

zmienić

fieldname?: any[]; 

do tego:

fieldname?: any;