Compilando un Hola Mundo sencillo

TypeScript se levanta por encima de JavaScript. Y la prueba de ello es este primer ejemplo de hola mundo de los que voy a programar en esta introducción, y es que voy a empezar a trabajar de momento sin tipos, escribiendo un pequeño hola mundo para mostrar cómo compilar código, que todavía no tiene tipos ni nada.

Para comenzar a programar en TypeScript, una buena opción es usar Visual Studio Code como editor de texto. Es accesible, multiplataforma y fácil de instalar, lo que lo convierte en un entorno neutro ideal para centrarnos en el código. Además, Visual Studio Code está desarrollado en TypeScript, lo que garantiza un soporte excelente para este lenguaje, incluyendo autocompletado, refactorizaciones y otras funcionalidades que facilitan la programación. Detrás de este editor está Microsoft, la misma empresa que mantiene TypeScript, por lo que la integración es muy sólida.

Aunque en el día a día podemos preferir otros editores como Vim con extensiones para TypeScript, Visual Studio Code es una opción muy recomendable para quienes empiezan o quieren un entorno con todas las comodidades listas para usar. En este caso, trabajaremos con la versión 4.0.1 RC de TypeScript, que aunque es una versión candidata, nos permite acceder a las últimas características del lenguaje.

Para nuestro primer ejemplo, creamos un archivo llamado hola.ts. La extensión .ts indica que es un archivo TypeScript, que es básicamente JavaScript con funcionalidades adicionales. De hecho, cualquier código JavaScript válido es también código TypeScript, lo que nos muestra la gran interoperabilidad entre ambos lenguajes. Por ejemplo, escribir:

console.log("HolaMundo");

es perfectamente válido en TypeScript y funciona igual que en JavaScript. Esto es muy importante porque nos permite integrar código JavaScript existente en proyectos TypeScript sin problemas, simplemente copiando el código en archivos .ts. Además, podemos importar o requerir archivos .js desde TypeScript, lo que facilita la reutilización y la migración progresiva de proyectos.

Los tipos de datos básicos de JavaScript, como las cadenas de texto, funcionan igual en TypeScript, por lo que no hay que preocuparse por incompatibilidades en este sentido.

Una vez escrito nuestro código, podemos compilarlo para convertirlo en JavaScript que el navegador o Node.js puedan ejecutar. Para ello, usamos el compilador tsc. Si lo tenemos instalado globalmente, podemos ejecutar en la terminal:

tsc hola.ts

Esto genera un archivo hola.js con el mismo código, aunque el compilador añade algunos detalles como puntos y comas al final de las instrucciones. Por ejemplo, el archivo generado tendrá:

console.log("HolaMundo");

con un punto y coma al final, aunque en nuestro código original no lo hayamos puesto.

Para proyectos más grandes o para evitar tener que escribir el comando de compilación cada vez, es recomendable usar scripts de npm. En el archivo package.json podemos añadir una sección scripts donde definimos comandos personalizados. Por ejemplo, podemos añadir:

"scripts": {
  "build": "tsc hola.ts"
}

De este modo, en la terminal solo tendremos que ejecutar:

npm run build

y se compilará nuestro archivo hola.ts automáticamente. Esto es especialmente útil porque npm se encargará de buscar el compilador tsc en las dependencias locales del proyecto, evitando problemas con rutas o instalaciones globales.

Si estamos en Windows, es recomendable usar el Subsistema de Windows para Linux (WSL) para tener una experiencia más cercana a la terminal de Linux, aunque también se puede usar el símbolo del sistema o PowerShell con las adaptaciones necesarias en las rutas.

Con esta base, ya podemos empezar a escribir nuestros primeros programas en TypeScript y compilar de forma sencilla, para luego ir añadiendo más funcionalidades y aprovechar todo lo que ofrece este lenguaje.

Lista de reproducción
  1. 1
    Temporada 1
    5 minutos
  2. 2
    ¿Qué es TypeScript?
    11 minutos
  3. 3
    Instalando TypeScript
    8 minutos
  4. 4
    Compilando un Hola Mundo sencillo
    7 minutos
  5. 5
    Hola Mundo pero con tipos
    10 minutos
  6. 6
    Tipos: tipos primitivos
    12 minutos
  7. 7
    Tipos: tipos especiales (any, null, ...)
    10 minutos
  8. 8
    Tipos: arrays y tuplas
    11 minutos
  9. 9
    Tipos: objetos
    7 minutos
  10. 10
    Funciones: lo básico
    9 minutos
  11. 11
    Funciones: tipando funciones
    9 minutos
  12. 12
    Clases: introducción a las clases
    9 minutos
  13. 13
    Clases: creando una clase
    10 minutos
  14. 14
    Clases: modificador private
    8 minutos
  15. 15
    Clases: modificador readonly
    3 minutos
  16. 16
    Clases: Atributos virtuales con getters y setters
    10 minutos
  17. 17
    Clases: herencia
    9 minutos
  18. 18
    Clases: modificadores abstract y protected
    8 minutos
  19. 19
    Tipos alias
    6 minutos
  20. 20
    Tipos literales
    5 minutos
  21. 21
    Uniones de tipos
    7 minutos
  22. 22
    Uniones discriminantes
    7 minutos
  23. 23
    Intersecciones de tipos
    5 minutos
  24. 24
    Interfaces: introducción
    7 minutos
  25. 25
    Interfaces: modificadores y funciones
    9 minutos
  26. 26
    Interfaces: usándolas con clases
    8 minutos
  27. 27
    Interfaces: herencia de interfaces
    8 minutos
  28. 28
    Interfaces: interfaces indizadas
    5 minutos
  29. 29
    Interfaces: funciones y tipos híbridos
    5 minutos
  30. 30
    ¿Qué diferencia hay entre interfaces y tipos? (2020)
    8 minutos
  31. 31
    Casteos con as
    6 minutos
  32. 32
    instanceof y las guardas
    9 minutos
  33. 33
    Tipos enumerados
    8 minutos
  34. 34
    Valores avanzados para enumerados
    7 minutos
  35. 35
    Enumerados con valores computados
    6 minutos
  36. 36
    Genéricos en tipos
    8 minutos
  37. 37
    Múltiples genéricos y buenas prácticas
    5 minutos
  38. 38
    Genéricos en funciones
    8 minutos
  39. 39
    Genéricos con restricciones
    6 minutos
  40. 40
    Tipos de utilidad
    3 minutos
  41. 41
    Exportando módulos
    9 minutos
  42. 42
    Importando módulos
    7 minutos
  43. 43
    Export default e import asterisco
    6 minutos
  44. 44
    tsconfig
    7 minutos
  45. 45
    Módulos desde NPM
    7 minutos
  46. 46
    Arroba types y los .d.ts
    8 minutos
  47. 47
    Ejemplo (1): creando una API REST simple en TypeScript
    11 minutos
  48. 48
    Ejemplo (2): montando un servidor Express
    8 minutos
  49. 49
    Ejemplo (3): haciendo las funciones de control de datos
    11 minutos
  50. 50
    Ejemplo (4): conectando todas las piezas
    7 minutos