¿Cuándo debería usar TypeScript?

El verano pasado tuvimos que convertir una enorme base de código (más de 18.000 líneas de código) de JavaScript a TypeScript. Aprendí mucho sobre las fortalezas y debilidades de cada uno y cuándo tiene sentido usar uno sobre el otro.

Este artículo ahora está disponible en japonés y chino.

Cuando tiene sentido usar TypeScript

Cuando tienes una base de código grande

Cuando su base de código es enorme y más de una persona trabaja en el proyecto, un sistema de tipos puede ayudarlo a evitar muchos errores comunes. Esto es especialmente cierto para las aplicaciones de una sola página.

Cada vez que un desarrollador puede introducir cambios importantes, generalmente es bueno tener algún tipo de mecanismo de seguridad.

El transpilador de TypeScript revela los errores más obvios, aunque no eliminará mágicamente la necesidad de depurar.

Si su código base no es tan grande, probablemente no tenga sentido hacerlo más grande agregando anotaciones de tipo. Convertí más de 180 archivos de JavaScript a TypeScript y, en la mayoría de los casos, agregó aproximadamente un 30% al tamaño total del código.

Cuando los desarrolladores de su equipo ya están acostumbrados a los lenguajes escritos estáticamente

Si usted o la mayoría del equipo provienen de un lenguaje fuertemente tipado como C # o Java, y no quieren apostar por JavaScript, TypeScript es una buena alternativa.

Aunque recomiendo aprender Javascript a fondo, no hay nada que le impida usar TypeScript sin conocer JavaScript. De hecho, TypeScript fue creado por el mismo tipo que hizo C #, por lo que las sintaxis son similares.

En mi empresa, teníamos un equipo de desarrolladores de C # que estaban codificando una aplicación de escritorio sofisticada en C # y WPF (que es básicamente una herramienta de desarrollo de front-end para el mundo del escritorio). Luego se les pidió que se unieran a un proyecto web como desarrolladores de pila completa. Entonces, en poco tiempo, pudieron aprender TypeScript para el front-end y luego aprovechar su conocimiento de C # para el back-end.

TypeScript puede servir como reemplazo de Babel

El antiguo Microsoft solía tomar herramientas estándar, Java, por ejemplo, y agregarles características no estándar propietarias, en este caso resultando en J ++. Luego intentarían obligar a los desarrolladores a elegir entre los dos.

TypeScript es exactamente el mismo enfoque, esta vez para JavaScript. Por cierto, esta no es la primera bifurcación de JavaScript de Microsoft. En 1996, bifurcaron JavaScript para crear JScript.

Aunque es un caso de uso menos común, es técnicamente posible transpilar el código ES6 en ES5 usando el transpilador TypeScript. Esto es posible porque ES6 es esencialmente un subconjunto de TypeScript, y el transpilador de TypeScript genera código ES5.

El transpilador de TypeScript genera un código Javascript (EcmaScript 5) bastante legible como salida. Esa fue una de las razones por las que el equipo de Angular 2 eligió TypeScript sobre el lenguaje Dart de Google.

Además, TypeScript tiene algunas características interesantes que no están en ES6, como enumeraciones y la capacidad de inicializar variables miembro en un constructor. No soy un gran fanático de la herencia, pero encuentro útil tener las palabras clave pública, privada, protegida y abstracta en las clases. TypeScript los tiene y ES6 no.

Nuestros desarrolladores de C # pensaron que era increíble poder escribir una función lambda como el cuerpo de un método, lo que eliminó los dolores de cabeza asociados con la palabra clave this .

Cuando una biblioteca o marco recomienda TypeScript

Si está utilizando Angular 2 u otra biblioteca que recomiende TypeScript, hágalo. Eche un vistazo a lo que estos desarrolladores tienen que decir después de usar Angular 2 durante seis meses.

Solo sepa que, aunque TypeScript puede usar todas las bibliotecas de JavaScript de fábrica, si desea buenos errores de sintaxis, deberá agregar las definiciones de tipo para esas bibliotecas de manera externa. Afortunadamente, los buenos chicos de DefinitelyTyped han creado un repositorio impulsado por la comunidad con herramientas para hacer precisamente eso. Pero este sigue siendo un paso adicional cuando configura su proyecto

(En una nota al margen: para todos los fanáticos de JSX, consulte TSX).

Cuando realmente sientes la necesidad de velocidad

Esto puede sorprenderle, pero el código TypeScript puede funcionar mejor en algunas situaciones que JavaScript. Dejame explicar.

En nuestro código JavaScript, teníamos muchas verificaciones de tipos. Era una aplicación de MedTech, por lo que incluso un pequeño error podría ser literalmente fatal si no se trataba correctamente. Entonces, muchas funciones tenían declaraciones como:

if(typeof name !== ‘string) throw ‘Name should be string’

Con TypeScript, podríamos eliminar muchas de estas comprobaciones de tipo por completo.

Esto mostró especialmente su efecto en partes del código donde anteriormente teníamos un cuello de botella en el rendimiento, porque pudimos omitir muchas verificaciones de tipo en tiempo de ejecución innecesarias.

Entonces, ¿cuándo estás mejor sin TypeScript?

Cuando no puede pagar un impuesto de transpilación adicional

No hay planes para admitir TypeScript de forma nativa en los navegadores. Chrome hizo algunos experimentos, pero luego canceló el soporte. Sospecho que esto tiene algo que ver con la sobrecarga innecesaria del tiempo de ejecución.

Si alguien quiere ruedas de entrenamiento, puede instalarlas. Pero las bicicletas no deberían venir con ruedas de entrenamiento permanentes. Esto significa que siempre tendrá que transpilar su código TypeScript antes de ejecutarlo en un navegador.

Para el ES6 estándar, es una historia completamente diferente. Cuando ES6 es compatible con la mayoría de los navegadores, la transpilación actual de ES6 a ES5 se volverá innecesaria (actualización: ¡sí!)

ES6 es el cambio más grande en el lenguaje JavaScript, y creo que la mayoría de los programadores simplemente se conformarán con él. Pero aquellos valientes que quieran probar la próxima versión de las funciones experimentales de JavaScript, o las funciones que aún no se han implementado en todos los navegadores, deberán transpilar de todos modos.

Sin transpilación, simplemente modifique el archivo y actualice su navegador. Eso es. No es necesario vigilar, transpilar a pedido o crear un sistema .

Si elige TypeScript, terminará haciendo una contabilidad adicional para las definiciones de tipo para sus bibliotecas y marcos de Javascript (utilizando DefinitelyTyped o escribiendo sus propias anotaciones de tipo). Eso es algo que no necesitaría hacer para proyectos de JavaScript puro.

Cuando quiere evitar casos extremos de depuración extraños

Los mapas de origen facilitan la depuración de TypeScript, pero el status quo no es perfecto. Hay casos extremos realmente molestos y confusos.

Además, existen algunos problemas al depurar la palabra clave "this" y las propiedades adjuntas a ella (pista: "_this" funciona en la mayoría de los casos). Esto se debe a que Sourcemaps actualmente no tiene un buen soporte para variables, aunque esto puede cambiar en el futuro.

Cuando desee evitar posibles sanciones de rendimiento

En nuestro proyecto, teníamos más de 9.000 líneas del buen JavaScript ES5 antiguo que entregaba pura potencia a un lienzo WebGL 3D. Lo mantuvimos así.

El transpilador de TypeScript (al igual que Babel) tiene características que requieren generar código adicional (herencia, enumeración, genéricos, asíncrono / espera, etc.). No importa lo bueno que sea su transpilador, no puede superar las optimizaciones de un buen programador. Así que decidimos mantenerlo en ES5 simple para facilitar la depuración y la implementación (sin transpilación).

Dicho esto, la penalización del rendimiento es probablemente insignificante en comparación con los beneficios de un sistema de tipos y una sintaxis más moderna para la mayoría de los proyectos. Pero hay casos en los que los milisegundos e incluso los microsegundos importan, y en esos casos no se recomienda la transpilación de ningún tipo (incluso con Babel, CoffeeScript, Dart, etc.).

Tenga en cuenta que Typecript no agrega ningún código adicional para la verificación de tipos en tiempo de ejecución. Toda la verificación de tipo ocurre en el momento de la transpilación y las anotaciones de tipo se eliminan del código Javascript generado.

Cuando quiere maximizar la agilidad de su equipo

Es más rápido configurar algo en JavaScript. La falta de un sistema de tipos hace que sea más ágil y fácil cambiar cosas. También hace que sea más fácil romper cosas, así que asegúrese de saber lo que está haciendo.

Javascript es más flexible. Recuerde que uno de los principales casos de uso de un sistema de tipos es hacer que sea difícil romper cosas. Si TypeScript es Windows, Javascript es Linux.

En JavaScript Land, no obtienes las ruedas de entrenamiento de un tipo de sistema, y ​​la computadora asume que sabes lo que estás haciendo, pero te permite conducir mucho más rápido y maniobrar más fácilmente.

Esto es particularmente importante de tener en cuenta si todavía está en la fase de creación de prototipos. Si es así, no pierda su tiempo con TypeScript. JavaScript es mucho más flexible.

Recuerde que TypeScript es un superconjunto de JavaScript. Esto significa que puede convertir fácilmente JavaScript a TypeScript más adelante si lo necesita.

Mi preferencia en JavaScript VS TypeScript

No existe un idioma que sea el mejor en general. Pero para cada proyecto individual, probablemente haya un lenguaje, una biblioteca, un marco, una base de datos y un sistema operativo objetivamente mejores y ... ya te haces una idea.

Para nuestro proyecto, tenía sentido usar TypeScript. Traté de refactorizar algunos de mis proyectos de hobby a TypeScript, pero no valió la pena el esfuerzo.

Personalmente, me gustan las quintas sobre TypeScript:

  1. Es totalmente compatible con ES6. Es realmente agradable ver a Microsoft jugando limpio con los otros navegadores. Nuestro ecosistema puede beneficiarse de un fuerte rival de Google, Mozilla y Apple. Microsoft está gastando mucha energía en ello, como escribir Visual Studio Code desde cero utilizando TypeScript en Google Chrome, de todas las plataformas.
  2. El sistema de tipos es opcional. Viniendo de una experiencia en C y Java, encontré liberadora la falta de sistema de tipos en JavaScript. Pero odiaba perder tiempo cuando me encontraba con errores estúpidos durante el tiempo de ejecución. TypeScript me permite evitar muchos errores comunes para poder concentrar mi tiempo en corregir los que son realmente complicados. Es un buen equilibrio. Me gusta. Es mi gusto Utilizo tipos siempre que puedo porque me da tranquilidad. Pero ese soy yo. Si utilizo TypeScript, no quiero limitarme a sus funciones de ES6.
  3. El código JavaScript que sale del transpilador TypeScript es muy legible. No soy fanático de Sourcemaps, así que hago la mayor parte de mi depuración en el JavaScript generado. Es absolutamente asombroso. Puedo entender totalmente por qué Angular 2 eligió TypeScript en lugar de Dart.
  4. La experiencia de desarrollo de TypeScript es fantástica. VS Code es muy inteligente cuando se trata de JavaScript (algunos pueden argumentar que es el IDE JS más inteligente). Pero TypeScript lleva los límites a un nivel completamente nuevo. Las funciones de autocompletado y refactorización en VSCode funcionan con mucha más precisión, y no es porque el IDE sea súper inteligente. Eso es todo gracias a TypeScript.
  5. Las anotaciones de tipo son como una documentación de nivel básico. Declaran el tipo de datos que cada función espera, sus resultados y varios otros consejos les gusta readonly, publico privateatributos. En mi experiencia, al intentar refactorizar un código JavaScript a TypeScript, generalmente termino con un código más limpio con una estructura más agradable. De hecho, escribir TypeScript ha mejorado la forma en que escribo JavaScript simple.

Mecanografiado no es la respuesta para todo. Todavía puedes escribir un código terrible en él.

Los que odian TypeScript van a odiar, ya sea por miedo al cambio o porque conocen a alguien que conoce a alguien que le tiene miedo. La vida continúa y TypeScript presenta nuevas funciones a su comunidad de todos modos.

Pero al igual que React, TypeScript es una de esas tecnologías influyentes que está ampliando los límites de nuestro desarrollo web.

Ya sea que use TypeScript o no, no está de más probarlo para desarrollar sus propias opiniones al respecto. Tiene una curva de aprendizaje, pero si ya conoce JavaScript, será fácil.

Aquí hay un transpilador TS en tiempo real en línea con algunos ejemplos que le permiten comparar el código TypeScript con su código JavaScript equivalente.

Aquí hay un tutorial rápido y una guía muy agradable, pero soy más un tipo de referencia de idiomas. Si te gustan los videos, aquí tienes un curso de Udemy.

John Papa tiene un breve artículo sobre ES5 y TypeScript.

Hay un estudio interesante que muestra que todo es igual, un sistema de tipos reduce los errores en un 15%.

Ah, y si te apetece ir a una misión secundaria, lee por qué la programación es el mejor trabajo de todos.