Cómo instalar y comenzar a usar TypeScript

TypeScript es uno de los temas más candentes del desarrollo web y por buenas razones.

Nos permite escribir cast al declarar variables, lo que significa que establecemos explícitamente el tipo de datos que esperamos recuperar. Luego arroja errores si los datos devueltos no son del tipo que esperábamos recuperar, o si una llamada a función tiene muy pocos o demasiados argumentos. Y eso es solo una muestra de todo lo que ofrece.

Si desea una descripción general de los tipos de datos, le resultará útil leer mi artículo anterior. No es necesario leer ese artículo, pero le dará una gran comprensión de los tipos de datos y la sintaxis de TypeScript.

Antes de comenzar, es importante tener en cuenta que TypeScript se puede usar junto con un marco / biblioteca, pero también se puede usar independientemente de un marco / biblioteca. TypeScript es el predeterminado en los proyectos Angular y tengo un artículo en proceso sobre cómo comenzar con él.

Además, este artículo asume que tiene un conocimiento básico de la programación JavaScript.

Entonces, ahora estamos listos para comenzar con TypeScript y comenzar a hacer uso de sus increíbles funciones.

¡Vamos a profundizar en!

Instalación de TypeScript

Hay dos formas principales de instalar TypeScript. El primero es a través de Visual Studio (que no debe confundirse con Visual Studio Code), que es un IDE. Las versiones 2015, 2017 y creo que 2019 ya vienen con TypeScript instalado.

Esta no es la ruta que cubriré hoy, ya que utilizo principalmente Visual Studio Code para todas mis necesidades.

La segunda forma, y ​​en la que nos centraremos, es a través de NPM (Node Package Manager).

Si aún no tiene NPM y / o Node instalado (obtiene NPM cuando instala Node), ahora es un buen momento para hacerlo, ya que es un requisito para los siguientes pasos (y por asociación un requisito para usar TypeScript).

Una vez que tenga Node y NPM instalados, abra su terminal en VS Code y ejecute el siguiente comando:

npm install -g typescript

Una vez que haya terminado de instalar, verá que se ha agregado 1 paquete. También verá un mensaje que indica la versión de TypeScript que se instaló.

Esto es todo lo que necesita para comenzar a compilar TypeScript en JavaScript.

¡Ahora está listo para comenzar a escribir TypeScript!

Iniciar un proyecto de TypeScript

Creemos un proyecto de TypeScript para que podamos aprovechar todas esas excelentes funciones que conlleva su uso.

En su editor de elección (estoy usando VS Code), creemos un archivo HTML para que sea el lado visual de nuestro código. Así es como se ve mi archivo HTML básico:

Honestamente, solo estamos usando este HTML para que podamos tener algo que ver en la página. Lo que realmente nos preocupa es usar la consola.

Notarás que he app.jsvinculado en el encabezado de nuestro index.htmlarchivo.

Probablemente te estés diciendo a ti mismo que pensé que esto era un artículo sobre TypeScript.

Bueno, sostén tus caballos, lo es. Solo quiero resaltar algunas de las diferencias entre JavaScript y TypeScript (aprenderá de dónde viene este archivo a continuación).

A continuación, verá una declaración de variable simple y una declaración de registro de la consola:

Como nota al margen, si desea deshabilitar algunas reglas de ES-Lint, puede colocar las reglas en la parte superior de los comentarios como lo hice anteriormente. O si desea deshabilitar completamente ES-Lint para ese archivo, solo puede colocarlo /* eslint-disable */en la parte superior del archivo.

Y aquí está la consola del navegador:

Supongamos que estoy construyendo una aplicación y userNameque siempre espero recuperar una cadena. En el camino, puedo cometer un error o mis datos pueden mutar de otra fuente.

Ahora, userNamees un número :(

Y aquí está la consola del navegador que muestra los cambios userNameque probablemente no quisiéramos que ocurrieran si se tratara de una aplicación de producción:

¿Qué pasa si lo devuelto userNamese pasó a otra función o se usó como una pieza de un rompecabezas de datos más grande?

No solo sería un desastre averiguar dónde ocurrió la mutación (especialmente si tuviéramos una aplicación más grande), sino que también crearía una cantidad incalculable de errores en nuestro código.

Ahora, intentemos el mismo experimento en TypeScript. Para hacer eso, necesitaremos crear un nuevo archivo con la .tsextensión para denotar un archivo TypeScript.

Nombraré el mío app.tspara mantener la coherencia con las convenciones de nomenclatura y colocaré el mismo código de nuestro archivo JavaScript en nuestro nuevo archivo TypeScript.

Notará que estoy usando conversión de tipos al declarar mi variable ahora, y le digo explícitamente a TypeScript que esta variable debe apuntar solo a un valor de cadena.

También notará que tengo una línea de error debajo userNamecuando estoy reasignando su valor.

Compilar TypeScript con la CLI

Para ver cómo se ve esto en nuestra consola, tenemos que compilarlo en JavaScript. Lo hacemos ejecutándolo tsc app.tsen nuestra consola de VS Code (también puede ejecutar el mismo comando en cualquier terminal siempre que esté en el directorio correcto).

Cuando ejecutamos este comando, compilará nuestro TypeScript en JavaScript. También generará otro archivo con el mismo nombre, solo que con una .jsextensión.

De aquí es de donde app.jsvino ese archivo que mencioné anteriormente en el artículo.

Para compilar varios archivos a la vez, solo proporcione esos nombres en su comando, uno tras otro: tsc app.ts header.component.ts

También es posible compilar varios archivos TypeScript en un solo archivo JavaScript agregando la --outmarca:

tsc *.ts --out index.js

También hay un comando de observación que volverá a compilar todo el TypeScript automáticamente cada vez que se detecte un cambio. Esto evita que tenga que ejecutar el mismo comando una y otra vez:

tsc *.ts --out app.js --watch

Aquí está el resultado de ese tsc app.tscomando anterior:

Este error nos dice que hay un problema con la reasignación de userName. Debido a que establecimos explícitamente nuestra variable para que sea una cadena ( incluso si no hubiera establecido la variable como una cadena, el error aún se produciría porque TypeScript infiere tipos de datos ) no podemos reasignarla a un número.

Esta es una gran característica porque nos obliga a ser explícitos con nuestras declaraciones de variables y nos evita cometer errores que podrían resultar molestos y consumir mucho tiempo. Si espera un tipo de datos en particular, debe obtener esos datos; de lo contrario, debería obtener un error.

Uso de matrices y objetos explícitamente declarativos

Digamos que estoy construyendo un proyecto y en lugar de configurar manualmente los enlaces de navegación, quiero almacenar esa información en una serie de objetos.

Esperaré un formato específico para la información almacenada para que sea coherente en todos los enlaces.

Así es como puedo configurar una matriz "compleja" en TypeScript:

En el lado izquierdo declaramos el nombre de la variable navLinks, seguido de dos puntos. En las llaves es donde comenzamos a declarar el formato de la información que esperamos en esta matriz.

Le estamos diciendo a TypeScript que esperamos que esta matriz contenga un objeto u objetos con estos nombres y tipos de propiedad. Esperamos a nameque es una cadena, a linkque es una cadena y a altque también es una cadena.

Al igual que con otros tipos de datos, si nos desviamos del formato que establecimos para esta variable, nos encontramos con errores.

Aquí intentamos agregar una nueva entrada que estaba en blanco y obtuvimos el siguiente error:

Type '{}' is missing the following properties from type '{ name: string; link: string; alt: string; }' : name, link, alt ts(2739)

Obtenemos errores similares si intentamos agregar otra entrada con el tipo de información incorrecto:

{ name: 'Jonathan', link: 15, alt: false }  ❌

{ name: ['Jon','Marley'], link: `//link123.net`, alt: null }  ❌

this.navLinks[0].img = '../../assets/img'

this.navLinks[0].name = 'Barnaby'✔️

Aunque entiendes la idea. Una vez que establezcamos el formato, TypeScript nos mantendrá en ese formato y nos informará si / cuando nos desviamos de él con un error.

Además, aquí hay algunas formas de definir una matriz:

const arr1: Array = ['Dave', 35, true]; // nos permitirá tener cualquier número de elementos con cualquier tipo

const people: [string,string,string] = ['John', 'Sammy', 'Stephanie'];// arrojará un error si aparecen más de 3 cadenas o cualquier elemento que no sea una cadena en la matriz

const people: Array = ['Jimmy', 'Theresa', 'Stanley'];// nos permitirá tener cualquier número de elementos de cadena únicos en nuestra matriz

Los objetos funcionan de la misma manera que las matrices en TypeScript. Pueden definirse explícitamente con tipos de conjuntos o puede dejar que TypeScript haga todas las deducciones. A continuación, se muestra un ejemplo básico de un objeto:

const person: {name:string, address: string, age: number} = {name: 'Willy', address: '123 Sunshine Ln', age: 35}

Nuevamente, en el lado izquierdo estamos declarando persona como el nombre de la variable con el primer conjunto de llaves que definen el formato en el que queremos que estén nuestros datos.

Es importante tener en cuenta que en los objetos, el orden en el que definimos nuestras propiedades no tiene por qué coincidir con el orden del formato:

Funciones, parámetros y argumentos

Algunos de los mayores beneficios que verá en TypeScript provienen del uso de funciones.

¿Alguna vez ha creado una función para realizar una tarea específica solo para descubrir que no funciona como pretendía?

Mientras usa TypeScript, no será porque no obtuvo / envió el tipo correcto de datos o no usó el número correcto de parámetros / argumentos.

Aquí tienes un gran ejemplo:

En nuestra función esperamos recibir 3 argumentos cuando se calculatorejecuta. Sin embargo, si recibimos un número incorrecto de argumentos (muy pocos o demasiados), TypeScript nos dará un buen error:

Asimismo, si recibimos el tipo de datos incorrecto al ejecutar esta función, TypeScript generará un error y la función no se ejecutará.

calculator('12', '11', 'add) ;

Ahora puede que te estés diciendo a ti mismo '¿Y qué? Eso está muy bien, pero no parece que sea un gran problema '. Pero imagine que su aplicación consta de decenas y decenas de archivos con muchas capas de abstracciones.

Un gran ejemplo de esto sería una aplicación Angular con servicios, modelos de datos, componentes multinivel y todas las dependencias que la acompañan. Se vuelve cada vez más difícil identificar de dónde proviene un error cuando su aplicación se vuelve grande.

Eso es todo

Con suerte, ahora puede ver los beneficios de TypeScript. Hay muchos más de los que he descrito aquí y le animo a que lea la documentación si quiere encontrar más.

Puedes encontrar este artículo y otros similares en mi blog. ¡Me encantaría que pasaras por aquí!

Mientras esté allí, ¿por qué no suscribirse a mi boletín  ? Puede hacerlo en la parte superior derecha de la página principal del blog. Prometo que nunca enviaré spam a su bandeja de entrada y su información no se compartirá con nadie / sitio. Me gusta enviar ocasionalmente recursos interesantes que encuentro, artículos sobre desarrollo web y una lista de mis publicaciones más recientes.

Si aún no lo has hecho, ¡también puedes conectarte conmigo en las redes sociales! Todos mis enlaces también están en la parte superior derecha de esa página. Me encanta conectarme con los demás y conocer gente nueva, así que no temas saludar. ?

¡Que tengas un día increíble, amigo y feliz programando!