Comprender la diferencia entre TypeScript y JavaScript

Una de las preguntas más frecuentes que recibo es: ¿Cuál es la diferencia entre JavaScript y Typecript?


Vamos a averiguar …


Desde el momento en que comenzó a programar, JavaScript (JS) ha sido parte de todos sus proyectos de front-end. Cuando esté un poco familiarizado con JS, piense en TypeScript como JS más algunas características adicionales que hacen que su aplicación sea más limpia y mecanografiado. TypeScript fue desarrollado como un proyecto de código abierto por Microsoft para hacer que el desarrollo de JS sea más eficiente y detectar errores de compilación en una etapa temprana.


En este artículo, analizaremos algunas de las características clave de JavaScript y TypeScript, y las diferencias entre los dos lenguajes de programación.


¿Qué es JavaScript?


JavaScript se utiliza para las secuencias de comandos del lado del cliente. Puede crear un script en una página HTML o crear un archivo con extensión .js e incluirlo en su archivo HTML. Un ejemplo común del mundo real en el que puede ver JavaScript es la validación de la página de inicio de sesión, que le mostrará un error si su nombre de usuario / contraseña es incorrecto.


Escribamos un código JS simple y ejecútelo en el navegador:


Cree un archivo example.html y agregue el siguiente código:

<script>feeling = ‘happy’;feeling = 23;</script>

Este código simple declara una variable y le asigna el valor happy (string). Podemos asignar un valor de un tipo diferente (número) a la misma variable. JavaScript no se quejaría de esto y podemos ejecutar el código fácilmente en cualquier navegador. Ahora determinemos el valor del sentimiento del usuario:


Nuestro HTML se ve así:

<input type = «textbox» id = «howyoufeel»>

y el guión será:

feeling = document.getElementById(«howyoufeel»).value;

A menos que pongamos controles explícitos en el script, JS acepta cualquier valor del usuario y lo transmite. Entonces puede poner cualquier cosa como 234, @. # $% Etc. en la variable sentimiento.


Funciones de JavaScript


De lo anterior podemos observar las siguientes funciones de JavaScript:



  • Lenguaje de scripting débilmente tipado

  • Se utiliza para secuencias de comandos del lado del cliente y del lado del servidor (con node.js)

  • Flexible y dinámico

  • Compatible con los principales navegadores

  • Ligero e interpretado

Si estás interesado en dominar JavaScript, consulta este curso de Udemy.


Que es TypeScript


Una aplicación real tendrá muchas validaciones y pruebas dinámicas. Para tales aplicaciones, el código JavaScript eventualmente será difícil de probar, principalmente porque no hay verificación de tipos. Para obtener valores de los usuarios, es importante que los obtenga usted mismo desde el principio. Aquí es donde entra TypeScript.


TypeScript es fuerte mecanografiado y tiene un compilador que se quejará si no define eso Escribe una variable.


Tanto JavaScript como TypeScript cumplen con las especificaciones ECMAScript para un lenguaje de secuencias de comandos. TypeScript puede ejecutar todo el código JavaScript y es compatible con todas sus bibliotecas, por eso se le llama el superconjunto de JavaScript.


Instalación de TypeScript


Para ejecutar nuestro código anterior en TypeScript, necesitamos instalar el compilador de TypeScript con el paquete npm (si tiene el nodo js).

npm install -g typescript

o descárguelo directamente desde la página oficial de descargas de Microsoft. También puede usar el patio de juegos de TS para ver el código transcompilado de ts a js.


Luego puede cambiar la configuración del proyecto en. configurar tsconfig.json y use cualquier IDE o editor de texto para escribir código TypeScript y guardarlo como .ts.


Aún puede salirse con la suya sin definir el tipo de variable, y TypeScript puede inferir el tipo de datos. Sin embargo, obtendrá un error sentimental si especifica algo que no sea el tipo utilizado primero (una cadena en nuestro caso), durante la compilación en sí.


Siempre es bueno si el código tiene una nota de tipo para el mantenimiento y la usabilidad:

var feeling: string = “happy”;

¡No es eso!


TypeScript tiene muchas más funciones que facilitan la vida de un desarrollador.


Características de TypeScript


TypeScript tiene una amplia gama de funciones y cada versión contiene nuevas funciones que hacen que el desarrollo sea más fácil que antes. Con la nueva versión (4.0), por ejemplo, algunas funciones adicionales son tipos de tuplas variadas, fábricas JSX definidas por el usuario, inferencias de propiedades de clase de constructores, etc. Algunas funciones típicas de TypeScript son:



  • Admite conceptos de programación orientados a objetos como interfaz, herencia, clase. Drogas genericas

  • Detecte errores desde el principio

  • Soporte IDE con verificación de sintaxis y sugerencias

  • Más fácil de depurar desde que se ingresa

  • Transcompilado a JavaScript

  • Se utiliza tanto para aplicaciones del lado del servidor como del lado del cliente

  • Soporte multiplataforma y multiplataforma

  • Admite todas las bibliotecas y extensiones de JS

¿Por qué necesitamos TypeScript? (Ventajas de TypeScript sobre JavaScript)


Microsoft desarrolló y usó TypeScript para sus proyectos internos durante dos años antes de su lanzamiento en 2012. Crearon JavaScript escrito porque era más fácil probar el código para aplicaciones empresariales de nivel de producción. Aún puede usar las funciones de entrada dinámica, pero también puede ingresar las variables si realmente lo necesita.


Considere el siguiente código:

var mynum = //get from user;addten(number){return number + 10;}

Esperaríamos que el resultado siempre fuera un número. Pero, ¿y si un usuario da «oveja»? La salida es Schaf10 – ¡idealmente necesitamos decirle al usuario que esta operación no es posible!


Además, tener la información de tipo disponible hará que los editores de texto y los IDE sean más fáciles de usar y evitará errores en tiempo de ejecución. También es más fácil refactorizar el código más adelante.


¿Eso significa que no necesitamos JavaScript? (Desventajas de TypeScript en comparación con JavaScript)


Puede pensar en TypeScript como una extensión de JavaScript, pero ciertamente no como un reemplazo.


Con fragmentos de código más pequeños, TypeScript puede convertirse en una sobrecarga: no hay necesidad de instalación, compilación y transcompilación. Con JavaScript, simplemente puede escribir su secuencia de comandos en HTML y funcionará. También es más fácil depurar el código cuando puede actualizar el navegador cada vez que cambia algo.


Comparación cara a cara


Ahora que entendemos las características y beneficios de TypeScript y JavaScript, veamos algunas comparaciones más:


mecanografiadoJavaScriptUn lenguaje escrito que detecta errores de compilación desde el principioPuede encontrar errores durante el tiempo de ejecuciónAdecuado para grandes proyectos, ya que mejora la facilidad de mantenimiento y la legibilidad del código.A medida que se agrega más código, se vuelve difícil de probar y depurar, por lo que JS es bueno para proyectos pequeños


Superconjunto de JS, es decir, funciones como orientación de objetos, verificación de tipos y másUn lenguaje de secuencias de comandos que admite la creación dinámica de contenido web.Requiere instalación del compilador y configuración de configuraciónNo requiere instalación; El código JS se puede utilizar con el