¿Qué es TypeScript?

Descripción general de TypeScript

Entonces, como probablemente sepa, JavaScript está expandiendo su huella todos los días. Es abrumador y sorprendente lo que puedes hacer con el idioma hoy en día.

Sin embargo, a medida que más proyectos a gran escala comienzan a utilizar JavaScript, el proceso de hacer que el código sea más fácil de escribir y más fácil de mantener se vuelve cada vez más difícil.

Este es un problema que Microsoft reconoció desde el principio y se le ocurrió una solución: TypeScript La primera versión se lanzó el 1 de octubre de 2012.

JavaScript vs TypeScript

Dónde está Waldo

Bien, ahora que tenemos una idea general de lo que es TypeScript, juguemos un juego rápido de ¿Dónde está Wally ?

En la captura de pantalla anterior, puede detectar las diferencias entre JavaScript& TypeScripten este programa de multiplicación muy simple que simplemente imprime el producto de dos números que he predefinido.

Sin embargo, ¿cuáles son esas diferencias? ? ️

¡Son tipos !

También lo JavaScripttiene la escritura dinámica en el sentido de que una variable declarada como un número se puede convertir en una cadena, mientras que TypeScriptla escritura estática significa que usted declara de antemano qué tipo de valor tendrá la variable y no cambia.

En ese multiplication.tsarchivo, declaro que todas estas variables son números para que no se puedan cambiar a otra cosa.

En esencia, TypeScript está tratando de ayudar a JavaScript a alcanzar nuevas alturas y volverse muy escalable. Se puede destacar por las siguientes características:

  • lenguaje de programación gratuito y de código abierto desarrollado y mantenido por Microsoft
  • superconjunto sintáctico estricto de JavaScript que se compila en JavaScript simple
  • facilita el desarrollo de aplicaciones a gran escala escritas en JavaScript
  • extiende JavaScript agregando tipos estáticos, clases, módulos, interfaces y genéricos

? DATO CURIOSO TypeScript cumplió 7 años el 1 de octubre de 2019.

Versión

La última versión estable disponible es TypeScript 3.7 (a principios de 2020).

Cómo instalar TypeScript

Instalación

Para comenzar, las dos cosas que necesitará son el compilador de TypeScript y un editor que admita TypeScript.

En la captura de pantalla anterior, estoy instalando tanto el compilador como TSLint (que es similar a ESLint) usando npmel terminal integrado de Visual Studio Code.

Instalación de TypeScript

Este comando instalará el paquete TypeScript como una dependencia en su proyecto usando el npmcual es un administrador de paquetes popular.

npm i typescript

Para tener en cuenta Hay varias opciones que se npmproporcionan dependiendo de dónde desee instalar TypeScript.

  • npm i -g typescript para instalar globalmente el paquete TypeScript
  • npm i -D typescript para instalar el paquete TypeScript como una dependencia de desarrollo

Compilar un solo archivo en JavaScript

tsc multiplication.ts

Nota Puede configurar este proceso de compilación de TypeScript como un script npm personalizado en su package.json.

Opciones de configuración

touch tsconfig.json

También existe la opción de crear un tsconfig.jsonarchivo que especifique los archivos raíz y las opciones del compilador.

Dentro de su tsconfig.jsonarchivo, por ejemplo, puede especificar que desea que TypeScript se compile en ES5 en lugar de ES6.

Ejemplo rápido

Multiplicación

En la captura de pantalla anterior, puede ver dos archivos: multiplication.jsy multiplication.ts.

Este programa simplemente imprime el producto de dos números que he predefinido.

multiplication.ts

let a: number = 10; let b: number = 2; function showProduct(first: number, second: number): void { console.info("Mathematical! The result is " + first * second + "."); } showProduct(a, b); // Mathematical! The result is 20.

Una vez que haya terminado de crear multiplication.ts, puedo compilarlo en JavaScript usando el tsccomando que significa compilación de TypeScript.

multiplication.js

var a = 10; var b = 2; function showProduct(first, second) { console.info("Mathematical! The result is " + first * second + "."); } showProduct(a, b); // Mathematical! The result is 20.

Bam: ¡acabamos de compilar TypeScript en JavaScript con éxito!

TSLint

TSLint

Un linter es una herramienta que detecta y marca errores en lenguajes de programación, incluidos errores de estilo.

Para TypeScript, TSLint es la opción de linter más popular.

TSLint es una herramienta de análisis estático extensible que verifica el código TypeScript para ver si hay errores de legibilidad, mantenibilidad y funcionalidad.

Es ampliamente compatible con editores y sistemas de compilación modernos y se puede personalizar con sus propias reglas, configuraciones y formateadores de pelusa.

Instalación de TSLint

Este comando instalará globalmente el TSLintpaquete usando npm, un administrador de paquetes popular.

npm i -g tslint

Patio de recreo

Patio de recreo

Si desea probar TypeScript sin instalarlo, visite TypeScript Playground.

Playground tiene autocompletado integrado y la capacidad de ver directamente el JavaScript emitido.

Otros recursos

Para obtener más información sobre la instalación, consulte el Apéndice de instalación.

En caso de que solo necesite un verificador de tipos y no desee compilar su programa, lea sobre Flux.

  • Inicio rápido
  • Documentación
  • Código fuente