Historia

TypeScript es una superposición del lenguaje JavaScript. Su principal colaborador, Anders Hejlsberg, creador de Delphi y Turbo Pascal, quiso preservar la fuerza de JavaScript eliminando las imperfecciones descritas por ciertos detractores del lenguaje.

Propone, entre otras cosas:

anotaciones,
enumeraciones,
tipado de variables y funciones.

El conjunto de características adicionales acerca el lenguaje a competidores famosos y populares como Java y C ++.

El código TypeScript se transcompila. De forma más sencilla, todo el código se transforma en JavaScript y luego se puede integrar en una página HTML.

Integrar TypeScript en un proyecto web

1. npm

La forma más rápida de decirle a un proyecto y entorno de desarrollo que vamos a usar TypeScript consiste en utilizar el administrador de paquetes oficial de Node.js. npm permite la instalación de paquetes y dependencias confiando en repositorios oficiales. Varias fuentes afirman que npm son las siglas de Node Package Manager, pero esta teoría fue refutada por su inventor.

npm es un administrador de JavaScript escrito en… JavaScript.

Ubicado en la raíz del proyecto, el comando para instalar TypeScript es:

npm install -g typescript

TypeScript es muy rico y para detallar todas las facetas sería necesario escribir un libro completo. Aquí, solo se estudiarán las funcionalidades útiles para desarrollar con el framework Angular.

2. Creación de un archivo TypeScript

Visual Studio permite la creación de un archivo TypeScript rápidamente, ya que basta con crear un nuevo archivo con la extensión.ts.

Para transcompilar un archivo e integrarlo en una página HTML, el comando que se ha de ejecutar en una terminal de Windows es:

tsc ficheroTypeScript.ts

Que tiene el efecto de crear un archivo ficheroTypeScript.js fácil de integrar en una página web a través de su etiqueta <script>.

Por supuesto, un archivo TypeScript transcompilado se puede lanzar directamente usando el comando node en un terminal....

Tipado

1. JavaScript y los errores de tipado

Una de las principales críticas a JavaScript es que no está muy tipado. De hecho, una variable que contiene una cadena de caracteres al inicio del programa puede contener una matriz durante la ejecución.

Este enfoque se describe como flexible en el mejor de los casos, o completamente absurdo en otros. Es fuente de muchos errores, ya que el desarrollador nunca puede estar seguro del tipo de sus variables.

Por ejemplo, en una función, sumar números puede ser desastroso si, al final, uno de los números esperados es una cadena de caracteres.

// C:\JavaScriptYAngularJavaScript\C07\demostracion\ 
errorDeTipado.ts 
// Funciones  
function suma(cifra01, cifra02) {  
   return cifra01+ cifra02;  
}  
// Uso de la función suma  
let primeraCifra = 1;  
let segundaCifra = 3  
let cadenaDeCaracteres = "abc";  
console.log(suma(primeraCifra, segundaCifra));  
// Muestra 4  
console.log(suma(cadenaDeCaracteres, segundaCifra)); // /!\   
Muestra abc3 /!\

Uso node para ejecutar un fichero TypeScript

2. TypeScript y el tipado

TypeScript permite decirle al compilador y a los desarrolladores qué tipo se espera en una variable e incluso en el retorno de una función.

Para hacer esto, solo necesita agregar, a la declaración...

Enumeraciones

1. Declaración

El tipo de enumeración es un poco especial porque se parece mucho al tipo de array, pero difiere mucho en su declaración.

Una enumeración es en realidad una lista de constantes.

enum puntosCardinales {  
   N,  
   S,  
   E,  
   O  
}

2. Uso de una variable de tipo enumeración

// C:\JavaScriptYAngularJavaScript\C07\demostracion\ 
enumeracion.ts  
enum puntosCardinales {  
   N,  
   S,  
   E,  
   O  
}  
// Declaración  
let unaDireccion: puntosCardinales;  
// Uso  
unaDireccion = puntosCardinales.N; // unaDireccion = 0  
unaDireccion = puntosCardinales.S; // unaDireccion = 1  
unaDireccion = puntosCardinales.E; // unaDireccion = 2  
unaDireccion = puntosCardinales.O; // unaDireccion = 3

Así el código es mucho más claro. La variable unaDireccion sucesivamente toma la dirección norte, sur, este, luego oeste.

Funciones

1. Generalidades

Declarar una función usando TypeScript agrega algunos elementos a su firma.

// C:\JavaScriptYAngularJavaScript\C07\demostracion\pitufos 
function traductorPitufo(palabra: string): string {  
   return "Pitufos";  
}  
let frase: string = "Cuando un pitufo se hace un morado es igual 
que si nosotros no nos hacemos nada"; 
let tabPalabras: string[] = frase.split(' ');  
for (let i = 0; i < tabPalabras.length; i++) {  
   console.log(traductorPitufo (tabPalabras [i]));  
}

Esta función toma una palabra de tipo cadena como argumento y la traduce al lenguaje Pitufo devolviendo una cadena.

Usar una función escrita con argumentos tipados

El bucle for del ejemplo anterior se puede reemplazar por una expresión cualquiera.

2. Funciones particulares

a. Funciones anónimas

Una función puede asignarse directamente a una variable. Hablamos entonces de una función anónima.

let palabraTraducir = function traductorPitufo(palabra: string): 
string {  
   return "Pitufos";  
}

b. Funciones flecha

Mejor aún, ES6 introdujo el concepto de funciones flecha. El objetivo principal es simplificar aún más el uso de funciones anónimas.

EL ejemplo anterior de la variable palabraTraducir puede escribirse...

Clases y herencia

1. Clase mínima

Con TypeScript, los desarrolladores de Java están encantados porque la sintaxis de una clase de TypeScript se parece casi exactamente a la de una clase de Java.

// C:\JavaScriptYAngularJavaScript\C07\demostracion\coche.ts  
// Definición de la clase coche  
class Coche {  
}  
// Declaracón de un nuevo coche  
let miCoche = new Coche();

Una clase de TypeScript contiene atributos, constructor, métodos y descriptores de acceso.

2. Atributos

Los atributos están precedidos por la palabra clave private para no hacerlos accesibles desde fuera de la clase. Se puede ver o modificar atributos gracias a los modificadores.

// C:\JavaScriptYAngularJavaScript\C07\demostracion\coche.ts  
// Definición de la clase Coche  
class Coche {  
   // Atributos 
   private _kilometraje: number;  
   private _propietario: string;  
   private _color: string;  
}  
// Declaración de un nuevo coche  
let miCoche = new Coche();

3. Accesores

Los accesores le permiten acceder y modificar los atributos privados de una clase. Más simplemente, los atributos podrían haberse declarado públicos para ser modificados y consultados libremente. Aunque más sencilla, esta forma de hacer las cosas es mala, ya que no respeta el principio de encapsulación.

En la programación orientada a objetos, es esencial ocultar los atributos sensibles y convertir cada clase en una caja negra. Por lo tanto, encapsular es hacer que los atributos sean privados y ofrecer accesos controlados para acceder a ellos.

// C:\JavaScriptYAngularJavaScript\C07\demostracion\coche.ts  
// Definición de la clase Coche  
class Coche {  
   // Atributos  
   private _kilometraje: number;  
   private _propietario: string;  
   private _color: string;  
  
   // Getters  
   get kilometraje() {  
       return this._kilometraje;  
   }  
   get propietario() {  
       return this._ propietario;  
   }  ...

Módulos

Ciertamente, ya habrá observado al realizar los ejercicios que una clase, un atributo, una instancia... no se pueden declarar dos veces, incluso si están en dos archivos TypeScript diferentes. El problema radica en el hecho de que cada elemento declarado en TypeScript tiene un alcance global.

En un proyecto de gran tamaño, esto obviamente puede plantear problemas y es por eso por lo que apareció el concepto de módulo.

Un módulo es un conjunto de clases. Cada elemento del módulo tiene un alcance limitado al módulo, a menos que se exporte explícitamente. Lo que significa que muy bien podemos tener una clase Coche en un módulo miModulo01 y otra clase Coche en el módulo miModulo02.

Crear un módulo es simplemente insertar clases en una nueva declaración module.

// C:\JavaScriptYAngularJavaScript\C07\demostracion\modulo.ts  
module miModulo {  
  
   class Vehiculo {  
       metodoDelVehiculo() {  
           console.log("Método del vehiculo.");  
       }  
   }  
  
   class Coche extends Vehiculo {  
       metodoDelCoche() {  
           console.log("Método...

Práctica

1. Enunciado

Cree una clase Persona que tenga los atributos appellido, nombre, sexo, edad, altura y peso, así como todos los accesores y constructores que estime útiles.

Luego cree una clase Estudiante que herede la clase Persona y que tiene, además, un atributo que indica en qué promoción está el estudiante.

Después, cree una clase Formador que herede la clase Persona y que tiene un atributo adicional que es la lista de cursos que un formador puede impartir y una clase Curso. Cree la clase Curso previamente.

Y, finalmente, cree un objeto, una instancia de Formador, que enseñe Java y JavaScript, y muéstrelo.

Visualizar un formador usando TypeScript y las clases

2. Corrección

// C:\JavaScriptYAngularJavaScript\C07\Practica\main.ts  
module escuelaENI {  
   export class Persona {  
       // Atributos  
       _apellido: string;  
       _nombre: string;  
       _edad: number;  
       _altura: number;  
       _peso: number;  
       // Getters  
       get apellido () {  
           return this._ apellido;  
       }  
       get nombre () {  
           return this._ nombre;  
       }  
       get edad () {  
           return this._...