CursosEmpresasBlogLiveConfPrecios

Array

Clase 14 de 32 • Curso de TypeScript 3

Clase anteriorSiguiente clase

Contenido del curso

Introducción a TypeScript

  • 1
    El lenguaje de programación TypeScript

    El lenguaje de programación TypeScript

    08:43 min
  • 2
    Instalación de herramientas para TypeScript

    Instalación de herramientas para TypeScript

    05:47 min
  • 3

    Instalación de herramientas en Windows

    01:05 min
  • 4
    Navegación y refactorización

    Navegación y refactorización

    04:37 min

Entorno de Desarrollo

  • 5
    El compilador de TypeScript

    El compilador de TypeScript

    08:00 min
  • 6
    El archivo de configuración de TypeScript

    El archivo de configuración de TypeScript

    07:22 min
  • 7
    Mi primer proyecto TypeScript

    Mi primer proyecto TypeScript

    05:09 min

Tipos en TypeScript

  • 8
    Tipado en TypeScript

    Tipado en TypeScript

    01:37 min
  • 9
    Number, Boolean y String

    Number, Boolean y String

    14:09 min
  • 10
    Any

    Any

    08:28 min
  • 11
    Void y never

    Void y never

    15:58 min
  • 12
    null y undefined

    null y undefined

    11:03 min
  • 13
    Object

    Object

    07:44 min
  • 14
    Array

    Array

    Viendo ahora
  • 15
    Tupla

    Tupla

    11:25 min
  • 16
    Enum

    Enum

    10:59 min
  • 17
    Unión de Tipos, Alias y Tipos Literales

    Unión de Tipos, Alias y Tipos Literales

    11:58 min
  • 18
    Aserciones de tipo

    Aserciones de tipo

    11:26 min
  • 19
    Funciones en TypeScript

    Funciones en TypeScript

    14:19 min
  • 20
    Resumen

    Resumen

    06:54 min

Tipos Personalizados

  • 21
    Interfaces

    Interfaces

    10:18 min
  • 22
    Interfaces: propiedades opcionales

    Interfaces: propiedades opcionales

    10:57 min
  • 23
    Extensión de interfaces

    Extensión de interfaces

    10:54 min
  • 24
    Clases

    Clases

    14:02 min
  • 25
    Clases públicas y privadas

    Clases públicas y privadas

    15:10 min
  • 26
    Métodos Get y Set

    Métodos Get y Set

    08:46 min
  • 27
    Herencia de clases y propiedades estáticas

    Herencia de clases y propiedades estáticas

    17:41 min
  • 28
    Resumen

    Resumen

    13:24 min

Módulos

  • 29
    Principios de responsabilidad única

    Principios de responsabilidad única

    15:03 min
  • 30
    Resolviendo módulos

    Resolviendo módulos

    10:04 min
  • 31
    Webpack y agrupación de Módulos

    Webpack y agrupación de Módulos

    14:02 min

Cierre

  • 32
    Cierre

    Cierre

    00:57 min
Tomar examen
    Angel David Corredor

    Angel David Corredor

    student•
    hace 5 años
    • 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

      Mauro Nava

      student•
      hace 5 años

      Muchas gracias crack

      Christian Velázquez

      Christian Velázquez

      student•
      hace 4 años

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

    Jose Daniel Barría Reyes

    Jose Daniel Barría Reyes

    student•
    hace 6 años

    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

      Alex Leonardo Rodriguez Carvajal

      student•
      hace 5 años

      excelente ejemplo!

      Moisés Manuel Morín Hevia

      Moisés Manuel Morín Hevia

      student•
      hace 5 años

      tHANKS,

    Agustina Corvo

    Agustina Corvo

    student•
    hace 5 años

    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

      Jimmy Buriticá Londoño

      student•
      hace 4 años

      Bien por el aporte.

    Boris Vargas Paucara

    Boris Vargas Paucara

    student•
    hace 6 años
    // ------- 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

      Moisés Manuel Morín Hevia

      student•
      hace 5 años

      Buenísimo !"

    Alex Camacho

    Alex Camacho

    teacher•
    hace 5 años
    1. 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

      Moisés Manuel Morín Hevia

      student•
      hace 5 años

      Gracias, eres la mejor !

    Santiago Marín Marín

    Santiago Marín Marín

    student•
    hace 4 años

    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

    Federico Walovnik

    student•
    hace 5 años

    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

      Daniel Adolfo Ordoñez Rubio

      student•
      hace 5 años

      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

      Moisés Manuel Morín Hevia

      student•
      hace 5 años

      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

    Miguel Angel Reyes Moreno

    student•
    hace 5 años
    • 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

    Luis E. Gama Ramirez

    student•
    hace 5 años

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

      Cristian Blandon

      Cristian Blandon

      student•
      hace 5 años

      Para los gustos, los colores.

      Moisés Manuel Morín Hevia

      Moisés Manuel Morín Hevia

      student•
      hace 5 años

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

    Andres Felipe Pinchao Ramirez

    Andres Felipe Pinchao Ramirez

    student•
    hace 5 años

    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

    Andrés Felipe Eslava Zuluaga

    student•
    hace 5 años

    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

    Juan Esteban Galvis

    student•
    hace 5 años

    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

    Gonzalo Piñeiro Aleman Urquiza

    student•
    hace 5 años

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

    Axel Enrique Galeed Gutierrez

    Axel Enrique Galeed Gutierrez

    student•
    hace 4 años

    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

    Ariel Chura

    student•
    hace 4 años

    Hola, no se muy bien por que pasa esto.

    2021-08-09_22h32_26.png

    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

      Misael Dan Guerrero Lee

      student•
      hace 4 años

      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

    Jano Belmar

    student•
    hace 5 años

    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

      Adrian Ducuara Benitez

      student•
      hace 5 años

      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

    Jesus Abel Jimenez Bracho

    student•
    hace 4 años

    tambien se puede hacer lo siguiente:

    let variable: any []; variable = [false, 1, '2']; console.log(variable)
    Leandro Alvarez

    Leandro Alvarez

    student•
    hace 4 años

    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

    Gustavo Adolfo Perez Ramos

    student•
    hace 4 años

    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

    Obed Paz

    student•
    hace 4 años

    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.

Escuelas

  • Desarrollo Web
    • Fundamentos del Desarrollo Web Profesional
    • Diseño y Desarrollo Frontend
    • Desarrollo Frontend con JavaScript
    • Desarrollo Frontend con Vue.js
    • Desarrollo Frontend con Angular
    • Desarrollo Frontend con React.js
    • Desarrollo Backend con Node.js
    • Desarrollo Backend con Python
    • Desarrollo Backend con Java
    • Desarrollo Backend con PHP
    • Desarrollo Backend con Ruby
    • Bases de Datos para Web
    • Seguridad Web & API
    • Testing Automatizado y QA para Web
    • Arquitecturas Web Modernas y Escalabilidad
    • DevOps y Cloud para Desarrolladores Web
  • English Academy
    • Inglés Básico A1
    • Inglés Básico A2
    • Inglés Intermedio B1
    • Inglés Intermedio Alto B2
    • Inglés Avanzado C1
    • Inglés para Propósitos Específicos
    • Inglés de Negocios
  • Marketing Digital
    • Fundamentos de Marketing Digital
    • Marketing de Contenidos y Redacción Persuasiva
    • SEO y Posicionamiento Web
    • Social Media Marketing y Community Management
    • Publicidad Digital y Paid Media
    • Analítica Digital y Optimización (CRO)
    • Estrategia de Marketing y Growth
    • Marketing de Marca y Comunicación Estratégica
    • Marketing para E-commerce
    • Marketing B2B
    • Inteligencia Artificial Aplicada al Marketing
    • Automatización del Marketing
    • Marca Personal y Marketing Freelance
    • Ventas y Experiencia del Cliente
    • Creación de Contenido para Redes Sociales
  • Inteligencia Artificial y Data Science
    • Fundamentos de Data Science y AI
    • Análisis y Visualización de Datos
    • Machine Learning y Deep Learning
    • Data Engineer
    • Inteligencia Artificial para la Productividad
    • Desarrollo de Aplicaciones con IA
    • AI Software Engineer
  • Ciberseguridad
    • Fundamentos de Ciberseguridad
    • Hacking Ético y Pentesting (Red Team)
    • Análisis de Malware e Ingeniería Forense
    • Seguridad Defensiva y Cumplimiento (Blue Team)
    • Ciberseguridad Estratégica
  • Liderazgo y Habilidades Blandas
    • Fundamentos de Habilidades Profesionales
    • Liderazgo y Gestión de Equipos
    • Comunicación Avanzada y Oratoria
    • Negociación y Resolución de Conflictos
    • Inteligencia Emocional y Autogestión
    • Productividad y Herramientas Digitales
    • Gestión de Proyectos y Metodologías Ágiles
    • Desarrollo de Carrera y Marca Personal
    • Diversidad, Inclusión y Entorno Laboral Saludable
    • Filosofía y Estrategia para Líderes
  • Diseño de Producto y UX
    • Fundamentos de Diseño UX/UI
    • Investigación de Usuarios (UX Research)
    • Arquitectura de Información y Usabilidad
    • Diseño de Interfaces y Prototipado (UI Design)
    • Sistemas de Diseño y DesignOps
    • Redacción UX (UX Writing)
    • Creatividad e Innovación en Diseño
    • Diseño Accesible e Inclusivo
    • Diseño Asistido por Inteligencia Artificial
    • Gestión de Producto y Liderazgo en Diseño
    • Diseño de Interacciones Emergentes (VUI/VR)
    • Desarrollo Web para Diseñadores
    • Diseño y Prototipado No-Code
  • Contenido Audiovisual
    • Fundamentos de Producción Audiovisual
    • Producción de Video para Plataformas Digitales
    • Producción de Audio y Podcast
    • Fotografía y Diseño Gráfico para Contenido Digital
    • Motion Graphics y Animación
    • Contenido Interactivo y Realidad Aumentada
    • Estrategia, Marketing y Monetización de Contenidos
  • Desarrollo Móvil
    • Fundamentos de Desarrollo Móvil
    • Desarrollo Nativo Android con Kotlin
    • Desarrollo Nativo iOS con Swift
    • Desarrollo Multiplataforma con React Native
    • Desarrollo Multiplataforma con Flutter
    • Arquitectura y Patrones de Diseño Móvil
    • Integración de APIs y Persistencia Móvil
    • Testing y Despliegue en Móvil
    • Diseño UX/UI para Móviles
  • Diseño Gráfico y Arte Digital
    • Fundamentos del Diseño Gráfico y Digital
    • Diseño de Identidad Visual y Branding
    • Ilustración Digital y Arte Conceptual
    • Diseño Editorial y de Empaques
    • Motion Graphics y Animación 3D
    • Diseño Gráfico Asistido por Inteligencia Artificial
    • Creatividad e Innovación en Diseño
  • Programación
    • Fundamentos de Programación e Ingeniería de Software
    • Herramientas de IA para el trabajo
    • Matemáticas para Programación
    • Programación con Python
    • Programación con JavaScript
    • Programación con TypeScript
    • Programación Orientada a Objetos con Java
    • Desarrollo con C# y .NET
    • Programación con PHP
    • Programación con Go y Rust
    • Programación Móvil con Swift y Kotlin
    • Programación con C y C++
    • Administración Básica de Servidores Linux
  • Negocios
    • Fundamentos de Negocios y Emprendimiento
    • Estrategia y Crecimiento Empresarial
    • Finanzas Personales y Corporativas
    • Inversión en Mercados Financieros
    • Ventas, CRM y Experiencia del Cliente
    • Operaciones, Logística y E-commerce
    • Gestión de Proyectos y Metodologías Ágiles
    • Aspectos Legales y Cumplimiento
    • Habilidades Directivas y Crecimiento Profesional
    • Diversidad e Inclusión en el Entorno Laboral
    • Herramientas Digitales y Automatización para Negocios
  • Blockchain y Web3
    • Fundamentos de Blockchain y Web3
    • Desarrollo de Smart Contracts y dApps
    • Finanzas Descentralizadas (DeFi)
    • NFTs y Economía de Creadores
    • Seguridad Blockchain
    • Ecosistemas Blockchain Alternativos (No-EVM)
    • Producto, Marketing y Legal en Web3
  • Recursos Humanos
    • Fundamentos y Cultura Organizacional en RRHH
    • Atracción y Selección de Talento
    • Cultura y Employee Experience
    • Gestión y Desarrollo de Talento
    • Desarrollo y Evaluación de Liderazgo
    • Diversidad, Equidad e Inclusión
    • AI y Automatización en Recursos Humanos
    • Tecnología y Automatización en RRHH
  • Finanzas e Inversiones
    • Fundamentos de Finanzas Personales y Corporativas
    • Análisis y Valoración Financiera
    • Inversión y Mercados de Capitales
    • Finanzas Descentralizadas (DeFi) y Criptoactivos
    • Finanzas y Estrategia para Startups
    • Inteligencia Artificial Aplicada a Finanzas
    • Domina Excel
    • Financial Analyst
    • Conseguir trabajo en Finanzas e Inversiones
  • Startups
    • Fundamentos y Validación de Ideas
    • Estrategia de Negocio y Product-Market Fit
    • Desarrollo de Producto y Operaciones Lean
    • Finanzas, Legal y Fundraising
    • Marketing, Ventas y Growth para Startups
    • Cultura, Talento y Liderazgo
    • Finanzas y Operaciones en Ecommerce
    • Startups Web3 y Blockchain
    • Startups con Impacto Social
    • Expansión y Ecosistema Startup
  • Cloud Computing y DevOps
    • Fundamentos de Cloud y DevOps
    • Administración de Servidores Linux
    • Contenerización y Orquestación
    • Infraestructura como Código (IaC) y CI/CD
    • Amazon Web Services
    • Microsoft Azure
    • Serverless y Observabilidad
    • Certificaciones Cloud (Preparación)
    • Plataforma Cloud GCP

Platzi y comunidad

  • Platzi Business
  • Live Classes
  • Lanzamientos
  • Executive Program
  • Trabaja con nosotros
  • Podcast

Recursos

  • Manual de Marca

Soporte

  • Preguntas Frecuentes
  • Contáctanos

Legal

  • Términos y Condiciones
  • Privacidad
  • Tyc promociones
Reconocimientos
Reconocimientos
Logo reconocimientoTop 40 Mejores EdTech del mundo · 2024
Logo reconocimientoPrimera Startup Latina admitida en YC · 2014
Logo reconocimientoPrimera Startup EdTech · 2018
Logo reconocimientoCEO Ganador Medalla por la Educación T4 & HP · 2024
Logo reconocimientoCEO Mejor Emprendedor del año · 2024
De LATAM conpara el mundo
YoutubeInstagramLinkedInTikTokFacebookX (Twitter)Threads