Pregunta ¿Qué es TypeScript y por qué debería usarlo en lugar de JavaScript? [cerrado]


¿Puedes describir qué es el lenguaje TypeScript?

¿Qué puede hacer que JavaScript o las bibliotecas disponibles no puedan hacer, eso me daría razones para considerarlo?


1269
2017-10-02 16:37


origen


Respuestas:


Originalmente escribí esta respuesta cuando Typescript aún estaba   caliente fuera de las prensas. Cinco años después, esta es una descripción general correcta, pero mira   a La respuesta de Lodewijk a continuación para más profundidad

Vista de 1000 pies ...

Mecanografiado es un superconjunto de JavaScript que proporciona principalmente tipado estático opcional, clases e interfaces. Uno de los grandes beneficios es permitir que los IDE brinden un entorno más rico para detectar errores comunes mientras escribes el código.

Para tener una idea de lo que quiero decir, mira Video introductorio de Microsoft en el lenguaje

Para un proyecto de gran tamaño de JavaScript, la adopción de TypeScript podría dar como resultado un software más robusto, al mismo tiempo que se puede implementar donde se ejecutaría una aplicación de JavaScript normal.

Es de código abierto, pero solo obtiene el inteligente Intellisense mientras escribe si usa un IDE soportado. Inicialmente, esto era solo Visual Studio de Microsoft (también se menciona en la publicación de blog de Miguel de Icaza) Estos días, otros IDE también ofrecen soporte de TypeScript.

¿Hay otras tecnologías como esta?

Hay CoffeeScript, pero eso realmente tiene un propósito diferente. En mi humilde opinión, CoffeeScript proporciona legibilidad para los humanos, pero TypeScript también proporciona legibilidad profunda para herramientas a través de su tipado estático opcional (ver esto publicación reciente en el blog para un poco más de crítica). También hay Dardo pero eso es un reemplazo completo de JavaScript (aunque puede producir código JavaScript)

Ejemplo

Como ejemplo, aquí hay algo de TypeScript (puede jugar con esto en el Zona 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 de miembro y los parámetros de método de clase. Esto se elimina al traducir 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 están explícitamente declarados, por ejemplo, determinaría la greet() método devuelve una cadena.

Depuración, mecanografiado

Muchos navegadores e IDE ofrecen soporte de depuración directa a través de los mapas de origen. Consulte esta pregunta sobre desbordamiento de pila para obtener más detalles: Depuración de código de TypeScript con Visual Studio

¿Quiere saber más?

Originalmente escribí esta respuesta cuando Typescript todavía estaba caliente-fuera de las prensas. Revisa La respuesta de Lodewijk a esta pregunta para algunos detalles más actuales.


1022
2017-10-02 16:41



Aunque la respuesta aceptada es buena, sentí que realmente no hace justicia con TypeScript en este momento. Ya no son los primeros días. TypeScript está encontrando una adopción mucho más ahora con varios frameworks populares escritos en TypeScript. Las razones por las que debe elegir TypeScript en lugar de JavaScript son muchas ahora.

Relación con JavaScript

JavaScript está estandarizado a través de los estándares ECMAScript. No todos los navegadores en uso son compatibles con todas las características de los estándares ECMAScript más nuevos (vea esto mesa) TypeScript admite los nuevos estándares de ECMAScript y los compila para los objetivos de ECMAScript (más antiguos) de su elección (los objetivos actuales son 3, 5 y 6 [a.k.a. 2015]). Esto significa que puede usar funciones de ES2015 y más allá, como módulos, funciones lambda, clases, el operador de dispersión, desestructuración, hoy. También agrega soporte de tipo por supuesto, que no forma parte de ningún estándar ECMAScript y es posible que nunca se deba a la naturaleza interpretada en lugar de la naturaleza compilada de JavaScript. El sistema de tipos de TypeScript es relativamente rico e incluye: interfaces, enumeraciones, tipos híbridos, genéricos, tipos de unión e intersección, modificadores de acceso y mucho más. los página web oficial de TypeScript ofrece una descripción general de estas características.

Relación con otros lenguajes de orientación de JavaScript

TypeScript tiene una filosofía única en comparación con otros lenguajes que compilan a JavaScript. El código de JavaScript es un código de TypeScript válido; TypeScript es un superconjunto de JavaScript. Puedes cambiar el nombre de tu .js archivos a .ts archivos y comience a usar TypeScript (consulte "Interoperabilidad de JavaScript" a continuación). Los archivos de TypeScript se compilan en JavaScript legible, de modo que la migración hacia atrás es posible y comprender el TypeScript compilado no es nada difícil. TypeScript se basa en los éxitos de JavaScript al tiempo que mejora sus debilidades.

Por un lado, tiene herramientas a prueba de futuro que toman los estándares ECMAScript modernos y compila a versiones anteriores de JavaScript con Babel siendo el más popular. Por otro lado, tiene idiomas que pueden diferir totalmente de JavaScript, que apuntan a JavaScript, como Coffeescript, Clojure, Dart, Elm, Haxe, ScalaJs, y un host completo más (vea esto lista) Estos lenguajes, aunque podrían ser mejores que el futuro de JavaScript, corren un mayor riesgo de no encontrar suficiente adopción para garantizar su futuro. También podría tener más problemas para encontrar desarrolladores experimentados para algunos de estos idiomas, aunque los que encontrará a menudo pueden ser más entusiastas. La interoperabilidad con JavaScript también puede ser un poco más complicada, ya que están más alejados de lo que es JavaScript en realidad.

TypeScript se encuentra entre estos dos extremos, equilibrando así el riesgo. TypeScript no es una elección arriesgada de ningún estándar. Se requiere muy poco esfuerzo para acostumbrarse si está familiarizado con JavaScript, ya que no es un idioma completamente diferente, tiene un excelente soporte de interoperabilidad con JavaScript y recientemente se ha adoptado mucho.

Tipeo opcionalmente estático e inferencia tipo

JavaScript está tipeado dinámicamente. Esto significa que JavaScript no sabe de qué tipo es una variable hasta que realmente 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 que son causados ​​por suposiciones falsas de que cierta variable es de cierto tipo pueden ser completamente erradicados si juega bien sus cartas (qué tan estricto escribe su código o si escribe su código depende de usted).

TypeScript hace que escribir sea un poco más fácil y mucho menos explícito mediante el uso de la inferencia de tipo. 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 explícitamente los tipos, todavía están allí para evitar que haga algo que de lo contrario resultaría en un error de tiempo de ejecución.

TypeScript está opcionalmente escrito de forma predeterminada. Por ejemplo function divideByTwo(x) { return x / 2 } es una función válida en TypeScript con la que se puede invocar alguna tipo de parámetro, aunque llamarlo con una cadena obviamente dará como resultado un tiempo de ejecución error. Al igual que usted está 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 any. Esto significa que la firma de tipo de la función divideByTwo se convierte automáticamente en function divideByTwo(x : any) : any. Hay un indicador del compilador para rechazar este comportamiento: --noImplicitAny. Habilitar esta bandera le brinda un mayor grado de seguridad, pero también significa que tendrá que escribir más.

Los tipos tienen un costo asociado a ellos. En primer lugar, hay una curva de aprendizaje, y, en segundo lugar, por supuesto, te costará un poco más de tiempo configurar una base de código usando la tipificación estricta adecuada. Según mi experiencia, estos costos valen la pena en cualquier base de códigos importante que comparta con otros. Un estudio a gran escala de lenguajes de programación y calidad de código en Github sugiere que "que los lenguajes tipados 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 mecanografía débil en el mismo sentido".

Es interesante observar 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 asocia con, ceteris paribus, un mayor número de soluciones a defectos.   Estos lenguajes incluyen C, C ++, JavaScript, Objective-C, Php, y   Pitón. Los idiomas Clojure, Haskell, Ruby, Scala y Mecanografiado,   todos tienen coeficientes negativos que implican que estos idiomas son menos   es probable que el promedio genere compromisos de corrección de defectos.

Soporte IDE mejorado

La experiencia de desarrollo con TypeScript es una gran mejora con respecto a JavaScript. IDE es informado en tiempo real por el compilador de TypeScript en su rica información de tipo. Esto le da un par de ventajas principales. Por ejemplo, con TypeScript puedes hacer refactorizaciones de manera segura, como cambiar el nombre de toda la base de código. A través de la finalización del código puede obtener ayuda en línea sobre cualquier función que pueda ofrecer una biblioteca. No más necesidad de recordarlos o buscarlos en 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 conjunto, 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 de depuración.

Existe una amplia gama de IDE que tienen un excelente soporte para TypeScript, como el código Visual Studio y VS, Atom, Sublime e IntelliJ / WebStorm.

Estrictos controles nulos

Errores de tiempo de ejecución de la forma cannot read property 'x' of undefined o undefined is not a function son muy comúnmente causados ​​por errores en el código JavaScript. Una vez instalado, TypeScript ya reduce la probabilidad de que se produzcan estos tipos 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 variables tipadas). Sin embargo, aún es posible utilizar por error una variable que está configurada para undefined. Sin embargo, con la versión 2.0 de TypeScript puede eliminar este tipo de errores mediante el uso de tipos que no admiten nulos. Esto funciona de la siguiente manera:

Con controles nulos estrictos habilitados (--strictNullChecks indicador del compilador) el compilador de TypeScript no permitirá undefined para ser asignado a una variable a menos que explícitamente declare que es de tipo anulable. Por ejemplo, let x : number = undefined dará como resultado un error de compilación. Esto encaja perfectamente con la teoría de tipos, ya que undefined no es un numero Uno puede definir x ser un tipo de suma de number y undefined para corregir esto: let x : number | undefined = undefined.

Una vez que se sabe que un tipo es nulo, lo que significa que es de un tipo que también puede ser de valor null o undefined, el compilador de TypeScript puede determinar a través del análisis de tipo basado en flujo de control si su código puede usar o no una variable de manera segura. En otras palabras, cuando verifica una variable es undefined a través de, por ejemplo, un if La declaración del compilador de TypeScript deducirá que el tipo en esa rama del flujo de control de su código ya no puede contener nulos y, por lo tanto, puede usarse 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 compilación 2016, el co-diseñador de TypeScript Anders Hejlsberg dio una explicación detallada y una demostración de esta característica: vídeo (de 44:30 a 56:30).

Compilacion

Para usar TypeScript necesita un proceso de compilación para compilar a código JavaScript. El proceso de compilación generalmente toma solo un par de segundos dependiendo del curso del tamaño de su proyecto. El compilador de TypeScript admite la compilación incremental (--watch indicador del compilador), para que todos los cambios posteriores puedan compilarse a mayor velocidad.

El compilador de TypeScript puede alinear la información del mapa de origen en los archivos .js generados o crear archivos .map separados. La información del mapa de origen se puede utilizar depurando utilidades 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 TypeScript. La información del mapa fuente funciona bastante bien, fue mucho antes que TypeScript, pero la depuración de TypeScript generalmente no es tan buena como cuando se usa JavaScript directamente. Toma el this palabra clave por ejemplo. Debido a la semántica cambiada de la this palabra clave alrededor de cierres desde ES2015, this en realidad puede existir durante el tiempo de ejecución como una variable llamada _this(ver 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 el compilador de TypeScript puede hacer, como generar código de interceptación basado en decoradores, generando el código de carga del módulo para diferentes sistemas de módulos y el análisis JSX. Sin embargo, es probable que requiera una herramienta de compilación además del compilador de Typescript. Por ejemplo, si desea comprimir su código, deberá agregar otras herramientas a su proceso de compilación para hacerlo.

Hay complementos de compilación de TypeScript disponibles para Webpack, Trago, Gruñido y prácticamente cualquier otra herramienta de compilación de JavaScript disponible. La documentación de TypeScript tiene una sección de integrando con herramientas de compilación cubriéndolos a todos. UN linter también está disponible en caso de que desee obtener más control de tiempo de compilación. También hay una gran cantidad de proyectos iniciales que le permitirán comenzar con TypeScript en combinación con 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 excelentes capacidades de interoperabilidad, pero se requiere algo de trabajo adicional para trabajar con las bibliotecas de JavaScript en TypeScript. Definiciones de TypeScript son necesarios para que el compilador de TypeScript entienda que la función llama como _.groupBy o angular.copy o $.fadeOut De hecho, no son declaraciones ilegales. Las definiciones de estas funciones se colocan en .d.ts archivos.

La forma más simple que una definición puede tomar es permitir que un identificador sea utilizado de cualquier manera. Por ejemplo, cuando se usa Lodash, un archivo de definición de línea única declare var _ : any le permitirá llamar a cualquier función que desee en _, pero luego, por supuesto, también eres capaz de cometer errores: _.foobar() sería una llamada legal de TypeScript, pero por supuesto es una llamada ilegal en tiempo de ejecución. Si desea una compatibilidad de tipo adecuada y la finalización del código, su archivo de definición debe ser más exacto (ver lodash definiciones para un ejemplo).

Módulos de Npm que vienen pre-empaquetados con sus propias definiciones de tipo son entendidas automáticamente por el compilador de TypeScript (ver documentación) Para casi cualquier otra biblioteca semi-popular de JavaScript que no incluye sus propias definiciones, alguien por ahí ya ha hecho que las definiciones de tipo estén disponibles a través de otro módulo npm. Estos módulos tienen el prefijo "@ types /" y provienen de un repositorio de Github llamado DefinitivamenteTyped.

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 prohibirle llamar a una función o eliminar la referencia de una variable existente o permitirle llamar a una función o eliminar la referencia de 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 sincero, hay una ligera molestia en esto y puede ser una de las razones por las que no eliges TypeScript, sino que buscas algo como Babel que no tenga que obtener definiciones de tipos. Por otro lado, si sabe lo que está haciendo, puede superar fácilmente cualquier tipo de problema causado por archivos de definición incorrectos o faltantes.

Conversión de JavaScript a TypeScript

Alguna .js archivo puede ser renombrado a .ts y ejecuté el compilador de TypeScript para obtener sintácticamente el mismo código JavaScript que una salida (si fue sintácticamente correcto en primer lugar). Incluso cuando el compilador TypeScript obtiene errores de compilación, generará un .js archivo. Incluso puede aceptar .js archivos como entrada con el --allowJs bandera. Esto le permite comenzar con TypeScript de inmediato. Lamentablemente, es probable que se produzcan errores de compilación al principio. Es necesario recordar que estos no son errores de demostración que pueden estar acostumbrados a otros compiladores.

Los errores de compilación que se obtienen al principio al convertir un proyecto de JavaScript a un proyecto de TypeScript son inevitables por la naturaleza de TypeScript. Verificaciones de TypeScript todas código de validez y, por lo tanto, necesita conocer todas las funciones y variables que se utilizan. Por lo tanto, las definiciones de tipo deben estar en su lugar para todos ellos, de lo contrario, los errores de compilación están destinados a ocurrir. Como se mencionó en el capítulo anterior, para prácticamente cualquier marco de JavaScript hay .d.ts archivos que pueden adquirirse fácilmente con la instalación de Definitivamente, paquetes de Tipados. Sin embargo, es posible que haya utilizado alguna biblioteca oscura para la que no hay definiciones de TypeScript disponibles o que haya saturado algunas primitivas de JavaScript. En ese caso, debe proporcionar definiciones de tipo para estos bits para que desaparezcan los errores de compilación. Solo crea un .d.ts archivar e incluirlo en tsconfig.json's files array, de modo que siempre lo tenga en cuenta el compilador de TypeScript. En él declaran 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 que TypeScript entre en la línea de compilación. Como mencioné en el capítulo sobre compilación, existen muchos recursos buenos y los animo a buscar proyectos iniciales que utilicen la combinación de herramientas con las que desea trabajar.

El mayor obstáculo es la curva de aprendizaje. Te aliento a jugar con un pequeño proyecto al principio. Observe cómo funciona, cómo se genera, qué archivos usa, cómo se configura, cómo funciona en su IDE, cómo está estructurado, qué herramientas usa, etc. Convertir una gran base de código JavaScript a TypeScript es muy factible cuando sabe lo que está haciendo, pero puede ser frustrante cuando no lo haga.

Adopción

TypeScript es de código abierto (Apache 2 con licencia, consulte github) y respaldado por Microsoft. Anders Hejlsberg, el arquitecto principal de C # es la punta de lanza del proyecto. Es un proyecto muy activo; el equipo de TypeScript ha estado lanzando muchas características nuevas en los últimos años y todavía hay muchas más planeadas por venir (ver el mapa vial)

En el Encuesta de desarrolladores de 2017 StackOverflow TypeScript fue el transpondedor de JavaScript más popular (noveno lugar en general) y ganó el tercer lugar en la categoría de lenguaje de programación más apreciada.


725
2018-01-27 21:23



TypeScript hace algo similar a lo que less o sass hace por CSS. Son súper conjuntos de él, lo que significa que cada código JS que escriba es válido para el código TypeScript. Además, puede usar las otras ventajas que agrega al idioma, y ​​el código transpilado será válido js. Incluso puede establecer la versión de JS en la que desea que aparezca el código resultante.

Actualmente, TypeScript es un súper conjunto de ES2015, por lo que podría ser una buena opción comenzar a aprender las nuevas características de js y transpilar al estándar necesario para su proyecto.


54
2018-02-11 20:32



"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, además de las buenas posibilidades para intellisense, son las clases, interfaces, módulos, la facilidad de implementar 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 la productividad del programador de JavaScript de manera significativa en todo el SDLC.


30
2017-12-27 04:18



Ecma script 5 (ES5) que admite y precompila todo el navegador. ES6 / ES2015 y ES / 2016 llegaron este año con muchos cambios, por lo que para hacer aparecer estos cambios hay algo en medio de lo cual deberíamos tener cuidado con TypeScript. • TypeScript es Types -> Significa que debemos definir el tipo de datos de cada propiedad y método. Si conoce C #, entonces Typescript es fácil de entender. • La gran ventaja de TypeScript es que identificamos problemas relacionados con el tipo de letra antes de pasar a producción. Esto permite que las pruebas unitarias fallen si hay algún tipo de desajuste.


7
2018-06-06 12:14