Définition d'un tableau avec plusieurs types dans TypeScript

186

J'ai un tableau de la forme: [ 1, "message" ].

Comment définirais-je cela dans TypeScript?

typescript

— dk123
source

Question similaire à celle-ci, sans réponse, mais cette fois en utilisant l'héritage de classe avec un nombre inconnu d'éléments et étendant tous la même classe: stackoverflow.com/questions/50322488/…

— cancerbero

313

Définition d'un tableau avec plusieurs types dans TypeScript

Utilisez une (string|number)[]démonstration de type union :

const foo: (string|number)[] = [ 1, "message" ];

J'ai un tableau de la forme: [1, "message"].

Si vous êtes sûr qu'il n'y a toujours que deux éléments, [number, string]vous pouvez le déclarer comme un tuple:

const foo: [number, string] = [ 1, "message" ];

— basarat
source

2

Juste une note que cela nécessitera TS v1.4 +

— Brocco

6

... et cela ne fonctionnera pas avec des types complexes avec des propriétés différentes, lorsque vous souhaitez accéder à une propriété disponible sur un seul des types.

— Nadine

1

@Nadine Et dans ce cas, que pourrait-on faire?

— msanford

4

Chaque fois que vous savez de quel type il s'agit, vous pouvez effectuer une assertion de type. Ensuite, cela fonctionnera pour accéder aux propriétés.

— Nadine

78

Si vous le traitez comme un tuple (voir la section 3.3.3 de la spécification du langage ), alors:

var t:[number, string] = [1, "message"]

ou

interface NumberStringTuple extends Array<string|number>{0:number; 1:string}
var t:NumberStringTuple = [1, "message"];

— curpa
source

10

CONSEIL: Je préféreraistype NumberStringTuple = [number, string]

— basarat

1

Merci! Je cherchais totalement ceci:const W3COLORS: [[string, string, number, number]] = [ ["aliceblue", "#f0f8ff", 240, 248, 255], ... ];

— CoderPi

1

Remarque - les deux types DOIVENT être dans le tableau (ne fonctionne pas non plus pour un tableau vide). La réponse acceptée est plus polyvalente et que j'utilise personnellement toujours, mais cela dépend des besoins.

— Druvis Cukurs

27

Ma charpie TS se plaignait d'autres solutions, donc la solution qui fonctionnait pour moi était:

item: Array<Type1 | Type2>

s'il n'y a qu'un seul type, c'est bien d'utiliser:

item: Type1[]

— Szamanm
source

C'est génial, mais disons que si nous bouclons maintenant sur le tableau, comment déterminer quel type est le tableau actuel?

— thouliha

1

@thouliha stackoverflow.com/questions/50774790/…

— Rambatino le

12

J'ai choisi le format suivant pour taper des tableaux pouvant contenir des éléments de plusieurs types.

Array<ItemType1 | ItemType2 | ItemType3>

Cela fonctionne bien avec les tests et les protections de type. https://www.typescriptlang.org/docs/handbook/advanced-types.html#type-guards-and-differentiating-types

Ce format ne fonctionne pas bien avec les tests ou les protections de type:

(ItemType1 | ItemType2 | ItemType3)[]

— j4ys0n
source

4

J'utilise cette version:

exampleArr: Array<{ id: number, msg: string}> = [
   { id: 1, msg: 'message'},
   { id: 2, msg: 'message2'}
 ]

C'est un peu similaire aux autres suggestions mais toujours facile et assez bon à retenir.

— DerKarim
source