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 codificar, JavaScript (JS) habría sido parte de todos sus proyectos de 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 mecanografiado. 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 script.
What is 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, donde se 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 example.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 happy (cadena). Podemos asignar un valor de un tipo diferente (número) a la misma variable. JavaScript no se quejaría de ello y podemos ejecutar el código en cualquier navegador sin ningún problema. Ahora, obtengamos el valor de sentir 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 verificaciones explícitas en el script, JS aceptará cualquier valor del usuario y lo pasará. Entonces, puede poner cualquier cosa como 234, @. # $%, Etc. en la variable sentimiento.
Features of JavaScript
De lo anterior, podemos observar las siguientes características de JavaScript:
- Lenguaje de secuencias de comandos 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á interesado en dominar JavaScript, consulte este Curso Udemy.
What is 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 los valores de los usuarios, es importante obtenerlos desde el principio. Aquí es donde interviene TypeScript.
TypeScript es fuertemente mecanografiado y tiene un compilador que se queja si no define el tipo de 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 usando el paquete npm (si tiene nodo js).
npm install -g typescripto descárgalo directamente del oficial Página de descargas de Microsoft. También puedes usar el TS patio de recreo 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 usa cualquier IDE or editor de texto para escribir código TypeScript y guardarlo como .ts.
Aún puede escapar si no define el tipo de variable y TypeScript puede inferir el tipo de datos. Sin embargo, obtendrá un error de 'sensación' si da algo que no sea el primer tipo utilizado (en nuestro caso, una Cadena), durante la compilación en sí.
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 funciones para facilitar la vida de un desarrollador.
Features of TypeScript
TypeScript tiene un rico 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 variadas, fábricas JSX personalizadas, inferencia de propiedades de clase a partir de constructores, etc. Algunas características típicas de TypeScript son:
- Admite conceptos de programación orientados a objetos como interfaz, herencia, clase. genéricos
- Detección temprana de errores
- Soporte 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 multiplataforma
- Soporta todos los Bibliotecas JS y extensiones
Why do we need TypeScript? (Advantages of TypeScript over 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. Puede seguir utilizando las funciones de escritura dinámica pero también escribir las variables cuando sea realmente necesario.
Considere el siguiente código:
var mynum = //get from user;
addten(number){
return number + 10;
}Es de esperar que el resultado sea siempre un número. Pero, ¿qué pasa si un usuario da "oveja"? La salida será oveja10; lo ideal es decirle al usuario que esta operación no es posible.
Además, cuando tiene la información de tipo disponible, 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.
Does that mean we don’t need JavaScript? (Disadvantages of TypeScript over 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: instalar, compilar y transcompilar será redundante. 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 simplemente puede actualizar el navegador cada vez que cambia algo.
Head-to-head comparison
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 proyectos grandes, 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 adecuado para proyectos pequeños |
| Superconjunto de JS, es decir, características como orientación a objetos, verificación de tipos y más | Un 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ón | No es necesaria ninguna instalación; El código JS se puede escribir directamente en un navegador usando tag |
| Todos los archivos .ts se convierten a archivos .js antes de la ejecución; conocido como trans-compilación | Los desarrolladores pueden incluir directamente archivos .js dentro de archivos HTML para su ejecución utilizando etiqueta. |
| Potente e intuitivo con funciones ricas como módulos, genéricos, interfaces | Adecuado para aplicaciones web simples que no requieren funciones avanzadas |
| Se utiliza para secuencias de comandos del lado del servidor y del lado del cliente | Fácil de usar para las secuencias de comandos del lado del cliente, pero se vuelve pesado y complejo para las secuencias de comandos del lado del servidor |
| Se tarda en ejecutar debido al paso de compilación | No se requiere compilación, por lo tanto, una ejecución más rápida |
| Admite escritura estática y dinámica | Admite solo escritura dinámica |
| Podemos especificar el tipo de anotación como:
|
Las anotaciones de tipo no se pueden especificar porque no podemos definir tipos. |
Conclusión
Desde una perspectiva de aprendizaje, JavaScript podría ser su elección natural. Abres un archivo, escribes algo dentro <script></script> etiquetas, guárdelo como HTML - ¡verá los resultados! Luego, puede aprovecharlo para crear contenido más dinámico.
Además, cuando esté trabajando en una aplicación a gran escala, tener conocimientos de JavaScript le ayudará a cambiar fácilmente a TypeScript.
Sin embargo, desde una perspectiva profesional y salarial, como Desarrollador TypeScript, será más flexible y se sentirá más 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 $ 110 y $ 147, mientras que a los desarrolladores de JS se les paga entre $ 63 y $ 118 por año.
