51 - TypeScript

Hemos avanzado sobre muchas características del framework Angular y no nos hemos detenido sobre el lenguaje que lo soporta que es TypeScript.

TypeScript es un superconjunto de JavaScript que compila a JavaScript.

TypeScript agrega muchas características a JavaScript que nos facilitan la implementación de las aplicaciones.

Cada vez que compilamos la aplicación Angular:

C:\angulardevya\proyecto035> ng serve -o

Se convierten todos los archivos TypeScript (*.ts) en archivos JavaScript (*.js). Este proceso se hace en forma automática gracias a la herramienta Angular CLI. Como programadores en Angular solo nos concentramos en el desarrollo de la aplicación utilizando TypeScript y dejamos que la herramienta se encargue de todas las transformaciones para que luego se ejecute dentro de un navegador web (recordemos que los navegadores solo pueden interpretar archivos JavaScript y no TypeScript)

Cuando creamos un proyecto con Angular CLI se instala en la carpeta 'node_modules' el compilador en la subcarpeta 'typescript'.

Si abrimos el archivo package.json podemos identificar en las dependencias de desarrollo la versión de TypeScript que requiere nuestro proyecto:

{
  "name": "proyecto035",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^17.0.0",
    "@angular/common": "^17.0.0",
    "@angular/compiler": "^17.0.0",
    "@angular/core": "^17.0.0",
    "@angular/forms": "^17.0.0",
    "@angular/platform-browser": "^17.0.0",
    "@angular/platform-browser-dynamic": "^17.0.0",
    "@angular/router": "^17.0.0",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^17.0.0",
    "@angular/cli": "^17.0.0",
    "@angular/compiler-cli": "^17.0.0",
    "@types/jasmine": "~5.1.0",
    "jasmine-core": "~5.1.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.1.0",
    "typescript": "~5.2.2"
  }
}

Ventajas

  • Facilita el desarrollo de aplicaciones complejas.
  • Agrega la posibilidad de definir tipos (string, number, boolean etc.) a las variables que creamos. Con esta característica nos permite identificar problemas en nuestras aplicaciones en tiempo de compilación. Esta característica ayuda que nuestro programa sea más legible.
    El origen del nombre de este lenguaje "TypeScript" es por la posibilidad de definir tipos (Type) a las variables.
  • Definición de sintaxis más claras en la declaración de clases y sus propiedades.
  • Definición de herencia de clases e implementación de interfaces.
  • Definición propiedades privadas, protegidas y públicas.
  • Captura de errores cuando se compila el programa en TypeScript.

TypeScript es un lenguaje creado por Microsoft y de distribución libre, el sitio oficial del lenguaje donde podemos consultar su documentación más actual está aquí. De todos modos recordemos que no necesitamos descargarlo e instalarlo ya que Angular CLI siempre hace esto por nosotros cada vez que creamos un proyecto.