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

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 鈥榥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

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


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.
鉅鉅
馃し鈥嶁檪锔廤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

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 鈥渃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. 馃槃

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

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 鈥搕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.

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