Array

Angel David Corredor

student•

Se puede crear un arreglo que soporte una lista definida de tipos de datos. e.g:

let myArray: (string | number | boolean)[];
myArray = [false, 1, '2'];

De igual forma se puede crear un arreglo irrestricto como los de Javascript. e.g:
```
let myArray: any[];
myArray = [{}, true, 'two', 0b11];
```

Mauro Nava

student•

Muchas gracias crack

Christian Velázquez

student•

Gracias por el aporte. Creo que, comienza a gustarme Ts.

Jose Daniel Barría Reyes

student•

Dos notaciones: [] y Array<Type> ejemplo:

const names = string[];
const months = Array&lt;string&gt;;

Se puede acceder con indices.

names[0];
months[5];

se puede usar la prop length se puede usar el method push Supongo que todos los de Array. Buscar en MDN.

Alex Leonardo Rodriguez Carvajal

student•

excelente ejemplo!

Moisés Manuel Morín Hevia

student•

tHANKS,

Agustina Corvo

student•

Si queremos que un array contenga elementos de más de un tipo, lo podemos declarar de la siguiente manera:

let arrExample: Array<string | number | boolean>;
arrExample = ['firstItem', 2, 'thirdItem', 4, true]; // no da error

Jimmy Buriticá Londoño

student•

Bien por el aporte.

Boris Vargas Paucara

student•

// ------- Tipo: Array -------

// Explicito
let users: string[];
users = ['luixaviles', 'paparazzi', 'lensqueen'];
// users = [1, true, 'test']; // --&gt; Error

// Inferido
let otherUsers = ['luixaviles', 'paparazzi', 'lensqueen'];
// otherUsers = [1, true, 'test']; // --&gt; Error

// Array&lt;tipoDato&gt;
let pictureTitles: Array&lt;string&gt;;
pictureTitles = ['Favorite Sunset', 'Vacation Time', 'Landscape'];

// Accediendo a los valores en un Array
console.log('first user : ', users[0]); // --&gt; users[indice]: luixaviles
console.log('first title : ', pictureTitles[0]);

// Propiedades en Array
console.log('users.length : ', users.length); // -&gt; Tamaño del Array

// Uso de funciones en Arrays
users.push('aPlatziUser');  // -&gt; agrega dato a la cola del Array
users.sort();   // --&gt; ordena el Array de menor a mayor (alfabetica)
console.log('users', users);

Moisés Manuel Morín Hevia

student•

Buenísimo !"

Alex Camacho

teacher•

Array. Al igual que en JavaScript, TypeScript permite definir un arreglo para contener un conjunto de valores, para definir los arreglos se pueden usar nos notaciones [] y Array<type>.

// Corchetes []
const nickname: string[] = ['Syaan', 'Matt', 'Lou']
const idNumber: number[] = [1, 2, 3, 4, 5]

// Array<type>
const pictureTitles: Array<string> = ['Favorite Sunset', 'Vacation Time', 'Landscape']

Moisés Manuel Morín Hevia

student•

Gracias, eres la mejor !

Santiago Marín Marín

student•

En la versión actual typescript ya reconoce por sí solo los diferentes tipos de valores ingresados en un array sin generar error.

Federico Walovnik

student•

Como hago para declarar un array de objetos en el cual pueda acceder a las propiedades de los mismos? Es decir, por lo que entiendo no podria utilizar object[] Seria la solucion usar Object[] o Array<Object>?

Daniel Adolfo Ordoñez Rubio

student•

Hola, Federico :) Puedes usar ambas sintaxis para declarar un arreglo

// suponiendo que Object es una clase en particular
let arreglo: Object[] = []; //inicia el arreglo con = []
o
let arreglo: Array<Object> = []

Moisés Manuel Morín Hevia

student•

Ambas estan correctas, los arrays son un tipo de dato objeto. Puedes acceder a las propiedades/atributos por medio de índices.

Miguel Angel Reyes Moreno

student•

Al igual que JS, TS permite definir un arreglo para contener un conjunto de valores.
Usa 2 notaciones: [] y Array<tipo>

Documentación oficial de tipos de datos usados en TypeScript

Luis E. Gama Ramirez

student•

No es mas facil hacer el Console.log en en navegador. ? Digo por que son muchos comandos los que hay que hacer.

Cristian Blandon

student•

Para los gustos, los colores.

Moisés Manuel Morín Hevia

student•

xD yo lo corro desde el cmd de windows, pero seee en el navegador sería sin compilar.

Andres Felipe Pinchao Ramirez

student•

MY NOTES FOR ARRAY

Al igual que Javascript, Typescript permite definir un arreglo para contener un conjunto de valores .
Usa dos notaciones: [] y Array<tipo> .

// Corchetes []

//Tipo Explicito
  // tipodeDato[]

let users:string[];
users =['luixaviles', 'paparazzi', 'lensqueen'];

//Si le pusieramos distintos tipos de datos al que se le establecio al array
  //Daria error
// users = [1, true, 'test']; Error

//Tipo Inferido
  //Si le asignamos a una variable un array sin especificar el tipo
    //Typescript infiere el tipo de dato que tendra dependiendo lo que le pasemos


let otherUsers = ['luixaviles', 'paparazzi', 'lensqueen'];

// users = [1, true, 'test']; Error

// Arra<TIPO>
  //Definimos el array esplicitamente y dentro de los <> ponemos el tipo de dato que
    //Tendra el array

let pictureTitles: Array<string>;

  //Al berificar con el cursor la variable veremos el tipo de dato que tiene el array

pictureTitles =['Favorite Sunset', 'Vacation Time', 'Landscape'];


//Accediendo a los valores en un Array
  //Podremos acceder al elemento de un array igual que en js

  console.log(pictureTitles[0]); 


//Propiedades en Array

console.log(users.length) //3

//Funciones en Array

users.push('platzi users');
users.sort();
console.log('users', users);

Andrés Felipe Eslava Zuluaga

student•

Al igual que en JS o lenguajes de alto nivel, TS permite almacenar un conjunto de datos - Para definirlo se usan dos formas: []TYPE || Array<TYPE>

//Tipo Explícito: []
let myFirstArray: string[];  // Se especifica que el tipo del arreglo contiene strings - Únicamente contiene Strings
myFirstArray = ['Andrés', 'Jhon', 'Iván', 'Santo'];
// myFirstArray = [123, false, 'indicator'] // Error

//Tipo Inferido: []
let mySecondArray = [ 123, false, 'indicator' ];
mySecondArray = [true, 'compulsive', 23];
mySecondArray = ['myString', false, 456];
// En los tipos inferidos de los arrays, la forma estructural de como se declara define los tipos
// que puede tener dentro el arreglo, en este caso es ( string | number | boolean ) y no importa el orden
// solo debe cumplir con que existan esos tres tipos de datos dentro del Array. Sino, arrojará Error

//Tipo Explícito: Array<TYPE>
let myNumbers: Array<number>;
myNumbers = [12, 34, 56];

console.log('valores del arreglo myNumbers -> ', myNumbers[2])
console.log('valores del arreglo myfirstArray -> ', myFirstArray[0])

mySecondArray.pop()
mySecondArray.unshift(678)
console.log('valores del arreglo mySecondArray -> ', mySecondArray)

myFirstArray.sort()
console.log('valores del arreglo myFirstArray -> ', myFirstArray)

Juan Esteban Galvis

student•

Dejo la documentación de Mozilla sobre los Array y sus métodos (Que son bastantes): https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array

Gonzalo Piñeiro Aleman Urquiza

student•

Si la variable la declaran en singular el compilador arroja un error.

Axel Enrique Galeed Gutierrez

student•

Una consulta. ¿Cuál de las notaciones es mejor usar?

 let variableName: datatype[] = [value];
// O
 let variableName: Array<type> = [value];

¿Cuál tiene mejores prácticas? Gracias. 😄

Ariel Chura

student•

Hola, no se muy bien por que pasa esto.

Al tratar de usar cualquier método del string "Hola" que esta en la primera posicion del array, el método se me subraya como error.

Misael Dan Guerrero Lee

student•

Necesitas decirle a Typescript que en esa linea vas a manejar el elemento como String. Eso lo verás en una clase posterior. Este es el enlace:

Aserciones de Tipo

Jano Belmar

student•

Holas, en el minuto 7:07 el profesor escribe user. y aparecen propiedades, a mi solo me aparecen las propiedades y no la tabla explicativa del lado derecho, alguien me puede indicar por favor que me falta presionar o agregar en el vscode para que aparezca esa tabla?

Adrian Ducuara Benitez

student•

Hola Jano-belmar, espero se encuentre bien, VS Code normalmente se integra bien a este lenguaje, quiere decir que debería mostrar esa ventanita de detalles si no es así entonces trata de instalar los siguientes plugins:

ESLint
TSLint
Prettier - Code formatter (Este último para apariencia del código)

Espero te sirve, #NuncaParesDeAprender

Jesus Abel Jimenez Bracho

student•

tambien se puede hacer lo siguiente:

let variable: any [];
variable = [false, 1, '2'];

console.log(variable)

Leandro Alvarez

student•

Algunas funciones de Array en contexto typescript:

// Uso de funciones en Arrays
users.push('aPlatziUser');
users.sort();
console.log('users', users);

let newUsers = ['Leandro','Gabriela'];

let arrayConcat =users.concat(newUsers);
console.log('users concat', arrayConcat);

let usersJoin = users.join('-');
console.log('users Join', usersJoin);

let usersIndexOf = arrayConcat.lastIndexOf('Leandro');
console.log('users IndexOf', usersIndexOf);

let usersPop=users.pop();
console.log('users pop', usersPop);

Gustavo Adolfo Perez Ramos

student•

Tipo: Array

Al igual que JavaScript, TypeScript permite definir un arreglo para contener un conjunto de valores
Usa dos notaciones: [] y Arrat<tipo>

// Tipo Explicito
let users: string[];
users = ['name1', 'name2', 'name3'];
// users = [1, true, 'test'] // Error solo string

// Tipo inferido
let otherUsers = ['a', 'b'];
// otherUsers = [1, true, 'test'] // Error solo string

// Array<TIPO>
let pictureTitles: Array<string>;
pictureTitles = ["A", "B"];

console.log("fistUser", users[0]);
console.log("fistTitle", pictureTitles[0]);

Obed Paz

student•

Me parece bien utilizar la nomenclaruta de variable: tipo[ ] para arreglos rapidos y de pocos elementos que vaya a ocupar en mi proyecto. Y usar variable: Array<tipo> para aquellos arreglos que van a contener muchos elementos y su longitud estara variando a lo largo de la aplicacion.

// ------- Tipo: Array -------

// Explicito
let users: string[];
users = ['luixaviles', 'paparazzi', 'lensqueen'];
// users = [1, true, 'test']; // --&gt; Error

// Inferido
let otherUsers = ['luixaviles', 'paparazzi', 'lensqueen'];
// otherUsers = [1, true, 'test']; // --&gt; Error

// Array&lt;tipoDato&gt;
let pictureTitles: Array&lt;string&gt;;
pictureTitles = ['Favorite Sunset', 'Vacation Time', 'Landscape'];

// Accediendo a los valores en un Array
console.log('first user : ', users[0]); // --&gt; users[indice]: luixaviles
console.log('first title : ', pictureTitles[0]);

// Propiedades en Array
console.log('users.length : ', users.length); // -&gt; Tamaño del Array

// Uso de funciones en Arrays
users.push('aPlatziUser');  // -&gt; agrega dato a la cola del Array
users.sort();   // --&gt; ordena el Array de menor a mayor (alfabetica)
console.log('users', users);

// Corchetes []
const nickname: string[] = ['Syaan', 'Matt', 'Lou']
const idNumber: number[] = [1, 2, 3, 4, 5]

// Array<type>
const pictureTitles: Array<string> = ['Favorite Sunset', 'Vacation Time', 'Landscape']

// Corchetes []

//Tipo Explicito
  // tipodeDato[]

let users:string[];
users =['luixaviles', 'paparazzi', 'lensqueen'];

//Si le pusieramos distintos tipos de datos al que se le establecio al array
  //Daria error
// users = [1, true, 'test']; Error

//Tipo Inferido
  //Si le asignamos a una variable un array sin especificar el tipo
    //Typescript infiere el tipo de dato que tendra dependiendo lo que le pasemos


let otherUsers = ['luixaviles', 'paparazzi', 'lensqueen'];

// users = [1, true, 'test']; Error

// Arra<TIPO>
  //Definimos el array esplicitamente y dentro de los <> ponemos el tipo de dato que
    //Tendra el array

let pictureTitles: Array<string>;

  //Al berificar con el cursor la variable veremos el tipo de dato que tiene el array

pictureTitles =['Favorite Sunset', 'Vacation Time', 'Landscape'];


//Accediendo a los valores en un Array
  //Podremos acceder al elemento de un array igual que en js

  console.log(pictureTitles[0]); 


//Propiedades en Array

console.log(users.length) //3

//Funciones en Array

users.push('platzi users');
users.sort();
console.log('users', users);

//Tipo Explícito: []
let myFirstArray: string[];  // Se especifica que el tipo del arreglo contiene strings - Únicamente contiene Strings
myFirstArray = ['Andrés', 'Jhon', 'Iván', 'Santo'];
// myFirstArray = [123, false, 'indicator'] // Error

//Tipo Inferido: []
let mySecondArray = [ 123, false, 'indicator' ];
mySecondArray = [true, 'compulsive', 23];
mySecondArray = ['myString', false, 456];
// En los tipos inferidos de los arrays, la forma estructural de como se declara define los tipos
// que puede tener dentro el arreglo, en este caso es ( string | number | boolean ) y no importa el orden
// solo debe cumplir con que existan esos tres tipos de datos dentro del Array. Sino, arrojará Error

//Tipo Explícito: Array<TYPE>
let myNumbers: Array<number>;
myNumbers = [12, 34, 56];

console.log('valores del arreglo myNumbers -> ', myNumbers[2])
console.log('valores del arreglo myfirstArray -> ', myFirstArray[0])

mySecondArray.pop()
mySecondArray.unshift(678)
console.log('valores del arreglo mySecondArray -> ', mySecondArray)

myFirstArray.sort()
console.log('valores del arreglo myFirstArray -> ', myFirstArray)

// Uso de funciones en Arrays
users.push('aPlatziUser');
users.sort();
console.log('users', users);

let newUsers = ['Leandro','Gabriela'];

let arrayConcat =users.concat(newUsers);
console.log('users concat', arrayConcat);

let usersJoin = users.join('-');
console.log('users Join', usersJoin);

let usersIndexOf = arrayConcat.lastIndexOf('Leandro');
console.log('users IndexOf', usersIndexOf);

let usersPop=users.pop();
console.log('users pop', usersPop);

// Tipo Explicito
let users: string[];
users = ['name1', 'name2', 'name3'];
// users = [1, true, 'test'] // Error solo string

// Tipo inferido
let otherUsers = ['a', 'b'];
// otherUsers = [1, true, 'test'] // Error solo string

// Array<TIPO>
let pictureTitles: Array<string>;
pictureTitles = ["A", "B"];

console.log("fistUser", users[0]);
console.log("fistTitle", pictureTitles[0]);

Array

Introducción a TypeScript

El lenguaje de programación TypeScript

Instalación de herramientas para TypeScript

Instalación de herramientas en Windows

Navegación y refactorización

Entorno de Desarrollo

El compilador de TypeScript

El archivo de configuración de TypeScript

Mi primer proyecto TypeScript

Tipos en TypeScript

Tipado en TypeScript

Number, Boolean y String

Any

Void y never

null y undefined

Object

Array

Tupla

Enum

Unión de Tipos, Alias y Tipos Literales

Aserciones de tipo

Funciones en TypeScript

Resumen

Tipos Personalizados

Interfaces

Interfaces: propiedades opcionales

Extensión de interfaces

Clases

Clases públicas y privadas

Métodos Get y Set

Herencia de clases y propiedades estáticas

Resumen

Módulos

Principios de responsabilidad única

Resolviendo módulos

Webpack y agrupación de Módulos

Cierre

Cierre