¿Cómo funciona la compilación de TypeScript?

En este artículo, intentaremos comprender cómo funciona la compilación de TypeScript (por ejemplo, cómo se compila un código de TypeScript o un programa y produce una salida en la consola del navegador). 

En primer lugar, como sabemos, TypeScript es el lenguaje superconjunto de JavaScript que tiene algunas características adicionales, incluidas las adiciones de Tipos. También podemos agregar tipos de datos junto con las declaraciones de variables y tipos de retorno junto con las declaraciones de funciones (o declaraciones de métodos). TypeScript también se conoce como Lenguaje de tipado estático opcional, ya que le da al compilador la opción de incluir o no los tipos de datos asociados con las variables o básicamente nos permite hacer que el compilador desconozca el tipo de datos o variables, etc. El sistema de tipos de JavaScript es más fácil de usar y también reduce todos los problemas a los que nos enfrentamos como usuarios o desarrolladores al trabajar con JavaScript.

¿Vamos a entender cómo funciona la compilación de TypeScript?

 

• Cada vez que se escribe código usando el lenguaje TypeScript, se guarda en un archivo que se llama cualquier cosa seguido de un sufijo que contiene «.ts» al final.
• Este sufijo le indica al compilador que el archivo tiene un programa o un código que está escrito en lenguaje TypeScript y, por lo tanto, el compilador se encarga de ese hecho y, en consecuencia, compila el código.
• Cuando el compilador recibe un archivo (archivo «.ts»), primero compila el código del programa TypeScript en JavaScript.
• Cuando el compilador realiza el proceso mencionado anteriormente, en realidad crea otro archivo que es de JavaScript (tiene el sufijo “.js”).
• Luego, después de compilar el archivo de código TypeScript en el archivo de código JavaScript, en realidad lee e interpreta el código JavaScript.
• Después de interpretar el código JavaScript, el compilador compila ese código que luego produce el resultado.
• Por lo tanto, en comparación con el proceso de compilación de JavaScript, la compilación de TypeScript requiere más tiempo para compilar primero el archivo de TypeScript en JavaScript y luego produce el resultado en la consola del navegador.

Ahora que hemos entendido en detalle la compilación de TypeScript, comprendamos todos los hechos usando un ejemplo de codificación que se enumera a continuación:

Ejemplo: En este ejemplo, primero crearemos un archivo TypeScript (manteniendo el sufijo como «.ts» ) que contiene alguna lógica o resultados que necesitamos generar en la consola del navegador.

let displayData = (
    id: number, 
    name: string, 
    field: string) : string => {
          return (id + " - " + name + " - " + field);
}
  
console.log(displayData(1 , "Aman", "CSE"));

El fragmento de código anterior cuando el compilador lo recibe hace que el código TypeScript se convierta en el siguiente código JavaScript (el nombre del archivo es «.js» ):

var displayData = function (id, name, field) {
    return (id + " - " + name + " - " + field);
};
  
console.log(displayData(1, "Aman", "CSE"));

Salida: la salida de ambos fragmentos de código seguiría siendo la misma, como se ilustra a continuación.

1 - Aman - CSE