array av objekttyp i typescript med angular2


I min Angular-applikation vill jag använda en array av objekt med id och roll på följande sätt

let userRole: Array<...> = [
                       { id: 1, name: 'Admin' },
                       { id: 2, name: 'Super Admin' },
                       { id: 2, name: 'User' },
                       { id: 2, name: 'Watcher' }
                    ];

MEN jag är förvirrad över vad som behöver fyllas i på platsen för ... ?

Array < Objekt > eller Array <Vad som helst>

Försök 1 :

var roll={ id: nummer; namn: sträng; };

och sedan Array <role> men det ger fel

Försök 2 : lägga till med annan klassfil

roll.ts

export class Role {
    constructor(
        public id: number,
        public name: string
    ) { }
}

och lägg till i min fil som

import { Role }      from './role';

export class HeroFormComponent {

   let userRole: Array<Role> = [
                       { id: 1, name: 'Admin' },
                       { id: 2, name: 'Super Admin' },
                       { id: 2, name: 'User' },
                       { id: 2, name: 'Wacher' }
                    ];

Men ger fel

Fel: SyntaxError: Ov�ntat reserverat ord i strikt l�ge

Svar #1

Ditt första och bästa alternativ är helt enkelt att inte ha en typanteckning:

let userRole = [
                       { id: 1, name: 'Admin' },
                       { id: 2, name: 'Super Admin' },
                       { id: 2, name: 'User' },
                       { id: 2, name: 'Watcher' }
                    ];

Den härledda typen av userRole kommer att vara Array<{ id: number, name: string }>.

Om du verkligen vill ha en typanteckning av vilken anledning som helst, kan du skriva vilken som helst

let userRole: { id: number, name: string }[] = [ ...

eller

let userRole: Array<{ id: number, name: string }> = [ ...

Dessa två syntaxer är identiska i beteende.

Om du kommer att använda denna typ mycket kan du vilja skapa ett gränssnitt för den så att du kan återanvända namnet på andra ställen:

interface Role {
  id: number;
  name: string;
}

Nu kan du skriva

let userRole: Role[] = [ ...

När du deklarerar ett initierat fält i en klass använder du inte var eller let:

export class HeroFormComponent {

   userRole = [
                       { id: 1, name: 'Admin' },
                       { id: 2, name: 'Super Admin' },
                       { id: 2, name: 'User' },
                       { id: 2, name: 'Wacher' }
                    ];

Än en gång här kan du välja vilken typ av anteckning du vill ha.