pagina - typescript vs javascript diferencias
¿Qué es TypeScript y por qué lo usaría en lugar de JavaScript? (5)
¿Podrías describir qué es el lenguaje de TypeScript?
¿Qué puede hacer que JavaScript o las bibliotecas disponibles no puedan hacer, eso me daría razones para considerarlo?
Originalmente escribí esta respuesta cuando Typescript todavía estaba fuera de lugar. Cinco años después, esta es una descripción general correcta, pero mire la respuesta de Lodewijk a continuación para obtener más información.
Vista de 1000 pies ...
TypeScript es un superconjunto de JavaScript que proporciona principalmente tipos de escritura, clases e interfaces estáticas opcionales. Uno de los grandes beneficios es permitir que los IDE proporcionen un entorno más rico para detectar errores comunes a medida que escribe el código .
Para tener una idea de lo que quiero decir, mire el video introductorio de Microsoft en el idioma.
Para un proyecto de JavaScript grande, la adopción de TypeScript puede resultar en un software más robusto, mientras que aún se puede implementar donde se ejecutaría una aplicación JavaScript normal.
Es de código abierto, pero solo obtiene el Intellisense inteligente a medida que escribe si utiliza un IDE compatible. Inicialmente, solo se trataba de Visual Studio de Microsoft (también señalado en la publicación del blog de Miguel de Icaza ). En estos días, otros IDE también ofrecen soporte para TypeScript .
¿Hay otras tecnologías como esta?
Hay CoffeeScript , pero eso realmente sirve para un propósito diferente. En mi humilde opinión, CoffeeScript proporciona legibilidad para los seres humanos, pero TypeScript también proporciona una legibilidad profunda para las herramientas a través de su escritura estática opcional (consulte esta publicación reciente del blog para conocer un poco más de crítica) También hay Dart pero eso es un reemplazo total para JavaScript (aunque puede producir código JavaScript )
Ejemplo
A modo de ejemplo, aquí hay algunos TypeScript (puede jugar con esto en el Patio de Juegos de TypeScript )
class Greeter {
greeting: string;
constructor (message: string) {
this.greeting = message;
}
greet() {
return "Hello, " + this.greeting;
}
}
Y aquí está el JavaScript que produciría
var Greeter = (function () {
function Greeter(message) {
this.greeting = message;
}
Greeter.prototype.greet = function () {
return "Hello, " + this.greeting;
};
return Greeter;
})();
Observe cómo TypeScript define el tipo de variables miembro y los parámetros del método de clase. Esto se elimina cuando se traduce a JavaScript, pero el IDE y el compilador lo utilizan para detectar errores, como pasar un tipo numérico al constructor.
También es capaz de inferir tipos que no se declaran explícitamente, por ejemplo, determinaría que el método greet() devuelve una cadena.
Depuración de mecanografía
Muchos navegadores e IDE ofrecen soporte directo de depuración a través de sourcemaps. Consulte esta pregunta sobre el desbordamiento de pila para obtener más detalles: Depuración de código TypeScript con Visual Studio
¿Quiere saber más?
Originalmente escribí esta respuesta cuando Typescript todavía estaba fuera de lugar. Echa un vistazo a la respuesta de Lodewijk a esta pregunta para obtener más detalles actuales.
" Fundamentos de TypeScript ": un video-curso de Pluralsight por Dan Wahlin y John Papa es realmente bueno, actualmente (25 de marzo de 2016) actualizado para reflejar TypeScript 1.8, introducción a Typescript.
Para mí, las características realmente buenas, junto con las buenas posibilidades para la inteligencia, son las clases , interfaces , módulos , la facilidad de implementación de AMD y la posibilidad de usar el depurador de Visual Studio Typescript cuando se invoca con IE.
Para resumir : si se usa según lo previsto, Typescript puede hacer que la programación de JavaScript sea más confiable y más fácil. Puede aumentar significativamente la productividad del programador de JavaScript en todo el SDLC completo.
Aunque la respuesta aceptada está bien, sentí que realmente no hace justicia con TypeScript en este momento. Ya no son los primeros días. TypeScript está encontrando mucha más adopción ahora con varios marcos populares escritos en TypeScript. Las razones por las que debe elegir TypeScript en lugar de JavaScript son muchas ahora.
Relación a JavaScript
TypeScript es un moderno JavaScript + tipos. Se trata de detectar errores al principio y de convertirlo en un desarrollador más eficiente, al mismo tiempo que aprovecha la comunidad de JavaScript.
JavaScript está estandarizado a través de los estándares ECMAScript. Los navegadores más antiguos no son compatibles con todas las características de los estándares ECMAScript más recientes (consulte esta table ). TypeScript es compatible con los nuevos estándares ECMAScript y los compila en objetivos ECMAScript (más antiguos) de su elección (los objetivos actuales son 3, 5 y 6 [también conocido como 2015]). Esto significa que puede usar las características de ES2015 y posteriores, como módulos, funciones lambda, clases, el operador de propagación y la desestructuración, mientras que es compatible con los navegadores más antiguos.
El soporte de tipo no es parte del estándar ECMAScript y probablemente nunca se deba a la naturaleza interpretada en lugar de la naturaleza compilada de JavaScript. El sistema de tipos de TypeScript es increíblemente rico e incluye: interfaces, enumeraciones, tipos híbridos, genéricos, tipos de unión / intersección, modificadores de acceso y mucho más. El sitio web oficial de TypeScript ofrece una descripción general de estas características. El sistema de tipos de Typescript hoy en día está a la par con otro lenguaje mecanografiado y, en algunos casos, posiblemente más poderoso.
Relación con otros lenguajes de segmentación de JavaScript
TypeScript tiene una filosofía única en comparación con otros idiomas que se compilan en JavaScript. El código JavaScript es un código TypeScript válido; TypeScript es un superconjunto de JavaScript. Casi puede cambiar el nombre de sus archivos .js archivos .ts y comenzar a usar TypeScript (consulte "Interoperabilidad de JavaScript" a continuación). Los archivos de TypeScript se compilan en JavaScript legible, por lo que es posible la migración hacia atrás y comprender que el TypeScript compilado no es difícil en absoluto. TypeScript se basa en los éxitos de JavaScript al tiempo que mejora sus debilidades.
Por un lado, tiene herramientas de prueba futuras que toman los estándares ECMAScript modernos y las compilan en versiones anteriores de JavaScript, siendo Babel la más popular. Por otro lado, tiene idiomas que pueden diferir totalmente de JavaScript que se dirigen a JavaScript, como Coffeescript, Clojure, Dart, Elm, Haxe, ScalaJs y un host completo (vea esta list ). Estos idiomas, aunque podrían ser mejores que los que podría llevar el futuro de JavaScript, corren un mayor riesgo de no encontrar una adopción suficiente para garantizar su futuro. También es posible que tenga más problemas para encontrar desarrolladores experimentados para algunos de estos idiomas, aunque los que encuentre a menudo pueden ser más entusiastas. La interoperabilidad con JavaScript también puede involucrarse un poco más, ya que están más alejados de lo que realmente es JavaScript.
TypeScript se encuentra entre estos dos extremos, equilibrando así el riesgo. TypeScript no es una elección arriesgada por ningún estándar. Se requiere muy poco esfuerzo para acostumbrarse si está familiarizado con JavaScript, ya que no es un lenguaje completamente diferente, tiene un excelente soporte de interoperabilidad de JavaScript y ha sido adoptado recientemente.
Opcionalmente tipado estático e inferencia de tipos
JavaScript se escribe dinámicamente. Esto significa que JavaScript no sabe qué tipo de variable es hasta que se crea una instancia en tiempo de ejecución. Esto también significa que puede ser demasiado tarde. TypeScript agrega soporte de tipo a JavaScript. Los errores causados por suposiciones falsas de una variable de cierto tipo pueden erradicarse por completo si juega bien sus cartas (lo importante es que usted escriba su código o que escriba su código).
TypeScript hace que escribir sea un poco más fácil y mucho menos explícito por el uso de inferencia de tipos. Por ejemplo: var x = "hello" en TypeScript es lo mismo que var x : string = "hello" . El tipo simplemente se infiere de su uso. Incluso si no escribe los tipos explícitamente, todavía están allí para evitar que haga algo que, de lo contrario, daría como resultado un error en tiempo de ejecución.
TypeScript se escribe opcionalmente por defecto. Por ejemplo, la function divideByTwo(x) { return x / 2 } es una función válida en TypeScript que se puede llamar con cualquier tipo de parámetro, aunque llamarlo con una cadena obviamente resultará en un error de tiempo de ejecución . Al igual que estás acostumbrado en JavaScript. Esto funciona, porque cuando no se asignó explícitamente ningún tipo y no se pudo inferir el tipo, como en el ejemplo de divideByTwo, TypeScript asignará implícitamente el tipo a any . Esto significa que la firma del tipo de la function divideByTwo(x : any) : any se convierte automáticamente en la function divideByTwo(x : any) : any . Hay un indicador de compilador para no permitir este comportamiento: --noImplicitAny . Habilitar este indicador le brinda un mayor grado de seguridad, pero también significa que tendrá que escribir más.
Los tipos tienen un costo asociado con ellos. En primer lugar, hay una curva de aprendizaje, y en segundo lugar, por supuesto, le costará un poco más de tiempo configurar una base de código utilizando también la escritura estricta adecuada. En mi experiencia, estos costos valen la pena en cualquier base de código seria que esté compartiendo con otros. Un estudio a gran escala de lenguajes de programación y calidad de código en Github sugiere que "los lenguajes tipificados estáticamente en general son menos propensos a los defectos que los tipos dinámicos, y que la tipificación fuerte es mejor que la tipificación débil en el mismo sentido".
Es interesante notar que este mismo documento encuentra que TypeScript es menos propenso a errores que JavaScript:
Para aquellos con coeficientes positivos podemos esperar que el lenguaje se asocie con, ceteris paribus, un mayor número de soluciones de defectos. Estos lenguajes incluyen C, C ++, JavaScript , Objective-C, Php y Python. Los lenguajes Clojure, Haskell, Ruby, Scala y TypeScript tienen coeficientes negativos, lo que implica que estos lenguajes tienen menos probabilidades que el promedio de dar como resultado confirmaciones de corrección de defectos.
Soporte IDE mejorado
La experiencia de desarrollo con TypeScript es una gran mejora sobre JavaScript. El IDE es informado en tiempo real por el compilador de TypeScript en su información de tipo rico. Esto da un par de grandes ventajas. Por ejemplo, con TypeScript puede hacer refactorizaciones de forma segura, como cambiar el nombre de todo el código base. Al completar el código, puede obtener ayuda en línea sobre cualquier función que pueda ofrecer una biblioteca. Ya no es necesario recordarlos ni buscarlos en las referencias en línea. Los errores de compilación se informan directamente en el IDE con una línea ondulada roja mientras está ocupado codificando. En general, esto permite un aumento significativo de la productividad en comparación con el trabajo con JavaScript. Uno puede pasar más tiempo codificando y menos tiempo depurando.
Existe una amplia gama de IDE que tienen un excelente soporte para TypeScript, como Visual Studio Code, WebStorm, Atom y Sublime.
Controles nulos estrictos
Los errores de tiempo de ejecución del formulario cannot read property ''x'' of undefined o undefined is not a function es muy comúnmente causada por errores en el código JavaScript. Fuera de la caja, TypeScript ya reduce la probabilidad de que ocurran este tipo de errores, ya que no se puede usar una variable que el compilador de TypeScript no conoce (con la excepción de las propiedades de any variable tipada). Sin embargo, todavía es posible utilizar erróneamente una variable que está definida como undefined . Sin embargo, con la versión 2.0 de TypeScript puede eliminar este tipo de errores todos juntos mediante el uso de tipos no anulables. Esto funciona de la siguiente manera:
Con las comprobaciones nulas estrictas habilitadas ( --strictNullChecks compiler flag), el compilador de TypeScript no permitirá que se asigne undefined a una variable a menos que usted declare explícitamente que es de tipo nulable. Por ejemplo, si let x : number = undefined generará un error de compilación. Esto encaja perfectamente con la teoría de tipos, ya que undefined no es un número. Uno puede definir x como un tipo de suma de suma y undefined para corregir esto: let x : number | undefined = undefined let x : number | undefined = undefined .
Una vez que se sabe que un tipo es anulable, lo que significa que es de un tipo que también puede tener el valor null o undefined , el compilador de TypeScript puede determinar mediante un análisis de tipo basado en flujo de control si su código puede usar una variable de forma segura o no. En otras palabras, cuando se comprueba que una variable undefined está undefined través de, por ejemplo, una declaración if , el compilador de TypeScript deducirá que el tipo en esa rama del flujo de control de su código ya no es anulable y, por lo tanto, se puede usar de forma segura. Aquí hay un ejemplo simple:
let x: number | undefined;
if (x !== undefined) x += 1; // this line will compile, because x is checked.
x += 1; // this line will fail compilation, because x might be undefined.
Durante la conferencia de construcción 2016, el co-diseñador de TypeScript, Anders Hejlsberg, dio una explicación detallada y una demostración de esta característica: video (de 44:30 a 56:30).
Compilacion
Para usar TypeScript necesitas un proceso de compilación para compilar en código JavaScript. El proceso de compilación generalmente toma solo un par de segundos, por supuesto, dependiendo del tamaño de su proyecto. El compilador de TypeScript es compatible con la compilación incremental ( --watch compiler flag), de modo que todos los cambios posteriores se pueden compilar a una mayor velocidad.
El compilador de TypeScript puede incluir información de mapas de origen en línea en los archivos .js generados o crear archivos .map por separado. La información del mapa de origen puede ser utilizada por las utilidades de depuración como Chrome DevTools y otros IDE para relacionar las líneas en JavaScript con las que las generaron en TypeScript. Esto le permite establecer puntos de interrupción e inspeccionar variables durante el tiempo de ejecución directamente en su código de TypeScript. La información del mapa de origen funciona bastante bien, existía mucho antes que TypeScript, pero la depuración de TypeScript generalmente no es tan buena como cuando se usa JavaScript directamente. Tome this palabra clave, por ejemplo. Debido a la semántica modificada de this palabra clave alrededor de los cierres desde ES2015, this puede existir durante el tiempo de ejecución como una variable llamada _this (consulte esta respuesta ). Esto puede confundirlo durante la depuración, pero generalmente no es un problema si lo conoce o inspecciona el código JavaScript. Cabe señalar que Babel sufre exactamente el mismo tipo de problema.
Hay algunos otros trucos que puede hacer el compilador de TypeScript, como generar código de intercepción basado en decorators , generar código de carga de módulos para diferentes sistemas de módulos y analizar JSX . Sin embargo, es probable que necesites una herramienta de compilación además del compilador Typescript. Por ejemplo, si desea comprimir su código, tendrá que agregar otras herramientas a su proceso de construcción para hacerlo.
Hay complementos de compilación de TypeScript disponibles para Webpack , Gulp , Grunt y prácticamente cualquier otra herramienta de compilación de JavaScript. La documentación de TypeScript tiene una sección sobre integración con herramientas de compilación que abarca todos ellos. También está disponible una linter en caso de que desee aún más tiempo de compilación. También hay una gran cantidad de proyectos semilla que lo ayudarán a comenzar con TypeScript en combinación con un montón de otras tecnologías como Angular 2, React, Ember, SystemJs, WebPack, Gulp, etc.
Interoperabilidad de JavaScript
Dado que TypeScript está tan estrechamente relacionado con JavaScript, tiene grandes capacidades de interoperabilidad, pero se requiere algo de trabajo adicional para trabajar con las bibliotecas de JavaScript en TypeScript. Las definiciones de TypeScript son necesarias para que el compilador de TypeScript entienda que las llamadas a funciones como _.groupBy o angular.copy o $.fadeOut no son declaraciones ilegales. Las definiciones de estas funciones se colocan en archivos .d.ts .
La forma más simple que puede tomar una definición es permitir que un identificador se use de cualquier manera. Por ejemplo, cuando usa Lodash , un archivo de definición de una sola línea declare var _ : any le permitirá llamar a cualquier función que desee en _ , pero, por supuesto, también puede cometer errores: _.foobar() sería un Llamada legal de TypeScript, pero por supuesto es una llamada ilegal en tiempo de ejecución. Si desea un soporte de tipo adecuado y la finalización del código, su archivo de definición debe ser más exacto (consulte las definiciones de lodash para ver un ejemplo).
Los módulos Npm que vienen preempaquetados con sus propias definiciones de tipo se entienden automáticamente por el compilador de TypeScript (consulte la documentation ). Para casi cualquier otra biblioteca de JavaScript semi-popular que no incluya sus propias definiciones, alguien ya ha puesto a disposición definiciones de tipos a través de otro módulo npm. Estos módulos tienen el prefijo "@ tipos /" y provienen de un repositorio de Github llamado DefinitelyTyped .
Hay una advertencia: las definiciones de tipo deben coincidir con la versión de la biblioteca que está utilizando en tiempo de ejecución. Si no lo hacen, TypeScript podría impedirle llamar a una función o eliminar la referencia a una variable que existe o permitirle llamar a una función o desreferencia una variable que no existe, simplemente porque los tipos no coinciden con el tiempo de ejecución en tiempo de compilación . Así que asegúrese de cargar la versión correcta de las definiciones de tipo para la versión correcta de la biblioteca que está utilizando.
Para ser honesto, hay una pequeña molestia en esto y puede ser una de las razones por las que no elige TypeScript, sino que opta por algo como Babel, que no sufre la necesidad de obtener definiciones de tipo. Por otro lado, si sabe lo que está haciendo, puede superar fácilmente cualquier tipo de problemas causados por archivos de definición incorrectos o faltantes.
Convertir de JavaScript a TypeScript
Cualquier archivo .js puede cambiarse de nombre a .ts y ejecutarse a través del compilador de TypeScript para obtener sintácticamente el mismo código de JavaScript que un resultado (si fue sintácticamente correcto en primer lugar). Incluso cuando el compilador de TypeScript obtiene errores de compilación, producirá un archivo .js . Incluso puede aceptar archivos .js como entrada con el --allowJs . Esto le permite comenzar con TypeScript de inmediato. Desafortunadamente, es probable que se produzcan errores de compilación al principio. Uno debe recordar que estos no son errores de detención de programas como usted puede estar acostumbrado con otros compiladores.
Los errores de compilación que se obtienen al principio al convertir un proyecto de JavaScript en un proyecto de TypeScript son inevitables por la naturaleza de TypeScript. TypeScript verifica la validez de todos los códigos y, por lo tanto, necesita conocer todas las funciones y variables que se utilizan. Por lo tanto, es necesario que existan definiciones de tipo para todas ellas, de lo contrario, es probable que se produzcan errores de compilación. Como se mencionó en el capítulo anterior, para casi cualquier marco de JavaScript hay archivos .d.ts que se pueden adquirir fácilmente con la instalación de DefinitelyTyped . Sin embargo, es posible que haya utilizado alguna biblioteca oscura para la que no haya definiciones de TypeScript disponibles o que haya rellenado algunas primitivas de JavaScript. En ese caso, debe proporcionar definiciones de tipo para estos bits para que desaparezcan los errores de compilación. Simplemente cree un archivo .d.ts e .d.ts en la matriz de files de tsconfig.json, para que siempre sea considerado por el compilador de TypeScript. En él declare aquellos bits que TypeScript no conoce como tipo any . Una vez que haya eliminado todos los errores, puede introducir gradualmente la escritura en esas partes de acuerdo con sus necesidades.
También se necesitará algo de trabajo para (re) configurar su canalización de compilación para obtener TypeScript en el canal de compilación. Como se mencionó en el capítulo sobre la compilación, hay muchos recursos buenos por ahí y lo invito a buscar proyectos semilla que utilicen la combinación de herramientas con las que desea trabajar.
El mayor obstáculo es la curva de aprendizaje. Te animo a jugar un pequeño proyecto al principio. Vea cómo funciona, cómo se construye, qué archivos utiliza, cómo está configurado, cómo funciona en su IDE, cómo está estructurado, qué herramientas utiliza, etc. Es posible convertir un gran código de código JavaScript a TypeScript. qué estás haciendo. Lea este blog, por ejemplo, sobre la conversión de 600k líneas a mecanografiado en 72 horas ). Solo asegúrate de tener un buen conocimiento del idioma antes de dar el salto.
Adopción
TypeScript es de código abierto (licencia Apache 2, consulte github ) y está respaldado por Microsoft. Anders Hejlsberg , el arquitecto principal de C # está encabezando el proyecto. Es un proyecto muy activo; El equipo de TypeScript ha estado lanzando muchas características nuevas en los últimos años y aún se planean muchas de las mejores (ver la roadmap ).
En la encuesta del desarrollador de de 2017, TypeScript fue el transpiler de JavaScript más popular (9º lugar en general) y ganó el tercer lugar en la categoría de lenguaje de programación más querido.
Ecma script 5 (ES5) que todos los navegadores son compatibles y precompilados. ES6 / ES2015 y ES / 2016 llegaron este año con muchos cambios, por lo que para que aparezcan estos cambios, hay algo intermedio que debería preocuparse por TypeScript.
• TypeScript es Types -> Significa que tenemos que definir el tipo de datos de cada propiedad y método. Si sabes C # entonces Typescript es fácil de entender.
• La gran ventaja de TypeScript es que identificamos los problemas relacionados con el Tipo antes de comenzar la producción. Esto permite que las pruebas unitarias fallen si hay algún tipo de falta de coincidencia.
TypeScript hace algo similar a lo que hace less o sass para CSS. Son súper conjuntos de él, lo que significa que cada código JS que escribes es un código TypeScript válido. Además, puedes usar las otras golosinas que agrega al idioma, y el código transpilado será js válido. Incluso puede configurar la versión de JS en la que desea que aparezca el código resultante.
Actualmente, TypeScript es un super conjunto de ES2015, por lo que podría ser una buena opción para comenzar a aprender las nuevas características de js y pasar al estándar necesario para su proyecto.