No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

El compilador de TypeScript

5/24
Recursos

Este compilador lo que realmente hace es transpilar, pues ni el navegador ni Node.js (a abril de 2022) pueden leer nativamente archivos TypeScript, por lo que realiza un proceso de traducción en la que su código lo convierte a JavaScript.
Fases del compilador de TypeScript

Compilación de archivos TypeScript desde Node.js

Para realizar el proceso de transpilación en Node.js, ejecutemos lo siguiente en la terminal:

npx tsc archivo_typescript.ts

Tras esto, se creará un archivo JavaScript dentro de la misma carpeta donde este tu archivo TypeScript y con el mismo nombre. Por ejemplo, en nuestro proyecto realizamos esa operación dentro de la carpeta src con el archivo 01-hello.ts, dando como resultado:
Resultado del comando: npx tsc archivo_typescript.ts

Compilación a una versión específica

Podemos hacer que nuestro archivo TypesSript sea transpilado a un archivo JavaScript, por ejemplo, con el estándar ECMAScript 6. Para ello ejecutemos:

npx tsc archivo_typescript.ts --target es6

Enviando compilación a una carpeta

Si deseas que los archivos transpilados no se generen en la misma carpeta donde están tus archivos TypeScript, puedes indicarle al compilador hacia donde quieres que vayan:

npx tsc archivo_typescript.ts --target es6 --outDir carpeta_destino

También podrías indicar que deseas aplicar la anterior operación a todos los archivos con extensión TypeScript:

npx tsc *.ts --target es6 --outDir carpeta_destino

Deno: un entorno nativo para ambos lenguajes

Deno, del mismo creador de Node.js, es un nuevo entorno de ejecución para JavaScript que puede correr también nativamente TypeScript. Sin embargo, aún no tiene la madurez en el ecosistema de Node.js

Contribución creada por: Martín Álvarez.

Aportes 30

Preguntas 13

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

o inicia sesión.

Si acaso te aparece el error:

error TS6053: File 'src/*.ts' not found.
  The file is in the program because:   
    Root file specified for compilation

Se resuelve creando un archivo tsconfig.json.

Pasos:

  • 1 Posicionarte en el directorio raíz de tu proyecto.
  • Ejecutar el comando “tsc --init
    • Esto creará el archivo tsconfig.json
  • Ejecutar el comando “npx tsc -p ./ -w”
    • Esto compilará en el mismo directorio todos tus archivos .ts
  • Modificar el target o el destino (para enviar los compilados a /dist) En el archivo tsconfig.json busca la bandera “outDir” y modifícala para que quede así: “outDir”: “./dist”,

Listo, ya tienes configurado lo necesario para seguir el curso tal cual (hasta el momento).

Nota: El tsconfig ya viene configurado para compilar a ES6, en caso de que quieras cambiar, busca la línea “target” y modifícala con el valor que necesites.

Espero le sirva a alguien.

el nombre Deno surgió de invertir Node… #theMoreYouKnow

Ese tipo de cosas hacen que javascript a veces sea tedioso de usar, typescript resuelve la mayoría de estos casos, ya de los tipos ni hablemos.

A cualquier desarrollador le conviene usar typescript.

El compilador de TS

El código TS no es leído por navegadores ni servidores. Lo que se hace es transpilarlo a JS.

Podemos seleccionar una versión en específico de TS e indicar en dónde queremos que guarde el archivo JS: npx stc src/*.ts --target es6 --outDir dist

O mejor crea un archivo de configuración: tsc --init

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "outDir": "./dist",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  }
}

También se puede crear un archivo tsconfig.json con la configuración para utilizar tsc

{
  "compilerOptions": {
    "target": "es6",
    "outDir": "./dist"
}

Si al ejecutar este comando ‘npx tsc src/*.ts --target es6 --outDir dist’, te aparece este error en consola:

Puedes ejecutar el mismo comando, pero en una terminal bash y ya no te aparecerá ese error y la compilación se realizará como lo indica el profesor

Hola a todos, a los que estan comenzando este curso les recomiendo algo . Cuando usen el comando npx tsc src/demo.ts --target es6 , les recomiendo que en lugar de es6 usen por ejemplo es2021, que fue el que yo use, porque al usar es6 devuelve el archivo demo.js con codigo muy viejo en algunas partes.

Pendientes a bun.js, que es un nuevo Runtime All-in-One que promete, además de poder correr TypeScript directamente sin necesidad de transpilar a JS (pero sin dejar de soportarlo), viene con su propio bundler, transpiler y cliente npm integrados (retrocompatible con paquetes de Node), con velocidades de ejecución hasta 3 veces mayores (siempre que el servidor esté en la misma región o se use un CDN para los archivos estáticos o Containers para el despliegue de las Apps). Aún está en fase Beta por lo que nos toparemos con algunos bugs en el corto plazo, pero apuesto que en menos de 5 años todos los navegadores van a empezar a ejecutar código TypeScript directamente, y en unos 10~15 años, JS quedará practicamente deprecado, jamás volveremos a ver el caos de JS, preocupados por los types, el código espagueti, los call back hell o el hoisting… El futuro de la Web es casi útopico, como el interfaz USB-C, todo lo que los mil millones de “USB” debieron ser desde el inicio… Que buenos tiempos para estar vivo y trabajar en la Industria Tech :’)
#CursoBunJS-Platzi
#TypeScriptForever

Con npx tsc --init --target es6 pueden crear la configuración para un proyecto en typescript

TS resuelve la mayoria de procesos que llegan a ser algo tediosos en JS


por fin entiendo porque todo el mundo ama TypeScript

<npx tsc  src/demo.ts --target es6>
<src/*.ts --target es6 --outDir dist> 

No podemos sumar un objeto con un número pero podríamos combinarlos no ? 😛

const rta = {...person, limit};

Summary

⚙ In the compilation process of TypeScript; TypeScript compiler (tsc) converts code to ES3/ES5/ES6.
⠀⠀
🤷‍♂️Why it is necessary to do this transpilation/compilation? Well, TypeScript isn’t supported by the browser, and Node.js
⠀⠀
‼👀 Deno it’s a library that is already supported, an alternative to Node.js
⠀⠀
👴 Why older versions? Wheter in case that we need to migrate from Javascript or basically we need to run that code in all the browsers (recommend version would be ES5) 😉

probe la extension .ts con node y ejecuto el archivo .ts
quizas porque es algo muy simple como un console.log

En caso de aparecer el error:

error TS6053: File 'src/*.ts' not found.
  The file is in the program because:   
    Root file specified for compilation

Y hayan instalado typescript localmente, solo tienen que usar el comando

npx tsc --init

y seguir los pasos que Pepe Sosa dice en su comentario

El compilador de TypeScript

  • Ya que Node y el navegador no son capaces de leer codigo typescript, se necesita hacer un proceso de compilacion a Js que se conoce como Transpilacion.

  • Cabe resaltar que se debe indicar la version de Js que se desea obtener, ya que por defecto el compilador entiende que el proceso debe resulta en Es3.

  • Se crea el archivo index.ts.

  • Se crea el directorio dist, en donde se almacenara el resultado de la Transpilacion.

  • Para correr el proceso se utiliza el comando: npx tsc src/*.ts --outDir dist --target es6.

Creo que se debería enseñar directamente a usar el ts config para evitar confusiones.

para agregar las configuraciones de outDir y rootDir pueden usar el comando

tsc --init

y desde alli hacer todas las configuarciones.
Tambien pueden visitar mi repo de github y leer el README para ver que comandos pueden ser utilies en TS
Repo para ver los comandos

Si aparece algo como “cannot be compiled under ‘–isolatedModules’…” en VS aún cuando todos los problemas de código parecen solucionados,agreguen un:

export {};

Al final.
Eso debería solucionar. 😄

Si en la consola les aparece un error como el siguiente a la hora de ejecutar “npx tsc src/*.ts”

**Cannot find name 'Iterable'.**

Suele solucionarse instalando lo siguiente:

npm install @types/node --save-dev

Chicos, les recomiendo esta extension de vs code:
Error Lens


Super útil para ver los errores directamente en el código 😄

#Hola, comunidad.

Probando el --outDir, no es necesario crear la carpeta, el compilador lo crea por nosotros.

npx tsc src/*.ts --target es6 --outDir dist

Saludos.

el navegador no entiende webasembly?

Por si no lo notaron, al agregar –target es6 ya no tradujo el const como var , sino ya lo dejo como const

En el aula de los Lenguajes de programación, JavaScript sería el chico raro. XD

npm i -D typescript
npx tsc
npx tsc --version
npx tsc --init

Suponiendo, que necesitaramos “sumar” un objeto con algún entero o cadena, podriamos hacer destructuring 😃

const rta = {...person,limit};
  1. Crear una carpeta en donde vamos a guardar los archivos generados despues de “compilar”
  2. Ejecutar el siguiente comando
npx tsc src/*.ts --target es6 --outDir dist

Donde:

src/*.ts: Es la ruta donde estan los archivos .ts
–target es6: Es la version de js con la que se quiere compilar.
–outDir: Es para guardar en otra carpeta los archivos generados al compilar.
dist: la carpeta donde se van a almacenar los archivos generados.

Como dato por si les interesa saber más de Deno:
Deno es un entorno de ejecución de javascript, al igual que Node.js
Fue creado por el mismo fundador de Node, en sus propias palabras, quizo reconstruir node con lo que no le gustaba de el.

Actualmente pueden probarlo, ya hay una versión estable, funciona directamente con Typescript, tiene cosas propias muy interesantes como el hecho que no tenga permisos por default, no existen los node_modules, etc

No es tan utilizado en la actualidad por diversas causas pero el tema de los modulos es uno de ellos, node propone trabajar con una paquete de librerías instaladas localmente, los “node_modules”, Deno propone utilizar las librerías importando directamente a una URL en vez de tener que instalar localmente las .


import { serve } from "https://deno.land/[email protected]/http/server.ts";

serve(handleRequest);

Si les interesa saber más de este mundo los invito a investigar más sobre el proyecto Deno

Tiene también un servicio de Hosting y ejemplos de aplicaciones web corriendo en Deno