No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Arrays

12/24
Recursos

Es una colecci贸n de datos ordenada. Los definimos de la siguiente manera:

let prices = [1,2,3,4,5];

/* M茅todo Push para agregar un elemento al final del array */
prices.push(6);
console.log(prices); // [1,2,3,4,5,6]

Para el array prices, TypeScript, de no indicarle expl铆citamente, va a inferir que este solo contendr谩 valores del tipo number, por lo que si se quiere agregar un valor string, por ejemplo, nos indicar谩 un error:

//TypeScript
prices.push("texto"); //ERROR. Se espera agregar solo n煤meros al array.

Esto debido a que en su inicializaci贸n se le asign贸 un array que solo conten铆a n煤meros.

Tambi茅n nos indicar谩 error si pretendemos hacer operaciones exclusivas de un tipo de dato sobre la de otro tipo:

let meses = ["Mayo","Junio","Julio"];
meses.map( item => item * 2 ); //ERROR. Se pretende realizar una multiplicaci贸n usando strings.

Tipado de arrays en TypeScript

Lo puedes definir as铆:

  • Indicar expl铆citamente los tipos de datos que almacenar谩 el array:
let prices: (number | string)[] = ["hola",2,4,6,"mundo"];
let otherPrices: (boolean | number)[];

Para este caso, a menos que la variable sea una constante, no es necesario que inicialices la variable, pues ya le indicaste el tipo de dato.

  • En la inicializaci贸n de la variable, colocar datos con el tipo de dato que quieres que soporte tu array en adelante para que lo pueda inferir TypeScript:
//TypeScript
let prices = ["hola",2,4,6,"mundo"];
// "hola", "mundo" => string
// 2,4,6 => number

Dejamos claro que queremos que soporte los tipos de dato string y number.

Contribuci贸n creada por: Mart铆n 脕lvarez.

Aportes 15

Preguntas 4

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

el curso de manipulaci贸n de arrays es buen铆simo 鈥

馃搶馃搷馃摑 ==> La forma correcta de asignarle el tipo a un array cuando contiene numeros, strings y booleans es:

let prices: (number | string | boolean)[]

Creo que al profe se le paso el Object con mayuscula.

recordemos la diferencia entre object y Object.

recordemos que object es el correcto, por que nos va a diferenciar entre datos primitivos (number, string, boolean, etc) y todo lo que no sea esto, puede caber dentro de object.

Documentacion oficinal de typescript

(() => {
    const prices = [1,2,3,4,5,6, 'hola', true];

    //lo que no puedo hacer
    // prices.push('jkgdsakjgd');
    // prices.push(true);
    // prices.push({});

    prices.push(12313131);
    let products = ['hola', true];
    products.push(false);

    //para escribir booleans, numbers y strings hay que hacerlo de forma explicita
    //se puede usar | objecta y acepta arrays y objetos pero para eso hay un modulo m谩s adelante
    const mixed: (number | string | boolean)[] = ['hola', true];
    //ahora si me deja ingresar n煤meros 
    mixed.push(12);

    let numbers = [1,2,3,4,5,6,7,8];
    numbers.map(item => item * 2); 
    console.log(numbers);
})();

Resumen de la clase

Cuando creamos el siguiente array de puros numeros

const numbers = [1, 2, 3, 4, 5]

TS infiere que el tipo es number[]. Si lo quisieramos hacer de manera explicita seria asi

const numbers: number[] = [1, 2, 3, 4, 5]

.
Cuando agregamos mas de un tipo de dato en un array, TS lo infiera de esta manera

const arr: (number | boolean | string)[] = [1, true, "str"]

.
Por ultimo, cuando un array contiene otros arrays u objetos podemos usar el tipo de dato Object

const arr: Object[] = [{}, [], {}, []]

const numeros: number[] = [1, 2, 3, 4, 5];

//@ts-ignore: Esto da error porque un array de n煤meros no acepta textos
numeros.push('hola');


const cadenas : string[] = ['Hola', 'que tal', 'bien', 'chau'];

//@ts-ignore: Esto tambi茅n da error por lo mismo en este caso de strings
cadenas.push(1);


//M谩s de un tipo de dato

    const poblationCountries : (string | number)[] = ["Paraguay", 7000000, "Uruguay", 4000000];

    //@ts-ignore: Da error porque no lo pusimos en el mixin de datatypes
    poblationCountries.push(true);


//La forma impl铆cita es la m谩s recomendable siempre y cuando se pueda

const inferedNumbers = [1, 2, 3, 4, 5];

//@ts-ignore: Esto da error igual de forma inferida
inferedNumbers.push('hola');


const inferedStrings = ['Hola', 'que tal', 'chau'];

//@ts-ignore: Esto da error igual de forma inferida
inferedStrings.push(1);

//M谩s de un tipo de dato

    const inferedPoblationCountries = ["Paraguay", 7000000, "Uruguay", 4000000];

    //@ts-ignore: Da error porque no lo pusimos en el mixin de datatypes
    inferedPoblationCountries.push(true);

Escriban lo siguiente en chatGPL y vean la magia:

Creame un snippet para declarar un array en ts que reciba todo tipo de datos y nombralo como 鈥渦niversalarray鈥

La forma correcta de asignarle los tipos que admite un array es la siguiente, as铆 evitamos que la variable prices no sea usada como array

    let prices:Array<number|string> = [1,2,3,4,5,6,7,8];
    prices.push('string');
    prices.push(1); //number

Como aprendizaje esta bien, aunque creo que es una mala practica mezclar tipos de datos en un array.

alt + 1 = | (pipe) en Mac

Usando Object, me permiti贸 usar el tipo Boolean sin hab茅rselo dicho:

.
Usando object, ya reaccion贸 como era y no me lo permiti贸:

Este es el curso del que habla el profesor Curso de Manipulaci贸n de Arrays en JavaScript

Si hay un curso que me ha servido much铆simo en la practica como desarrollador frontend, es el curso de manipulaci贸n de arrays, lo super recomiendo.

Llegando al final de este primer modulo te comparto estas notas que encontre en Medium que estan muy utiles

https://medium.com/@roperluo.me/typescript-types-study-notes-3060f9bf48af

Tambien podemos expresar con any, de esta forma indicamos que puede tener cualquier tipo de dato

let myList: any = [];


myList.push('fabio', 28, {lastname:'sosa'})