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 43

Preguntas 21

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

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 鈥渘px 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 鈥渙utDir鈥 y modif铆cala para que quede as铆: 鈥渙utDir鈥: 鈥./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 鈥渢arget鈥 y modif铆cala con el valor que necesites.

Espero le sirva a alguien.

el nombre Deno surgi贸 de invertir Node鈥 #theMoreYouKnow

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
  }
}

Si al ejecutar este comando 鈥榥px 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

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.

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

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

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.


por fin entiendo porque todo el mundo ama TypeScript

No podemos sumar un objeto con un n煤mero pero podr铆amos combinarlos no ? 馃槢

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

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 鈥淯SB鈥 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

A veces detesto como explica, sino fuera por los comentarios no se podr铆a seguir el curso.

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

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

Summary

鈿 In the compilation process of TypeScript; TypeScript compiler (tsc) converts code to ES3/ES5/ES6.
鉅鉅
馃し鈥嶁檪锔廤hy it is necessary to do this transpilation/compilation? Well, TypeScript isn鈥檛 supported by the browser, and Node.js
鉅鉅
鈥拣煈 Deno it鈥檚 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

y mejor aun a Deno y node, existe bun.js!!!

#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.

Si en la consola les aparece un error como el siguiente a la hora de ejecutar 鈥渘px tsc src/*.ts鈥

**Cannot find name 'Iterable'.**

Suele solucionarse instalando lo siguiente:

npm install @types/node --save-dev

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.

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

Para aquellos que no les funciones el comando npx, utilicen este: tsc --target es6 src/demo.ts
A煤n vigente para el 2024
error TS6053: File 'src/*.ts' not found.
  The file is in the program because:   
    Root file specified for compilation

para los que le sale este error, en las ultimas versiones de TS, ya coge todos los archivos por default, solo omitan el 鈥榮rc/*.ts鈥 a mi me funciono as铆.

La transpilaci贸n se d谩 cuando tu c贸digo corre muchas veces... (por estas cosas no tengo amigos)
Ahora entiendo cunado alguien decia que sass para css

const reloj = (hora)=>console.log(`La hora es : ${hora}`; // ACTUALMENTE ESTAMOS USANDO LA SINTAXIS DE ES6 // Para poder compilar el archivo .TS a .JS de Es6 // tenemos que hacer el siguiente comando: // npx tsc nombre.ts --target es6 //TAMBIEN TENEMOS LA OPCION DE INDICAR EN QUE CARPETA VA TRASPILAR //Con el siguiente comando indicamos la carpeta de destino : // npx tsc nombre.ts --target es6 --outDir nombreCarpeta //Tambien podemos decir que compile todos los archivos npx tsc *.ts --target es6 --outDir nombre

error TS6053: File 鈥榓rchivo_typescript.ts鈥 not found.
The file is in the program because:
Root file specified for compilation
Ejecuta: npx tsc -w
luego: npx tsc src/01-hello.ts

Node y el navegador no leen Typescript por defecto!

En el caso de (por alg煤n motivo) tener instalado globalmente TypeScript, se puede cargar las configuraciones en el archivo tsconfig.json especificando el path de donde queremos que tome el codigo "include": ["src/**/*.ts"], el target y directorio de salida.

tsconfig.json

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6",
    "sourceMap": true,
    "allowJs": true,
    "outDir": "dist"
  },
  "exclude": [
    "node_modules"
  ],
  "include": ["src/**/*.ts"]
}

para que TypeScript tome este archivo y no el global, se puede utilizar el flag --project tsconfig.json desde el directorio root. Si no espeficicamos el archivo de configuracion, TS intentara transpilar con la configuracion global y esto arrogaria errores.
Por otro lado no es compatible el uso del flag --project junto a --target o --outDir.

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 鈥渘ode_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

Si aparece algo como 鈥渃annot be compiled under 鈥樷搃solatedModules鈥欌︹ en VS a煤n cuando todos los problemas de c贸digo parecen solucionados,agreguen un:

export {};

Al final.
Eso deber铆a solucionar. 馃槃

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


Super 煤til para ver los errores directamente en el c贸digo 馃槃

el navegador no entiende webasembly?

Por si no lo notaron, al agregar 鈥搕arget 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 鈥渟umar鈥 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 鈥渃ompilar鈥
  2. Ejecutar el siguiente comando
npx tsc src/*.ts --target es6 --outDir dist

Donde:

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