¿Cómo definir una array de diferentes tipos genéricos en TypeScript?

En TypeScript, una array es un tipo de datos que puede almacenar varios valores de diferentes tipos de datos de forma secuencial. Similar a JavaScript, Typescript admite la declaración de arrays y hay varias formas de hacerlo.

Declaración e inicialización de arrays:

• Podemos usar var o let para declarar una array.
• La diferencia es que var se usa si queremos que la variable se refleje/implemente en todo el programa y se deje para un bloque específico .
• A continuación se muestra la sintaxis

Método 1: declarar e inicializar en una línea separada: aquí declaramos una array e inicializamos en líneas separadas, como en el ejemplo que se muestra a continuación. A menudo se utiliza para producir código más limpio y legible. Usamos el corchete de tipo cuadrado si ya conocemos el tipo de array y los corchetes de flecha si estamos usando genérico (no se restringe a un tipo de datos).

var Arrayname[:tipo de datos]; // Declaración

Arrayname = [val1,val2,val3,valn..] // Inicialización

Declaración e inicialización de array a partir de 0

Aquí declaramos una array de dígitos con un tipo genérico, número, por lo que el primer dígito, 23, indica el tipo de array (número). Si no declaramos el tipo de arreglo, se clasifica como cualquiera.

var fruits: Array<string>;
fruits = ['Kiwi', 'Plums', 'Peaches','Apples','Lime','Cherries'];
 
var Digits: Array<number>;
Digits = [23, 34, 100, 124,];

Método 2: declaración e inicialización en la misma línea: una alternativa de declaración e inicialización de la array en la misma línea.

Ejemplo:

/* First method of usual array with
square brackets and second method of
generic arrays for examples fruits
and Digits */
 
var fruits: string[] = ['Kiwi', 'Plums',
    'Peaches', 'Apples', 'Lime', 'Cherries'];
 
var fruits: Array < String >= ['Kiwi', 'Plums',
    'Peaches', 'Apples', 'Lime', 'Cherries'];
 
var Digits: number[] = [23, 34, 100, 124];
var Digits: Array < number >= [23, 34, 100, 124]

Tenga en cuenta que la diferencia entre el primer y el segundo método es puramente para un código más limpio.

Declaración de array multitipo: los tipos están separados por «|» para cada tipo y cada uno corresponde al elemento anterior. En el siguiente ejemplo, las capitales del país están emparejadas (Tailandia por Bangkok, Nueva Delhi por India) y en el segundo ejemplo, no tenemos una string para el número 5, lo que significa que es independiente y ocupa el espacio justo como otros elementos.

/* In the first example we're associating
string with string and second example
vivek has 2 values 3 and 5, as we can have
multiple values */
var Capital: (string | string)[] = ['USA',
    'Washington D.C.', 'United Kingdom',
    'London', 'India', 'New Delhi',
    'Thailand', 'Bangkok'
];
// or
var Employees: Array < string | number >
    = ['Atul', 1, 'Vivek', 3, 5, 'Sania', 8];

Accediendo a los Elementos de la Array:

Método 1: acceso al índice (acceso directo): el acceso directo es posible cuando conocemos el índice y el tamaño de la array. En el ejemplo anterior, sabemos que «Oscuro» ocupa 1 índice, por lo tanto, Chocolates [1], devuelve Blanco. Sin embargo, es tedioso si la longitud de la array es demasiado larga, por lo que usamos el segundo método (bucle).

var Chocolates: string[] = ['White',
    'Dark', 'SemiSweet', 'BitterSweet'];
 
Chocolates[0]; // Returns White
Chocolates[1]; // Returns Dark
Chocolates[2]; // Returns SemiSweet
Chocolates[3]; // Returns BitterSweet
Chcoloates[4]; // Returns undefined

Método 2: uso de bucle: el gran tamaño de una array podría usarse en bucle en lugar de acceso directo para reducir las líneas de código y obtener un código más limpio. En el siguiente ejemplo, usamos for loop para analizar la array de ciudades e imprimirlo en consecuencia.

Alternativamente, si no conocemos el tamaño de la array, usamos «en» la array para imprimir lo mismo.

// Using loop for the given array
let Cities: string[] = ['Pune', 'Mumbai', 'Nagpur'];
 
 
for (var i = 0; i < Cities.length; i++) {
 
    // Output: Pune Mumbai Nagpur
    console.log(Cities[i]);
}
 
for (var i in Cities) {
 
    // Output: Pune Mumbai Nagpur
    console.log(Cities[i]);
}