typeScript (1): introducción

Comenzamos con typeScript ^^

Stanley Boxer

archivado en: JavaScript / 28 agosto, 2016 / taller:

Durante años javaScript ha sido un lenguaje sencillo comparado con otros lenguajes pesados como java o c++. Como también sucedía con php, era un lenguaje asilvestrado donde las cosas se podían hacer de varias maneras igual de válidas, lo cual tiene sus virtudes, pero también sus inconvenientes, sobre todo en el desarrollo de grandes aplicaciones corporativas, donde el free style termina conduciendo a pantanos inmantenibles e inescalables que tarde o temprano hay que refactorizar por completo.

El nuevo estándar de ECMAScript, ES6 Harmony, ha supuesto algunos avances en este sentido, pero lo cierto es que para lo bueno y para lo malo sigue siendo un lenguaje muy elástico. Y esta ha sido una de las razones por las que el equipo de desarrollo de angular ha incorporado a la versión 2 del framework -si es que puede seguir llamándose así- un metalenguaje llamado typeScript.

TypeScript nació hacia octubre del 2012, ligado a Microsoft, con la intención de incorporar a javaScript características de otros lenguajes más rígidos y, por lo tanto, más robustos, como las variables tipadas o los interfaces. Es tema de discusión si esto es bueno o malo o, incluso, si es necesario con lo que traen y traerán las nuevas versiones de javaScript, pero el caso es que debemos conocerlo si queremos lidiar con la versión 2 de angular, al menos de momento, por lo que le dedicaré un par de entradas al tema. Y sin más preámbulos, al lío ^^.

Hola mundo

Lo primero es instalar el tinglado que necesitaremos, ya sea descargándolo directamente o con npm.

npm install -g typescript

Además, dado que es un metalenguaje que debemos compilar o transpilar o cómo diantres se diga la acción de traducir, conviene instalar algún tipo de servidor-watcher que se relance con los cambios, como live-server, pues de lo contrario se pierde mucho tiempo con la consola.

npm install -g live-server

Otra opción es lanzar el propio watcher de tsc. Aunque no recarga el navegador, recompila los archivos cuando se guardan los cambios.

tsc --watch

Si se va a usar typeScript al margen de angular, también se puede integrar con el workflow gulpiano.

Preparamos el html donde enlazaremos el js, es decir, los archivos ts traducidos.

<!doctype html>

<html class="no-js" lang="">

<head>

<meta charset="utf-8">

<meta http-equiv="x-ua-compatible" content="ie=edge">

<title>typeScript</title>

<meta name="description" content="">

<meta name="viewport" content="width=device-width, initial-scale=1">

</head>

<body>

<script src="app.js" async defer></script>

</body>

</html>

Ahora, en un archivo con extensión .ts preparamos nuestro hola mundo typescriptiano. Algo así, por ejemplo:

/* app.ts */

let foo: string = 'foo';

document.body.innerHTML = foo;

El editor Visual Studio Code viene ya de fábrica preparado para trabajar con typeScript, pero también se pueden usar otros, como el sublime, instalando plugins.

Por último, solo nos falta compilar el archivo .ts a uno .js, que es el que entiende el navegador.

tsc app.ts

El compilador se pone en marcha y, ale op, en un periquete nos traduce el código a javaScript.

var foo = 'foo';

document.body.innerHTML = foo;

tsconfig.json

No es necesario, pero sí que nos puede venir bien añadir en el proyecto un archivo de configuración -tsconfig.json- en el que adecuemos algunos detalles a lo que realmente necesitamos. Como suele ser habitual, podemos crearlo desde cero o dejar que la máquina trabaje por nosotros:

tsc --init

Este archivo tiene 4 claves en la raíz:

  1. files: un array donde indicamos los archivos ts o tsx (react) que debe compilar. Si no se especifica ninguno, compila todos los que encuentra, por lo que puede ser muy útil en aplicaciones grandes indicar aquí los que estamos trabajando en cada momento para ahorrarnos el tiempo que tardaría en traducirlos todos.
  2. exclude: justo al contrario, un array para indicar qué directorios debe obviar.
  3. compileOnSave: de momento solo funciona con algunos IDEs y sirve para que compile al guardar. Se puede conseguir lo mismo con el propio watcher de tsc que vimos antes.
  4. compilerOptions: un jasonako con tropecientas mil opciones para configurar la compilación, como que elimine los comentarios o pase determinadas reglas formales. En la documentación oficial vienen todas detalladas, por lo que no las repito aquí.

Por ejemplo, nuestro primer tsconfig.json podría parecerse a este:

{

"compilerOptions": {

"module": "commonjs",

"target": "es5",

"noImplicitAny": false,

"sourceMap": true,

"pretty": true

},

"files": ["app.ts"],

"exclude": ["node_modules"]

}

Bueno, pues por hoy lo dejo aquí.

|| Tags:

valoración de los lectores sobre typeScript (1): introducción

  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración negativa
  • 3.7 sobre 5 (3 votos)

¿Te ha parecido útil o interesante esta entrada?
dormido, valoración 1 nadapensativo, valoración 2 un poco sonrisa, valoración 3 a medias guiño, valoración 4 bastante aplauso, valoración 5 mucho

Tú opinión es muy importante, gracias por compartirla!

Aportar un comentario


*