Una de las preguntas más frecuentes que recibo es, ¿cuál es la diferencia entre JavaScript y Typescript?
Vamos a averiguar…
Desde el momento en que comenzó a codificar, JavaScript (JS) habría sido parte de todos sus proyectos front-end. Si 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 ordenada y mecanografiada. El 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 desde el principio.
En este artículo, discutiremos algunas características importantes de JavaScript y TypeScript y las diferencias entre ambos lenguajes de secuencias de comandos.
Tabla de contenido
¿Qué es JavaScript?
JavaScript se utiliza para secuencias de comandos del lado del cliente. Puede crear un script en una página HTML o crear un archivo con una extensión .js e incluirlo en su archivo HTML. Un ejemplo común del mundo real donde puede ver JavaScript es la validación de la página de inicio de sesión, donde se le muestra un error cuando su nombre de usuario/contraseña es incorrecto.
Escribamos un código JS simple y ejecútelo en el navegador:
Cree un archivo ejemplo.html y agregue el siguiente código:
<script> feeling = 'happy'; feeling = 23; </script>
Este código simple declara una variable y le asigna un valor de feliz (cadena). Podemos asignar un valor de diferente tipo (número) a la misma variable. JavaScript no se quejaría y podemos ejecutar el código en cualquier navegador sin ningún problema. Ahora, obtengamos el valor de la sensación del usuario:
Nuestro HTML se verá 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 aceptará cualquier valor del usuario y lo transmitirá. Entonces, puedes poner algo como 234, @.#$%, etc. en la variable de sentimiento.
Características de JavaScript
De lo anterior, podemos observar las siguientes características de JavaScript:
- Lenguaje de secuencias de comandos débilmente tipificado
- Se utiliza para secuencias de comandos del lado del cliente y del lado del servidor (con node.js)
- Flexible y dinámico
- Compatible con todos los navegadores principales
- Liviano e interpretado
Si estás interesado en dominar JavaScript, echa un vistazo a esto Curso de Udemy.
¿Qué es TypeScript?
Una aplicación del mundo real tendrá muchas validaciones y comprobaciones dinámicas. Para tales aplicaciones, el código JavaScript será difícil de probar en algún momento, principalmente porque no hay verificación de tipos. Al obtener valores de los usuarios, es importante hacerlo bien desde el principio. Aquí es donde entra en juego TypeScript.
TypeScript está fuertemente tipado y tiene un compilador que se queja si no define el tipo de una variable.
Tanto JavaScript como TypeScript se ajustan a las especificaciones de ECMAScript para un lenguaje de secuencias de comandos. Typescript puede ejecutar todo el código de JavaScript y es compatible con todas sus bibliotecas, por eso se llama el superconjunto de JavaScript.
Instalación de mecanografiado
Para ejecutar nuestro código anterior en TypeScript, necesitamos instalar el compilador de TypeScript usando el paquete npm (si tiene el nodo js).
npm install -g typescript
o descargarlo directamente desde el oficial pagina de descargas de microsoft. También puede utilizar el parque infantil TS para ver cómo se transcompila el código de ts a js.
Una vez hecho esto, puede configurar los ajustes del proyecto en tsconfig.json y usar cualquier IDE o editor de texto para escribir código TypeScript y guardarlo como .ts.
Todavía puede salirse con la suya al no definir el tipo de variable y TypeScript puede inferir el tipo de datos. Sin embargo, obtendrá un error de ‘sensación’ si proporciona algo que no sea el primer tipo utilizado (en nuestro caso, una cadena), durante la compilación misma.
Siempre es bueno que el código tenga una anotación de tipo para facilitar el mantenimiento y el uso:
var feeling: string = “happy”;
¡Eso no es!
TypeScript proporciona muchas otras características para facilitar la vida de un desarrollador.
Características de TypeScript
TypeScript tiene un amplio conjunto de funciones y cada versión viene con nuevas funciones para hacer que el desarrollo sea más fácil que antes. Por ejemplo, con la nueva versión (4.0), algunas características adicionales son tipos de tuplas variádicas, fábricas JSX personalizadas, inferencia de propiedades de clase de constructores, etc. Algunas características típicas de TypeScript son:
- Admite conceptos de programación orientada a objetos como interfaz, herencia, clase. genéricos
- Detección temprana de errores
- Compatibilidad con IDE con verificación de sintaxis y sugerencias
- Más fácil de depurar a medida que se escribe
- Trans-compila en JavaScript
- Se utiliza tanto para aplicaciones del lado del servidor como del lado del cliente
- Soporte multiplataforma y multinavegador
- Admite todas las bibliotecas y extensiones de JS
¿Por qué necesitamos TypeScript? (Ventajas de TypeScript sobre JavaScript)
Microsoft desarrolló y usó TypeScript durante dos años para sus proyectos internos antes de hacerlo público en 2012. Crearon un JavaScript escrito porque era más fácil probar el código para aplicaciones empresariales de nivel de producción. Todavía puede usar las funciones de escritura dinámica, pero también puede escribir las variables cuando sea realmente necesario.
Considere el siguiente código:
var mynum = //get from user;
addten(number){
return number + 10;
}
Esperaríamos que el resultado sea siempre un número. Pero, ¿y si un usuario da “ovejas”? La salida será oveja10. ¡Idealmente, debemos decirle al usuario que esta operación no es posible!
Además, cuando tiene disponible la información de tipo, los editores de texto y los IDE se vuelven más fáciles de usar y ahorran errores de tiempo de ejecución. También es más fácil refactorizar el código en un momento posterior.
¿Significa eso que no necesitamos JavaScript? (Desventajas de TypeScript sobre JavaScript)
Puede pensar en TypeScript como una extensión de JavaScript, pero ciertamente no como un reemplazo.
Para fragmentos de código más pequeños, TypeScript puede convertirse en una sobrecarga: la instalación, la compilación y la transcompilación serán redundantes. Con JavaScript, puede simplemente escribir su script en HTML y funcionará. También es más fácil depurar el código cuando simplemente puede actualizar el navegador cada vez que cambia algo.
Comparación cara a cara
Ahora que hemos entendido las características y ventajas de TypeScript y JavaScript, veamos más comparaciones:
Mecanografiado
JavaScript
Un lenguaje escrito que detecta errores de compilación desde el principio
Puede encontrar errores durante el tiempo de ejecución
Adecuado para grandes proyectos, ya que mejora la capacidad de mantenimiento y la legibilidad del código.
A medida que se agrega más código, se vuelve más difícil de probar y depurar, por lo que JS es adecuado para proyectos pequeños.
Superconjunto de JS, es decir, funciones como orientación a objetos, verificación de tipos y más
Un lenguaje de secuencias de comandos que admite la creación de contenido web dinámico
Requiere instalación del compilador y configuración de configuración
Sin necesidad de ninguna instalación; El código JS se puede escribir directamente en un navegador usando la etiqueta , lo guardas como HTML y verás los resultados. A continuación, puede aprovecharlo para crear contenido más dinámico.
Además, cuando esté trabajando en una aplicación a gran escala, tener conocimiento de JavaScript lo ayudará a cambiar fácilmente a TypeScript.
Sin embargo, desde una perspectiva de carrera y salario, como Desarrollador de mecanografiado, será más flexible y cómodo con los proyectos JS y TS, por lo que definitivamente será un mejor activo en el mercado. Por lo general, a los desarrolladores de TypeScript se les paga entre $ 110k y $ 147k, mientras que a los desarrolladores de JS se les paga alrededor de $ 63k- $ 118k por año.