TypeScript es un superconjunto escrito de JavaScript, destinado a hacer que el lenguaje sea más escalable y confiable.
Es de código abierto y ha sido mantenido por Microsoft desde que lo crearon en 2012. Sin embargo, TypeScript obtuvo su avance inicial como el lenguaje de programación central en Angular 2. Ha seguido creciendo desde entonces, también en las comunidades React y Vue.
En este tutorial, aprenderá los conceptos básicos de TypeScript con la ayuda de ejemplos prácticos.
También estamos a punto de lanzar un curso gratuito de TypeScript de 22 partes sobre Scrimba. ¡Deje su correo electrónico aquí si desea acceso anticipado!
Empecemos.
Instalación de TypeScript
Antes de comenzar a codificar, necesitamos instalar TypeScript en nuestra computadora. Lo usaremos npmpara esto, así que solo abre la terminal y escribe el siguiente comando:
npm install -g typescript Una vez instalado, podemos verificarlo ejecutando el comando tsc -vque mostrará la versión del TypeScript instalado.
Escribiendo un código
Creemos nuestro primer archivo TypeScript y escribamos un código dentro de él. Abra su IDE o editor de texto favorito y cree un archivo con el nombre de first.ts - Para archivos TypeScript, usamos la extensión.ts
Por ahora, solo vamos a escribir algunas líneas de JavaScript antiguo, ya que todo el código JavaScript también es un código TypeScript válido:
let a = 5; let b = 5; let c = a + b; console.log(c); El siguiente paso es compilar nuestro TypeScript en JavaScript simple, ya que los navegadores quieren que los .jsarchivos lean.
Compilar TypeScript
Para compilar, ejecutaremos el comando de tsc filename.ts, que crea un archivo JavaScript con el mismo nombre pero con una extensión diferente, y que eventualmente podemos pasar a nuestros navegadores.
Así que abre la terminal en la ubicación del archivo y ejecuta el siguiente comando:
tsc first.ts Consejo : si desea compilar todos los archivos de TypeScript dentro de cualquier carpeta, use el comando:tsc *.ts
Tipos de datos
TypeScript, como su nombre indica, es la versión escrita de JavaScript. Esto significa que podemos especificar tipos para diferentes variables en el momento de la declaración. Siempre mantendrán el mismo tipo de datos en ese ámbito.
Escribir es una característica muy útil para asegurar confiabilidad y escalabilidad. La verificación de tipos ayuda a garantizar que nuestro código funcione como se espera. Además, ayuda a detectar errores y a documentar correctamente nuestro código.
La sintaxis para asignar un tipo a cualquier variable es escribir el nombre de la variable seguido de un :signo, y luego el nombre del tipo seguido de un =signo y el valor de la variable.
Hay tres tipos diferentes en TypeScript: el anytipo, los Built-intipos y los User-definedtipos. Echemos un vistazo a cada uno de ellos.
cualquier tipo
El anytipo de datos es el superconjunto de todos los tipos de datos en TypeScript. Darle a cualquier variable el tipo anyes equivalente a optar por no participar en la verificación de tipo de una variable.
let myVariable: any = 'This is a string' Tipos incorporados
Estos son los tipos que se crean en TypeScript. Incluyen number, string, boolean, void, nully undefined.
let num: number = 5; let name: string = 'Alex'; let isPresent: boolean = true; Tipos definidos por el usuario
Los User-definedtipos incluyen enum, class, interface, array, y tuple. Discutiremos algunos de estos más adelante en este artículo.
Programación orientada a objetos
TypeScript admite todas las características de la programación orientada a objetos, como clases e interfaces. Esta capacidad es un gran impulso para JavaScript: siempre ha tenido problemas con su funcionalidad OOP, especialmente desde que los desarrolladores comenzaron a usarla para aplicaciones a gran escala.
Clase
En la programación orientada a objetos, una clase es la plantilla de objetos. Una clase define cómo se vería un objeto en términos de las características y funcionalidades de ese objeto. Una clase también encapsula los datos del objeto.
TypeScript tiene soporte integrado para clases, que no eran compatibles con ES5 y versiones anteriores. Esto significa que podemos usar la classpalabra clave para declarar uno fácilmente.
class Car { // fields model: String; doors: Number; isElectric: Boolean; constructor(model: String, doors: Number, isElectric: Boolean) { this.model = model; this.doors = doors; this.isElectric = isElectric; } displayMake(): void { console.log(`This car is ${this.model}`); } } En el ejemplo anterior, hemos declarado una Carclase, junto con algunas de sus propiedades, que estamos inicializando en constructor. También tenemos un método que mostraría algún mensaje usando su propiedad.
Veamos cómo podemos crear una nueva instancia de esta clase:
const Prius = new Car('Prius', 4, true); Prius.displayMake(); // This car is Prius Para crear un objeto de una clase, usamos la palabra clave de newy llamamos al constructor de la clase y le pasamos las propiedades. Ahora bien, este objeto Priustiene sus propias propiedades de model, doorsy isElectric. El objeto también puede llamar al método de displayMake, que tendría acceso a las propiedades de Prius.
Interfaz
The concept of interfaces is another powerful feature of TypeScript, which allows you to define the structure of variables. An interface is like a syntactical contract to which an object should conform.
Interfaces are best described through an actual example. So, suppose we have an object of Car:
const Car = { model: 'Prius', make: 'Toyota', display() => { console.log('hi'); } } If we look at the object above and try to extract its signature, it would be:
{ model: String, make: String, display(): void } If we want to reuse this signature, we can declare it in the form of an interface. To create an interface, we use the keyword interface.
interface ICar { model: String, make: String, display(): void } const Car: ICar = { model: 'Prius', make: 'Toyota', display() => { console.log('hi'); } } Here, we’ve declared an interface called ICar , and created an object Car. Car is now binding to the ICar interface, ensuring that the Car object defines all the properties which are in the interface.
Conclusion
So I hope this gave you a quick glimpse into how TypeScript can make your JavaScript more stable and less prone to bugs.
TypeScript is gaining a lot of momentum in the world of web development. There’s also an increasing amount of React developers who are adopting it. TypeScript is definitely something any front-end developer in 2018 should be aware of.
Happy coding :)
Thanks for reading! My name is Per Borgen, I'm the co-founder of Scrimba – the easiest way to learn to code. You should check out our responsive web design bootcamp if want to learn to build modern website on a professional level.
