web-dev-qa-db-fra.com

Comment définir un tableau d'objets?

Je crée un tableau d'objets dans TypeScript:

 userTestStatus xxxx = {
    "0": { "id": 0, "name": "Available" },
    "1": { "id": 1, "name": "Ready" },
    "2": { "id": 2, "name": "Started" }
 };

Quelqu'un peut-il me dire comment je pourrais déclarer son type correctement? Est-il possible de faire en ligne ou aurais-je besoin de deux définitions?

Je cherche à remplacer le xxx par une déclaration de type, de sorte que plus tard, TypeScript m’avertir si j’utilisais par erreur quelque chose comme userTestStatus[3].nammme.

typescript
124
user1679941

Il vaut mieux utiliser un tableau natif au lieu d'un littéral d'objet doté de propriétés numériques, de sorte que la numérotation (ainsi que de nombreuses autres fonctions de tableau) soit prise en charge immédiatement.

Ce que vous recherchez ici est une définition en ligne interface pour votre tableau qui définit chaque élément de ce tableau, qu'il soit initialement présent ou introduit plus tard:

let userTestStatus: { id: number, name: string }[] = [
    { "id": 0, "name": "Available" },
    { "id": 1, "name": "Ready" },
    { "id": 2, "name": "Started" }
];

userTestStatus[34978].nammme; // Error: Property 'nammme' does not exist on type [...]

Si vous initialisez immédiatement votre tableau avec des valeurs, la définition de type explicite n’est pas une nécessité; TypeScript peut déduire automatiquement la plupart des types d'élément à partir de l'affectation initiale:

let userTestStatus = [
    { "id": 0, "name": "Available" },
    ...
];

userTestStatus[34978].nammme; // Error: Property 'nammme' does not exist on type [...]
183
John Weisz

Ce que vous avez ci-dessus est un objet, pas un tableau.

Pour créer un tableau, utilisez [ & ] afin d’entourer vos objets.

userTestStatus = [
  { "id": 0, "name": "Available" },
  { "id": 1, "name": "Ready" },
  { "id": 2, "name": "Started" }
];

En dehors de cela, TypeScript est un sur-ensemble de JavaScript. Par conséquent, tout ce qui est valide sera du TypeScript valide. Aucune autre modification n'est nécessaire.

Clarification des commentaires de OP ... besoin d'une définition pour le modèle affiché

Vous pouvez utiliser les types définis ici pour représenter votre modèle d'objet:

type MyType = {
    id: number;
    name: string;
}

type MyGroupType = {
    [key:string]: MyType;
}

var obj: MyGroupType = {
    "0": { "id": 0, "name": "Available" },
    "1": { "id": 1, "name": "Ready" },
    "2": { "id": 2, "name": "Started" }
};
// or if you make it an array
var arr: MyType[] = [
    { "id": 0, "name": "Available" },
    { "id": 1, "name": "Ready" },
    { "id": 2, "name": "Started" }
];
55
Brocco

Ce que vous voulez vraiment peut simplement être une énumération

Si vous cherchez quelque chose qui se comporte comme une énumération (parce que je vois que vous définissez un objet et que vous associez un ID séquentiel 0, 1, 2 et contient un champ de nom que vous ne voulez pas mal orthographier (par exemple nom vs naaame) , vous feriez mieux de définir une énumération car l’ID séquentiel est traité automatiquement et fournit une vérification de type immédiate.

enum TestStatus {
    Available,     // 0
    Ready,         // 1
    Started,       // 2
}

class Test {
    status: TestStatus
}

var test = new Test();
test.status = TestStatus.Available; // type and spelling is checked for you,
                                    // and the sequence ID is automatic

Les valeurs ci-dessus seront automatiquement mappées, par ex. "0" pour "Disponible", et vous pouvez y accéder avec TestStatus.Available. Et TypeScript appliquera le type lorsque vous les passerez.

Si vous insistez pour définir un nouveau type en tant que tableau de votre type personnalisé

Vous vouliez un tablea d'objets ((pas exactement un objet avec les clés "0", "1" et "2"), alors définissons le type de l'objet, d'abord, puis le type d'un contenant tableau.

class TestStatus {
    id: number
    name: string

    constructor(id, name){
        this.id = id;
        this.name = name;
    }
}

type Statuses = Array<TestStatus>;

var statuses: Statuses = [
    new TestStatus(0, "Available"),
    new TestStatus(1, "Ready"),
    new TestStatus(2, "Started")
]
13
bakkal

Certaines règles tslint désactivent l'utilisation de [], exemple de message: Array type using 'T[]' is forbidden for non-simple types. Use 'Array<T>' instead.

Alors tu l'écrirais comme:

var userTestStatus: Array<{ id: number, name: string }> = Array(
    { "id": 0, "name": "Available" },
    { "id": 1, "name": "Ready" },
    { "id": 2, "name": "Started" }
);
12
Ogglas