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

StackOverflow https://stackoverflow.com//questions/12694530

  •  12-12-2019
  •  | 
  •  

Pregunta

¿Puedes describir qué es el lenguaje TypeScript?

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

¿Fue útil?

Solución

Originalmente escribí esta respuesta cuando Typycript todavía estaba Hot-off-the-press. Cinco años después, esta es una visión general bien, pero mira en la respuesta de Lodowijk a continuación para más profundidad

1000ft View ...

Typescript es un superset de Javascript que proporciona principalmente una escritura estática opcional, clases e interfaces. 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, mira video introductorio de Microsoft en el idioma.

Para un gran proyecto JavaScript, la adopción de TypeScript puede resultar en un software más robusto, mientras se está implementando cuando se ejecutará una aplicación regular de JavaScript.

Es de origen abierto, pero solo obtiene el inteligente inteligente mientras escribe si usa un IDE compatible. Inicialmente, este fue solo el estudio visual de Microsoft (también se señaló en la publicación del blog desde Miguel de Icaza ). En estos días, Oferta Oferta Oferta Tipscript Soporte también .

¿Hay otras tecnologías como IT?

Hay Coffeescript , pero eso realmente sirve a un propósito diferente. En mi humilde opinión, CoffeeScript ofrece la legibilidad para los humanos, pero transcripción también ofrece facilidad de lectura profunda para herramientas a través de su tipificación estática opcional (ver esta Post de blog reciente por un poco más de crítica). También hay dardo pero eso es un reemplazo completo para Javascript (aunque es puede producir código de javascript ) < / p>

Ejemplo

Como ejemplo, aquí está algunos TypeScript (puede jugar con esto en la Typescript Playground ) 

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 el TyPScript define el tipo de variables de miembros y los parámetros del método de clase. Esto se elimina cuando se traduce a JavaScript, pero utilizado por el IDE y el compilador 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 GeneracDicEtCode devuelve una cadena.

Depuración de tiposcript

Muchos navegadores e IDES ofrecen soporte de depuración directa a través de SOURCEMAPS. Consulte esta pregunta sobre el desbordamiento de la pila para obtener más detalles: Depuración del código de depuración con Visual Studio < / p>

¿Quieres saber más?

Originalmente escribí esta respuesta cuando Typescript todavía estaba caliente, las pulsaciones. Echa un vistazo a RESPUESTA DE LODEWIJK A esta pregunta para un detalle más actual.

Otros consejos

La relación de TypeScript con JavaScript

TypeScript es un superconjunto escrito de JavaScript que se compila en JavaScript simple - typescriptlang.org.

JavaScript es un lenguaje de programación desarrollado por Comité Técnico de EMCA 39, que es un grupo de personas compuesto por muchas partes interesadas diferentes.TC39 es un comité organizado por ECMA:una organización de estándares internos.JavaScript tiene muchas implementaciones diferentes por parte de muchos proveedores diferentes (p. ej.Google, Microsoft, Oracle, etc.).El objetivo de JavaScript es ser la lengua franca de la web.

TypeScript es un superconjunto del lenguaje JavaScript que tiene un único compilador de código abierto y está desarrollado principalmente por un único proveedor:Microsoft.El objetivo de TypeScript es ayudar a detectar errores tempranamente a través de un sistema de tipos y hacer que el desarrollo de JavaScript sea más eficiente.

Básicamente, TypeScript logra sus objetivos de tres maneras:

  1. Soporte para funciones modernas de JavaScript - El lenguaje JavaScript (no el tiempo de ejecución) está estandarizado a través del ECMAScript estándares.No todos los navegadores y tiempos de ejecución de JavaScript admiten todas las funciones de todos los estándares ECMAScript (consulte este descripción general).TypeScript permite el uso de muchas de las funciones ECMAScript más recientes y las traduce a destinos ECMAScript más antiguos de su elección (consulte la lista de compilar objetivos bajo la --target opción del compilador).Esto significa que puede utilizar nuevas funciones de forma segura, como módulos, funciones lambda, clases, el operador de extensión y desestructuración, sin dejar de ser compatible con navegadores y tiempos de ejecución de JavaScript más antiguos.

  2. Sistema de tipo avanzado - La compatibilidad con tipos no forma parte del estándar ECMAScript y probablemente nunca se deberá a la naturaleza interpretada en lugar de 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 página web oficial de TypeScript ofrece una descripción general de estas características.El sistema de tipos de Typecript está a la par de la mayoría de los otros lenguajes mecanografiados y, en algunos casos, podría decirse que es más potente.

  3. Soporte de herramientas para desarrolladores - El compilador de TypeScript puede ejecutarse como un proceso en segundo plano para admitir tanto la compilación incremental como la integración IDE, de modo que pueda navegar, identificar problemas, inspeccionar posibilidades y refactorizar su código base más fácilmente.

Relación de TypeScript con otros lenguajes de destino de JavaScript

TypeScript tiene una filosofía única en comparación con otros lenguajes que compilan en JavaScript.El código JavaScript es código TypeScript válido;TypeScript es un superconjunto de JavaScript.Casi 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 TypeScript se compilan en JavaScript legible, por lo 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 y mejora sus debilidades.

Por un lado, tiene herramientas preparadas para el futuro que toman los estándares ECMAScript modernos y los compilan en versiones anteriores de JavaScript, siendo Babel la más popular.Por otro lado, existen lenguajes que pueden diferir totalmente de JavaScript y que apuntan a JavaScript, como CoffeeScript, Clojure, Dart, Elm, Haxe, Scala.js y muchos más (consulte este artículo). lista).Estos lenguajes, aunque podrían ser mejores de lo que podría conducir el futuro de JavaScript, corren un mayor riesgo de no encontrar suficiente adopción para garantizar su futuro.También puede tener más problemas para encontrar desarrolladores experimentados para algunos de estos lenguajes, aunque los que encuentre 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 alejadas de lo que realmente es JavaScript.

TypeScript se encuentra entre estos dos extremos, equilibrando así el riesgo.TypeScript no es una elección arriesgada bajo ningún concepto.Se necesita 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 se ha adoptado mucho recientemente.

Opcionalmente escritura estática e inferencia de tipos.

JavaScript se escribe dinámicamente.Esto significa que JavaScript no sabe qué tipo es una variable hasta que se crea una instancia de ella en tiempo de ejecución.Esto también significa que puede que sea demasiado tarde.TypeScript agrega soporte de tipos a JavaScript.Los errores causados ​​por suposiciones falsas de que alguna variable es de cierto tipo se pueden erradicar por completo si juegas bien tus cartas (qué tan estricto escribes tu código o si escribes tu código depende de ti).

TypeScript hace que escribir sea un poco más fácil y mucho menos explícito mediante el uso de inferencia de tipos.Por ejemplo: var x = "hello" en TypeScript es lo mismo que var x : string = "hello".El tipo se infiere simplemente de su uso.Incluso si no escribe explícitamente los tipos, todavía están ahí para evitar que haga algo que, de otro modo, resultaría en un error de tiempo de ejecución.

TypeScript se escribe opcionalmente de forma predeterminada.Por ejemplo 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 dará como resultado un tiempo de ejecución error.Tal como estás acostumbrado en JavaScript.Esto funciona porque cuando no se asignó ningún tipo explícitamente 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 function divideByTwo(x : any) : any.Hay un indicador del compilador para no permitir 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.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 una escritura estricta adecuada.En mi experiencia, estos costos valen la pena en cualquier código base serio que compartas con otros. Un estudio a gran escala de lenguajes de programación y calidad del código en Github sugiere que "Los lenguajes de tipado estático, en general, son menos propensos a defectos que los de tipo dinámico, y el tipeo fuerte es mejor que el tipado débil en el mismo sentido".

Es interesante notar que este mismo artículo encuentra que TypeScript es menos propenso a errores que JavaScript:

Para aquellos con coeficientes positivos, podemos esperar que el lenguaje esté asociado con Ceteris Paribus, un mayor número de correcciones de defectos.Estos lenguajes incluyen C, C++, javascript, Objective-C, PHP y Python.Los lenguajes Clojure, Haskell, Ruby, Scala y MecanografiadoTodos tienen coeficientes negativos que implican que estos idiomas son menos propensos que el promedio de dar como resultado que la fijación de defectos se confirme.

Soporte IDE mejorado

La experiencia de desarrollo con TypeScript es una gran mejora con respecto a JavaScript.El compilador TypeScript informa al IDE en tiempo real sobre su rica información de tipos.Esto ofrece un par de ventajas importantes.Por ejemplo, con TypeScript, puede realizar refactorizaciones, como cambios de nombre, de forma segura en todo su 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 referencias en línea.Los errores de compilación se informan directamente en el IDE con una línea ondulada roja mientras estás ocupado codificando.En definitiva, esto permite una ganancia significativa de productividad en comparación con trabajar con JavaScript.Se puede dedicar más tiempo a codificar y menos a depurar.

Existe una amplia gama de IDE que tienen excelente soporte para TypeScript, como Visual Studio Code, WebStorm, Atom y Sublime.

Controles estrictos de nulos

Errores de tiempo de ejecución del formulario. cannot read property 'x' of undefined o undefined is not a function son muy comúnmente causados ​​por errores en el código JavaScript.TypeScript listo para usar ya reduce la probabilidad de que ocurran este tipo de errores, ya que no se puede usar una variable que no sea conocida por el compilador de TypeScript (con la excepción de las propiedades de any variables escritas).Sin embargo, aún es posible utilizar por error una variable configurada en undefined.Sin embargo, con la versión 2.0 de TypeScript puede eliminar este tipo de errores por completo mediante el uso de tipos que no aceptan valores NULL.Esto funciona de la siguiente manera:

Con controles nulos estrictos habilitados (--strictNullChecks indicador del compilador) el compilador TypeScript no permitirá undefined para ser asignado a una variable a menos que la declare explícitamente como de tipo anulable.Por ejemplo, let x : number = undefined resultará en 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 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 admite valores NULL, 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 el flujo de control si su código puede usar una variable de forma segura o no.En otras palabras, cuando verificas una variable es undefined a través de por ejemplo un if declaración, el compilador de TypeScript inferirá que el tipo en esa rama del flujo de control de su código ya no admite valores NULL y, por lo tanto, se puede utilizar 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 construcción, el codiseñador de TypeScript de la conferencia de 2016, 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, necesita un proceso de compilación para compilar en código JavaScript.El proceso de construcción generalmente toma sólo un par de segundos dependiendo, por supuesto, 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 se puedan compilar a mayor velocidad.

El compilador de TypeScript puede incorporar información del mapa de origen en los archivos .js generados o crear archivos .map separados.La información del mapa fuente puede ser utilizada por 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 TypeScript.La información del mapa fuente funciona bastante bien, existía mucho antes de 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 al cambio de semántica del this palabra clave sobre cierres desde ES2015, this puede existir realmente 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 puede hacer el compilador de TypeScript, como generar código de interceptación basado en decoradores, generando código de carga de módulos para diferentes sistemas de módulos y análisis JSX.Sin embargo, es probable que necesite una herramienta de compilación además del compilador Typecript.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 paquete web, Trago, Gruñido y prácticamente cualquier otra herramienta de creación de JavaScript que exista.La documentación de TypeScript tiene una sección sobre integración con herramientas de construcción cubriéndolos a todos.A pelusa También está disponible en caso de que desee verificar aún más el tiempo de construcción.También existe una gran cantidad de proyectos iniciales que lo ayudarán a comenzar con TypeScript en combinación con muchas 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 bibliotecas de JavaScript en TypeScript. Definiciones de TypeScript son necesarios para que el compilador de TypeScript comprenda que las llamadas a funciones como _.groupBy o angular.copy o $.fadeOut en realidad no son declaraciones ilegales.Las definiciones de estas funciones se encuentran en .d.ts archivos.

La forma más sencilla que puede adoptar una definición es permitir que un identificador se utilice de cualquier forma.Por ejemplo, cuando se utiliza Lodash, un archivo de definición de una sola línea declare var _ : any le permitirá llamar a cualquier función que desee _, pero claro, también puedes cometer errores: _.foobar() sería una llamada TypeScript legal, pero, por supuesto, es una llamada ilegal en tiempo de ejecución.Si desea compatibilidad con tipos adecuados y finalización de código, su archivo de definición debe ser más exacto (consulte definiciones de lodash para un ejemplo).

módulos npm que vienen preempaquetados con sus propias definiciones de tipo son entendidos automáticamente por el compilador de TypeScript (consulte documentación).Para prácticamente cualquier otra biblioteca de JavaScript semipopular 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 "@types/" y provienen de un repositorio de Github llamado Definitivamente escrito.

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 no permitirle llamar a una función o desreferenciar una variable que existe o permitirle llamar a una función o desreferenciar 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 por tener que obtener definiciones de tipo en absoluto.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

Cualquier .js El archivo se puede renombrar a .ts archivo y ejecutó el compilador TypeScript para obtener sintácticamente el mismo código JavaScript como salida (si era sintácticamente correcto en primer lugar).Incluso cuando el compilador TypeScript recibe errores de compilación, seguirá produciendo un .js archivo.Incluso puede aceptar .js archivos como entrada con el --allowJs bandera.Esto le permite comenzar con TypeScript de inmediato.Desafortunadamente, es probable que se produzcan errores de compilación al principio.Es necesario recordar que estos no son errores que detengan el espectáculo, como puede estar acostumbrado con otros compiladores.

Los errores de compilación que se producen al principio al convertir un proyecto de JavaScript en un proyecto de TypeScript son inevitables por la naturaleza de TypeScript.Comprobaciones de TypeScript todo código para su validez y, por lo tanto, necesita conocer todas las funciones y variables que se utilizan.Por lo tanto, es necesario que existan definiciones de tipos para todos ellos, de lo contrario, es probable que se produzcan errores de compilación.Como se mencionó en el capítulo anterior, para prácticamente cualquier marco de JavaScript existen .d.ts archivos que se pueden adquirir fácilmente con la instalación de Paquetes definitivamente tipificados.Sin embargo, es posible que haya utilizado alguna biblioteca poco conocida para la cual no hay definiciones de TypeScript disponibles o que haya completado algunas primitivas de JavaScript.En ese caso, debe proporcionar definiciones de tipo para estos bits para que desaparezcan los errores de compilación.Simplemente crea un .d.ts archivo e inclúyalo en el archivo tsconfig.json files matriz, para que siempre sea considerada por el compilador de TypeScript.En él se declaran aquellos bits que TypeScript no conoce como tipo. any.Una vez que haya eliminado todos los errores, podrá introducir gradualmente la escritura en esas partes según sus necesidades.

También será necesario trabajar un poco en la (re)configuración de su canal de compilación para que TypeScript ingrese al mismo.Como se mencionó en el capítulo sobre compilación, existen muchos buenos recursos y lo 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 animo a que juegues con un proyecto pequeño al principio.Mira cómo funciona, cómo construye, qué archivos usa, cómo está configurado, cómo funciona en tu IDE, cómo está estructurado, qué herramientas usa, etc.Convertir una gran base de código JavaScript a TypeScript es posible cuando sabes lo que estás haciendo.Lea este blog, por ejemplo, en convirtiendo 600.000 líneas a texto mecanografiado en 72 horas).Solo asegúrate de dominar bien el idioma antes de dar el salto.

Adopción

TypeScript es de código abierto (con licencia de Apache 2, consulte GitHub) y respaldado por Microsoft. Anders Hejlsberg, el arquitecto principal de C# encabeza el proyecto.Es un proyecto muy activo;El equipo de TypeScript ha estado lanzando muchas funciones nuevas en los últimos años y todavía se planean muchas funciones excelentes (consulte el mapa vial).

Algunos datos sobre la adopción y la popularidad:

TypeScript hace algo similar a lo que tiene menos o sass para CSS.Son super conjuntos de TI, lo que significa que cada código JS que escribe es un código Typescript válido.Además, puede usar las otras golosinas que agrega al idioma, y el código transpilado será válido JS.Incluso puede configurar la versión JS en la que desea su 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 transpirar al estándar necesario para su proyecto.

" TypeScript Fundamentals " - Un curso de video de la luz plural por Dan Wahlin y John Papá es realmente bueno, actualmente (25 de marzo de 2016) actualizado para reflejar a TypeScript 1.8, Introducción a TypeScript.

Para mí las características realmente buenas, al lado de las posibilidades agradables para IntelliSense, son las clases , interfaces , módulos , la facilidad de implementaciónAMD, y la posibilidad de usar el depurador visual Studio Typycript cuando se invoca con IE.

Para resumir : si se usa como se pretende, Typycript puede hacer que la programación de JavaScript sea más confiable y más fácil.Puede aumentar la productividad del programador JavaScript significativamente sobre el SDLC completo.

Script ECMA 5 (ES5) que todo el soporte del navegador y precompilado.ES6 / ES2015 y ES / 2016 vino este año con muchos cambios por lo que para abrir estos cambios, hay algo en el medio, lo que debería llevar a cuidados, así que significa TypeScript.

• TypeScript es tipos -> significa que tenemos que definir el tipo de datos de cada propiedad y métodos.Si conoce C #, entonces Typycript es fácil de entender.

• Gran ventaja de TypeScript es nosotros, temas relacionados con el tipo de identidad antes de ir a la producción.Esto permite que las pruebas de la unidad falle si hay algún tipo de coincidencia de tipo.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top