angular - Egenskapen har ingen initialverdi og er ikke definitivt tilordnet i konstruktøren

Jeg får en feil når jeg gir

export class UserComponent implements OnInit {
    user: User;

    constructor() { }

    ngOnInit() {
        this.user = {
            firstName : "test",
            lastName : "test",
            age : 40,
            address: {
                street : "Test",
                city : "test",
                state: "test"
            }
        }
    }
}

Jeg får denne feilen (se bilde 1):

Property 'user' has no initializer and is not definitely assigned in the constructor.

user blir instantiert fra User som er deklarert i User.ts av denne koden:

export interface User {
    firstName: string,
    lastName: string,
    age?: number,
    address?: {
        street?: string,
        city?: string,
        state?: string
    }
}

Hvis jeg legger til et spørsmålstegn (?) til user, dukker en annen feil opp i en annen fil (se bilde 2):

Error occurs in the template of component UserComponent.
src/app/components/users/users.component.html:2:44 -
    error TS2532: Object is possibly 'undefined'.

2 <ul class="list-unstyled" *ngIf="loaded && users?.length > 0">
                                             ~~~~~~~~~~~~~~~~~

Svar #1

Dette skyldes TypeScripts strenge klasseinitialisering.

https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-7.html#strict-class-initialization

For å løse dette problemet må du enten erklære at typen kan være både Foo|undefined, eller bruke '!' symbolet for å indikere definitiv tildeling som beskrevet i dokumentasjonen ovenfor:

Sak 1:

@Component({...})
export class Component {
  @Input() myInput: string|undefined;
}

Vi indikerer at typen kan være enten en streng eller udefinert.

Sak 2:

@Component({...})
export class Component {
  @Input() myInput!: string;
}

I dette tilfellet bruker vi !-symbolet for å indikere at vi er klar over at myInput ikke er initialisert i konstruktøren, og at vi vil håndtere det et annet sted.

Alternativ løsning

Hvis du ikke bryr deg om streng klasseinitialisering, kan du deaktivere funksjonen helt i din tsconfig.json ved å legge til et flagg i dine kompilatoralternativer

{
 "compilerOptions": {
    "strictPropertyInitialization": false
  }
}

Merk: Du må starte TypeScript-serveren på nytt for at compilerOptions skal brukes på nytt. Den enkleste måten å gjøre dette på er å ganske enkelt starte IDE-en din på nytt.

Svar #2

Hvis ingen av disse fungerer, kan du prøve det

  "angularCompilerOptions": {
    ....
    "strictPropertyInitialization": false,
    ...

  }

Relaterte artikler