search
CursosEmpresasBlogLiveConfPrecios
Curso de TypeScript 3

El compilador de TypeScript

Curso de TypeScript 3

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

    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

    Viendo ahora
  • 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

    09:44 min
  • 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
schoolTomar examen

El compilador de TypeScript

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

Comentarios64

Sergio Alejandro Trejo Cuxim

Sergio Alejandro Trejo Cuxim

Estudiante
Hace 6 años
    Sergio Esteban Diaz Guerrero

    Sergio Esteban Diaz Guerrero

    Estudiante
    Hace 6 años
    Alex Leonardo Rodriguez Carvajal

    Alex Leonardo Rodriguez Carvajal

    Estudiante
    Hace 5 años
Francisco Javier Martínez Molina

Francisco Javier Martínez Molina

Estudiante
Hace 6 años
    Diego Quiroz

    Diego Quiroz

    Estudiante
    Hace 6 años
    Alejandro Diaz

    Alejandro Diaz

    Estudiante
    Hace 6 años
Aydee Quispe Mamani

Aydee Quispe Mamani

Estudiante
Hace 6 años
    Raul Hernández

    Raul Hernández

    Estudiante
    Hace 6 años
    Moisés Manuel Morín Hevia

    Moisés Manuel Morín Hevia

    Estudiante
    Hace 5 años
Juan Francisco Cevallos Valdivieso

Juan Francisco Cevallos Valdivieso

Estudiante
Hace 6 años
Ariel Ayala

Ariel Ayala

Estudiante
Hace 6 años
    Moisés Manuel Morín Hevia

    Moisés Manuel Morín Hevia

    Estudiante
    Hace 5 años
    Irving German Manuel Molano Torres

    Irving German Manuel Molano Torres

    Estudiante
    Hace 5 años
Isela Reyes Perdomo

Isela Reyes Perdomo

Estudiante
Hace 6 años
    Markoz Peña

    Markoz Peña

    Estudiante
    Hace 6 años
    Isabella Susana

    Isabella Susana

    Estudiante
    Hace 6 años
Jorge Cruz Perez

Jorge Cruz Perez

Estudiante
Hace 6 años
    Moisés Manuel Morín Hevia

    Moisés Manuel Morín Hevia

    Estudiante
    Hace 5 años
    Villegas Hernández Jordán Sinai

    Villegas Hernández Jordán Sinai

    Estudiante
    Hace 4 años
Santiago Lopera Naranjo

Santiago Lopera Naranjo

Estudiante
Hace 6 años
    Lina Katherine Larrea

    Lina Katherine Larrea

    Estudiante
    Hace 6 años
    Alex hernandez mitre

    Alex hernandez mitre

    Estudiante
    Hace 4 años
Javi Felices

Javi Felices

Estudiante
Hace 6 años
    Lina Katherine Larrea

    Lina Katherine Larrea

    Estudiante
    Hace 6 años
Andrea Ysabel Urdaneta Durango

Andrea Ysabel Urdaneta Durango

Estudiante
Hace 6 años
Carlos Guerra

Carlos Guerra

Estudiante
Hace 6 años
    Cesar Roman Santillan

    Cesar Roman Santillan

    Estudiante
    Hace 5 años
    Juan Burns

    Juan Burns

    Estudiante
    Hace 5 años
Erick Alonso

Erick Alonso

Estudiante
Hace 6 años
Alex Camacho

Alex Camacho

Profesor
Hace 6 años
Juan Osio

Juan Osio

Estudiante
Hace 6 años
    Lina Katherine Larrea

    Lina Katherine Larrea

    Estudiante
    Hace 6 años
    Cesar Roman Santillan

    Cesar Roman Santillan

    Estudiante
    Hace 5 años
Ivan Andres Diaz Lopez

Ivan Andres Diaz Lopez

Estudiante
Hace 6 años
    David Campos

    David Campos

    Estudiante
    Hace 6 años
    Mauricio Moreno Morales

    Mauricio Moreno Morales

    Estudiante
    Hace 6 años
Julio Loarte Huerto

Julio Loarte Huerto

Estudiante
Hace 5 años
    Ancizar Arroyo Chávez

    Ancizar Arroyo Chávez

    Estudiante
    Hace 4 años
German Vera

German Vera

Estudiante
Hace 5 años
Miguel Angel Reyes Moreno

Miguel Angel Reyes Moreno

Estudiante
Hace 5 años
Santiago Fitipaldo

Santiago Fitipaldo

Estudiante
Hace 6 años
    Alex Camacho

    Alex Camacho

    Profesor
    Hace 6 años
Angel Hernandez

Angel Hernandez

Estudiante
Hace 5 años

Instalación de TypeScript

Con el siguiente comando lo instalaremos de manera global:

npm install -g typescript

Consultar la versión del compilador de TS:

tsc -v

Compilar nuestros ficheros .ts

tsc your_file.ts

Compilar de manera 'automática' nuestros ficheros .ts

tsc --watch your_file.ts

No hay que tenerle miedo al TypeScript, ya que este nos creará un archivo: your_file.js. Es decir un archivo .js compatible con todo.

Gracias por la explicación profesor.

Excelente aporte ;) gracias colega.

muchas gracias !

Sí estés en windows y te sale el siguiente error:

1.error.PNG

aunque hayas ejecutado:

npm install -g typescript

a mi me funciono hacer la siguiente configuración. Abrir Windows PowerShell como administrador y ejecutar:

Set-ExecutionPolicy Unrestricted

Con esto ya puedes usar el comando: tsc desde VS Code

Hola Francko! Me gustaría recomendarte que cheques Windows Subsystem For Linux, Microsoft acaba de liberar la versión 2. Te permite tener un terminal con todo el poder del linux de tu preferencia (Ubuntu, Fedora, etc.). Así no tienes que lidiar con los raros problemas que da el cmd o Powershell en Windows. Estoy seguro que te será de mucha ayuda para seguir con este y más cursos.

Gracias super útil para resolver este problema que también se me presentó.

Si no quisieran instalar typescript de manera global, pueden ejecutar:

npx tsc file.ts

npx tsc --watch file.ts

Para todos los que se preguntan que es npx

Es un comando para ejecutar paquetes de npm que viene con node :)

Oka, entonces esto es un ambiente virtual.

Amigos si no les deja ejecutar desde la terminal del Visual Studio Code, les dejo este video que a mi me funcionó https://www.youtube.com/watch?v=zUszm-f6Xq4 solo al final pongan "Permitir scripts locales y scripts remotos firmados"

También funciona abreviando tsc -w hello.ts

Thanks, lo tendré en cuenta.

Excelente!

Si no les funciona el comendo "tsc", escriban "npx tsc" y ya <3

Buena idea, eso lo que hace es ejecutare el binario directamente

Buen aporte, me sirvió!

Tambien pueden hacer lo siguiente, tener dos ventanas abiertas en VSCode una de ts y la otra de js y observas los cambios en e codigo ![](

Captura de pantalla 2020-09-10 a la(s) 17.16.47.png

Yo uso la terminal xD gracias por el aporte.

muy buen consejo gracias

Una opción para trabar mas rapido, sería tener dos servicios levantados, el "--watch" para compilar TypeScript y "nodemon" para auto ejecutar JavaScript, así cuando uno guardemos cambios en los archivos TS podemos ver el resultado de inmediato en JS Ejemplo: tsc --watch hello.ts/ nodemon hello.js

Captura de pantalla 2020-12-14 204428.png

Totalmente. Y ya generando un script de node sería mucho más fácil el proceso de levantar o incluso mandar a producción el archivo :-)

tip de PRO.

Aunque **Powershell **es muy poderosa, hay otras opciones para los que usamos Windows, desde Powershell Core, que es multiplataforma, hasta Terminal, la nueva terminal para Windows 10, o una de las mejores opciones es Git Bash, cuando instalas Git en Windows tienes la opción de instalar esta terminal, por defecto está marcada, y funcionan los comandos Unix, en el caso de Luis que usa MAC, serán los mismos.

Otras opciones son ConEmu, o su versión más ligera cmder.

A mi Git Bash me encanta. Lo único es que siento que no se puede personalizar tanto como las terminales de Mac o Linux T_T

Typescript debe ser compilado al ser un archivo con un extensión como file.ts al ser compilado nos genera los archivos file.js ya que los navegadores no entienden TypeScript sino JavaScript 😊

Loveu ❤ TypeScript por poner orden

Si en Mac les aparece este error:

Screen Shot 2020-06-09 at 23.48.11.png

Sólo ejecuten la siguiente Instrucción: $ sudo chown -R $USER /usr/local/lib/node_modules

super! me ahorraste la busqueda inparable 👌

A mi me funciono en windows, porque será?

No olviden usar el Sudo al correr el comando de instalación

sudo npm install -g typescript

🥽 Entorno de desarrollo

El compilador de TypeScript

Para comenzar a trabajar con TypeScript se necesita tenerlo instalado de forma global en nuestro sistema, eso se logra a través del comando npm install -g typescript el cual nos instalará la versión más reciente, para comprobar que versión se instaló y que lo hemos instalado de forma correcta utilizamos el comando tsc -v.

Una vez que se tiene instalado TypeScript ya se puede comenzar a trabajar con él. Hay que recordar que los navegadores no reconocen este código por lo tanto toca transpilarlo a JavaScript. El comando tsc filename.ts realiza esta acción.

Por otro lado también tenemos este comando tsc --watch filename.ts que cada vez que salvemos cambios nos transpilará nuestro archivo de TypeScript a uno de JavaScript.

screencapture-notion-so-Instalaci-n-d7ffa3994982439092922dddaba61560-2020-10-29-21_59_30.png

Me encanta la manera en que has organizado las últimas clases en un solo archivo. Te tomo la palabra y voy a organizar mis apuntes así también :-)

que buen resumen! muchas gracias

es decir, tsc es para compilar una sola vez. y Watch es para ir actulizando el mismo archivo?

Sí, con Watch el archivo se compilará automáticamente cuando haya cambios en él.

Los watchers son comunes en una gran cantidad de compiladores o transpiladores, y funcionan de modo que detectan cuando haces un guardado en algún archivo (sea que presiones ctrl + s) y en el momento que detectan cambios transpilan el archivo que fue alterado.

Si les sale este error al ver la versión del TSC:

error.jpg

Es porque esta deshabilitada la ejecución de scripts.
Abrir Windows PowerShell como administrador y ejecutar el comando

Get-ExecutionPolicy
error02.jpg

Si nos devuelve Restricted(Restringido), ejecutar el siguiente comando para tenerlo como Unrestricted(Irrestricto):
Set-ExecutionPolicy Unrestricted

Con eso solucione el inconveniente que tenia al utilizar Windows Terminal. Espero les sirva.

ok.jpg

Saludos

Muchas gracias, Me sirvió!!!

Hasta ahora se entiende jeje

El compilador de TypeScript

Para instalar esta herramienta debemos hacer npm i -g typescript. La bandera "-g" significa "global" y podremos usar el TSC en nuestros diferentes proyectos. Una vez instalado podemos hacer tsc -v para comprobar qué versión tenemos en nuestro equipo.

¿Cómo funciona el TSC? Tenemos por ejemplo un archivo "hello.ts", el TSC lo tomará y creará un archivo "hello.js". De manera práctica podemos hacer tsc hello.ts

Luego podemos ejecutar el archivo de JavaScript con Node, haciendo node hello.js.

Tenemos la opción de "--watch", lo cual significa que con solo guardar los cambios en el archivo TS, estará modificando automáticamente el archivo JS, simplemente escribimos tsc --watch hello.ts.

Por si les es de ayuda, si al ejecutar el comando 'npm install -g typescript' en MAC reciben un error de EACCES, simplemente ingresen el comando 'sudo npm install -g typescript' para autorizar el acceso a la carpeta donde NPM instala las dependencias globales. A mi me funciono.

Hola Santiago, Muchas gracias por el aporte. Sigue aportando contenido valioso para la comunidad de esta forma👌 ¡Nunca pares de aprender! 💚

otra buena opcion para usar el watcher y no tener que estar compilando manualmente los archivos que modifiquemos es

tsc -w *.ts

Esto en la carpeta donde tengamos los archivos ts