Tutorial de TypeScript

 

 

 

Tutorial de typescript 1

 

TypeScript es una de las tecnologías de más rápido crecimiento en 2018. Está en todas partes y todo el mundo habla de ella. Este artículo te ayuda a comprender sus conceptos clave.

Pocas tecnologías en los últimos años tuvieron el impacto que tuvo TypeScript.

Permítame agregar un poco de prueba social a favor de TypeScript.

En la encuesta “El estado de JavaScript 2018”, casi el 50 % de los encuestados afirmó que utilizaba TypeScript y que volvería a utilizarlo. Más del 30 % afirmó que le gustaría aprenderlo. Se trata de un porcentaje enorme de personas interesadas en el lenguaje.

TypeScript es desarrollado por Microsoft, que no es nuevo en la creación de lenguajes de programación, y uno de sus creadores es Anders Hejlsberg, un ingeniero de software danés conocido por Turbo Pascal (❤️) y Delphi. Puse el corazón al lado de Turbo Pascal porque Pascal fue mi primer lenguaje de programación y usábamos Turbo Pascal en la escuela.

Es un lenguaje de código abierto, desarrollado públicamente en https://github.com/Microsoft/TypeScript .

Angular se basa en TypeScript, y se dice que Vue.js crea la versión 3 con TypeScript. Ryan Dahl, el creador de Node.js, también habló muy bien de él.

Creo que esas cosas te ayudan a poner TypeScript en perspectiva. No es solo una versión aleatoria de JavaScript que desaparecerá el mes que viene, definitivamente llegó para quedarse. Y, tal como están las cosas, esto significa que es probable que debas usarlo en un proyecto futuro o en tu próximo trabajo. Tal vez también te ayude a conseguir un trabajo, así que profundicemos en ello.

Escribe y compila tu primer archivo TypeScript

Comenzar a usar TypeScript es fácil. Si alguna vez escribiste una línea de JavaScript, ¡ya escribiste código TypeScript!

Esta extraña declaración que hice es una de las razones del éxito de TypeScript: es un superconjunto estricto de JavaScript .

Es un poco como lo que SCSS es para CSS.

En particular, es un superconjunto de ECMAScript 2015 (también conocido como ES6). Esto significa que cualquier código JavaScript válido también es TypeScript válido.

Muchas de las características de TypeScript son equivalentes a las de JavaScript, por ejemplo, las variables, el sistema de módulos, los iteradores y más.

 

Entonces, no hay necesidad de escribir tu primer archivo TypeScript, porque ya lo hiciste sin saberlo, pero hagamos un pequeño “¡hola mundo!” creando explícitamente un archivo TypeScript y compilándolo en JavaScript.

Ejecute npm install -g typescriptpara instalar globalmente el compilador TypeScript, disponible para usted mediante el tsccomando.

Crea una nueva carpeta y crea un app.tsarchivo. tses la extensión de archivo TypeScript.

Escribe este primer programa:

const greet = () = { console.log('Hello world!')}greet()

Esto es simplemente JavaScript, pero almacenado en un .tsarchivo.

Ahora compila el programa usando tsc app.ts. El resultado será un nuevo archivo JavaScript: app.js, con este contenido:

var greet = function () { console.log('Hello world!')}greet()

El código TypeScript se ha compilado en JavaScript. El código JavaScript ha cambiado un poco; por ejemplo, se puede observar que se han añadido puntos y comas, y se ha utilizado varen lugar de const, y se ha utilizado una función normal en lugar de la función de flecha.

Parece un JavaScript antiguo , ¿verdad? Esto se debe a que TypeScript compila en ES5 de forma predeterminada, ya que esta es la versión de ECMAScript que está casi garantizada que será compatible con todos los navegadores modernos. Puedes cambiar el destino de la compilación a otras versiones, por ejemplo, para usar ES2018, usa tsc app.ts --target ES2018:

const greet = () = { console.log('Hello world!')}greet()

Mira, aquí casi nada ha cambiado respecto a nuestro .tsarchivo original, excepto los punto y coma adicionales.

Hay un patio de juegos en línea muy conveniente que te permite jugar con la compilación de TypeScript a JavaScript, en https://www.typescriptlang.org/play/ .

Mecanografía

Escribir es la característica clave de TypeScript.

Hasta ahora hemos compilado un .tsarchivo, pero solo hemos compilado JavaScript simple.

Viste una de las primeras características de TypeScript: puedes usar JavaScript moderno y compilarlo en ES5 (o superior), algo similar a lo que hace Babel .

No utilizamos ninguna de las funcionalidades de TypeScript.

La pieza de funcionalidad más importante proporcionada por TypeScript es el sistema de tipos: tipos estáticos, interfaces, inferencia de tipos, enumeraciones, tipos híbridos, genéricos, tipos de unión/intersección, modificadores de acceso, verificación de nulos.

Si alguna vez usaste un lenguaje tipado, como Go o C, ya sabes cómo funciona esto. Si no, y solo programaste en un lenguaje dinámico como Python o Ruby, todo esto es nuevo para ti, pero no te preocupes.

El sistema de tipos le permite, por ejemplo, agregar tipos a sus variables, argumentos de funciones y tipos de retorno de funciones, dando una estructura más rígida a sus programas.

Las ventajas son mejores herramientas: el compilador (y editores como VS Code ) pueden ayudarte mucho durante el desarrollo, señalando errores a medida que escribes el código. Errores que no podrían detectarse si no tuvieras tipos. Además, el trabajo en equipo se vuelve más fácil porque el código es más explícito.

 

El código JavaScript resultante que compilamos no tiene tipos, por supuesto: se pierden durante la fase de compilación, pero el compilador señalará cualquier error que encuentre.

Aquí se explica cómo definir una variable de cadena en TypeScript:

const greeting: string = 'hello!'

La inferencia de tipos nos permite evitar escribir el tipo en casos obvios como este:

const greeting = 'hello!'

El tipo está determinado por TS.

Así es como una función acepta un argumento de un tipo específico:

const multiply = (a: number, b: number) = { return a * b}

Si pasa una cadena a multiply(), el compilador le dará un error.

Así es como las funciones declaran su valor de retorno:

const multiply = (a: number, b: number): number = { return a * b}

Los tipos válidos son

  • number
  • string
  • boolean
  • enum
  • void
  • null
  • undefined
  • any
  • never
  • Array
  • tuple

anyes un tipo general que identifica, como su nombre lo indica, cualquier tipo. Free porn comics

Clases

ES2015/ES6 agregó clases a JavaScript, como un simple azúcar sintáctico sobre la herencia prototípica .

Nos guste o no, en realidad JavaScript todavía utiliza herencia prototípica, con todas sus características y peculiaridades únicas.

Las clases de TypeScript son un poco diferentes a las de JavaScript. La razón es que TypeScript introdujo las clases antes que JavaScript (se introdujeron en ES2015/ES6).

Al igual que en JavaScript, las clases se declaran de esta manera:

class Car {}

Así es como se definen los campos de clase:

class Car { color: string}

Todos los campos son públicos de forma predeterminada. Puedes configurar un campo como privado o protegido :

class Car { public color: string private name: string protected brand: string}

Al igual que ocurre en otros lenguajes de programación, a los campos privados solo se puede acceder en la clase que los declara. A los campos protegidos también solo se puede acceder mediante clases derivadas.

También puedes declarar campos estáticos, que son campos de clase en lugar de campos de objeto:

class Car { static numberOfWheels = 4}

Puedes inicializar campos con un constructor:

class Car { color: string constructor(theColor: string) { this.color = theColor }}

Esta sintaxis abreviada lo hace más sencillo:

class Car { constructor(public color: string) {} printColor() { alert(this.color) }}new Car('red').printColor()

Observe cómo hicimos referencia al campo de clase usando this.x.

Un campo también puede ser de sólo lectura :

class Car { readonly color: string}

y en este caso su valor sólo se puede establecer en el constructor.

 

Las clases tienen métodos:

class Car { color: string constructor(public color: string) { this.color = color } drive() { console.log('You are driving the car') }}

Al igual que en JavaScript simple, creas objetos a partir de esas clases, usando la newpalabra clave:

const myCar = new Car('red')

y puedes ampliar una clase existente usando la extendpalabra clave:

class ElectricCar extends Car { //...}

Puede llamar super()al constructor y a los métodos para llamar al método correspondiente de la clase extendida.

Accesorios

Los campos pueden tener métodos get y setter. Ejemplo:

class Car { private _color: string get color(): string { return this._color } set color(color: string) { this._color = color }}

Clases abstractas

Las clases se pueden definir como abstractas, lo que significa que debe haber una clase que las extienda e implemente sus posibles métodos abstractos:

abstract class Car { abstract drive()}class SportsCar extends Car { drive() { console.log('You are driving a sports car') }}

Interfaces

Las interfaces se basan en tipos básicos. Puedes usar una interfaz como un tipo y esta interfaz puede contener otras definiciones de tipo:

interface SetOfNumbers { a: number b: number}const multiply = (set: SetOfNumbers) = { return set.a * set.b}multiply({ a: 1, b: 2 })

Una interfaz también puede ser una interfaz para una implementación de clase:

interface Car { name: 'string' new (brand: string) drive(): void}class SportsCar implements Car { public name construtor(public brand: string) { //... } drive() { console.log('You are driving a sports car') }}

Funciones características

Las funciones pueden tener parámetros opcionales utilizando el ?símbolo después del nombre del parámetro:

class Car { drive(kilometers?: number) { if (kilometers) { console.log(`Drive the car for ${kilometers} kilometers`) } else { console.log(`Drive the car`) } }}

y los parámetros también pueden tener valores predeterminados:

class Car { drive(kilometers = 10) { console.log(`Drive the car for ${kilometers} kilometers`) }}

Una función puede aceptar un número variable de parámetros mediante el uso de parámetros rest:

class Car { drive(kilometers = 10, ...occupants: string[]) { console.log( `Drive the car for ${kilometers} kilometers, with those people on it:`, ) occupants.map((person) = console.log(person)) }}new Car().drive(20, 'Flavio', 'Roger', 'Syd')

Enumeraciones

Las enumeraciones son una excelente manera de definir constantes con nombre, algo que lamentablemente no es compatible con JavaScript, pero que otros lenguajes popularizaron.

TypeScript nos proporciona enumeraciones:

enum Order { First, Second, Third, Fourth,}

TS asigna internamente un identificador único a cada uno de esos valores, y podemos hacer referencia a Order.First, Order.Secondy así sucesivamente.

Puede asignar valores a las constantes explícitamente:

enum Order { First = 0, Second = 1, Third = 2, Fourth = 3,}

o también utilizar cadenas:

enum Order { First = 'FIRST', Second = 'SECOND', Third = 'THIRD', Fourth = 'FOURTH',}

Genéricos

Los genéricos son una característica que forma parte de muchos lenguajes de programación diferentes. En resumen, puedes crear una función, una interfaz o una clase que funcione con distintos tipos, sin especificar el tipo por adelantado.

Pero en tiempo de compilación, si comienzas a usar esa función con un tipo y luego cambias el tipo (por ejemplo, de número a cadena), el compilador generará un error.

Podríamos hacer esto omitiendo los tipos por completo o usando any, pero con los genéricos todas las herramientas podrán ayudarnos.

Ejemplo de sintaxis:

function greetT(a: T) { console.log(`Hi ${a}!`)}greet('Flavio')

El Tsímbolo divertido identifica un tipo genérico.

El tipo se puede restringir a una determinada familia de clases o interfaz, utilizando la extendspalabra clave:

interface Greetable { name: string}function greetT extends Greetable(a: T) { alert(`Hi ${a.name}!`)}greet({ name: 'Flavio' })

¡Estoy listo para más!

Estos son los conceptos básicos de TypeScript. Consulta la documentación oficial para conocer todos los detalles o comienza a escribir tus aplicaciones y aprende mientras lo haces.

Tips para principiantes de JavaScript




Tal vez te puede interesar:

  1. Introducción a React
  2. Agregar evento de clic a los elementos DOM devueltos desde querySelectorAll
  3. Cómo cambiar el valor de un nodo DOM
  4. Cómo comprobar si un elemento DOM tiene una clase

Tutorial de TypeScript

Escribe y compila tu primer archivo TypeScriptMecanografíaClasesAccesoriosClases abstractasInterfacesFunciones característicasEnumeracionesGenéricos¡Estoy

programar

es

https://aprendeprogramando.es/static/images/programar-tutorial-de-typescript-1893-0.jpg

2024-10-29

 

Tutorial de typescript 1
Tutorial de typescript 1

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

 

 

Update cookies preferences