Creación de un proyecto con TypeScript

Índice

1. Utilizar TypeScript
   1. Instalar TypeScript
   2. Configurar TypeScript
   3. Compilar el proyecto
   4. Trabajar en modo desarrollo
2. Controlar la calidad del código
   1. Instalar TSLint
   2. Configurar TSLint
   3. Añadir la extensión TSLint al editor de código
   4. Utilizar la guía de estilo de Airbnb
3. Utilizar gts (Google TypeScript Style) [en versión beta]
4. Utilizar ts-node

---

1. Utilizar TypeScript

1.1. Instalar TypeScript

En primer lugar, vamos a descargar TypeScript como dependencia local del proyecto.

> npm i -D typescript

1.2. Configurar TypeScript

TypeScript trae consigo dos binarios: tsc y tsserver. tsc es el compilador de TypeScript. Para inicializar un proyecto TypeScript usar el flag --init:

> ./node_modules/.bin/tsc --init

Si nuestra versión de npm es superior a la 5.2, se puede hacer uso de la herramienta npx para ejecutar binarios dentro de ./node_modules/.bin/.

> npx tsc --init

Como resultado de ejecutar el comando anterior se creará el fichero tsconfig.json en el directorio raíz de nuestro proyecto. Este fichero permite configurar el compilador tsc. Editaremos dicho fichero para que quede de la siguiente manera:

{
  "files": [
    "src/index.ts"
  ],
  "include": [
    "src/**/*.ts"
  ],
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "sourceMap": true,
    "outDir": "dist",
    "rootDir": "src",
    "removeComments": true,
    "strict": true,
    "moduleResolution": "node",
    "baseUrl": "./",
    "paths": {
      "*": [
        "node_modules/@types/*",
        "./src/types/*"
      ]
    },
    "typeRoots": [ "node_modules/@types" ]
  }
}

1.3. Compilar el proyecto

Independientemente de si nuestro proyecto se va a ejecutar en un cliente web o del lado del servidor (Node.js), será necesario compilarlo. Para ello, una vez hayamos indicado nuestras preferencias de compilación en el fichero tsconfig.json, basta con ejecutar el compilador tsc.

> npx tsc

1.4. Trabajar en modo desarrollo

A fin de no tener que recompilar explícitamente nuestro proyecto cada vez que modifiquemos el código, se puede ejecutar el compilador en watch mode para que compile cada vez que detecte un cambio.

> npx tsc -w

2. Controlar la calidad del código

Con el fin de escribir mejor código y de controlar el estilo del código del equipo, vamos a utilizar el linter TSLint junto a la guía de estilos de Airbnb (Airbnb style-guide for tslint).

2.1. Instalar TSLint

Vamos a descargar TSLint como dependencia local del proyecto.

> npm i -D tslint

2.2. Configurar TSLint

Para inicializar la configuración de TSLint usaremos el flag --init:

> npx tslint --init

Como resultado de ejecutar el comando anterior se creará el fichero tslint.json en el directorio raíz de nuestro proyecto. Este fichero permite configurar el linter tslint.

2.3. Añadir la extensión TSLint al editor de código

Si queremos ver la información que ofrece el linter mientras escribimos código es necesario añadir a nuestro editor de código* la extensión TSLint. Una vez que añadamos la extensión a nuestro editor necesitaremos recargarlo.

*Se recomienda el uso de Visual Studio Code.

2.4. Utilizar la guía de estilo de Airbnb

Añadir reglas manualmente al fichero de configuración del linter, tslint.json, es laborioso. Lo más habitual es reutilizar configuraciones conocidas y ampliamente aceptadas como la creada por Airbnb.

Para poder utilizar la guía de estilo de Airbnb primero debemos descargarla como dependencia local del proyecto.

> npm i -D tslint-config-airbnb

Una vez descargada la guía de estilo, debemos dejar el fichero tslint.json como se muestra a continuación:

{
    "defaultSeverity": "error",
    "extends": "tslint-config-airbnb",
    "jsRules": {},
    "rules": {
        "eofline": false
    },
    "rulesDirectory": []
}

Es habitual utilizar la extensión Prettier como complemento a TSLint. En ese caso debemos descargar tslint-config-prettier y editar el fichero tslint.json como se muestra a continuación.

npm i -D tslint-config-prettier

{
  "defaultSeverity": "error",
  "extends": [
    "tslint-config-airbnb",
    "tslint-config-prettier"
  ],
  "jsRules": {},
  "rules": {
    "eofline": false
  },
  "rulesDirectory": []
}

3. Utilizar gts (Google TypeScript Style) [en versión beta]

Como acabamos de ver, para trabajar con TypeScript necesitamos configurar adecuadamente el fichero tsconfig.json y es muy recomendable instalar tslint, lo cual implica configurar adecuadamente el fichero tslint.json. Google ha creado el proyecto gts para automatizar la instalación y configuración de TypeScript y de TSLint junto a su guía de estilo.

Para utilizar gts lo primero que debemos hacer es descargarlo como una dependencia local:

> npm i -D gts [email protected]

Una vez descargado, podremos inicializar un proyecto con TypeScript ejecutando el siguiente comando*:

> npx gts init

*El comando anterior genera el fichero package.json en caso de que no exista.

Para que tslint funcione con el editor, necesitaríamos añadir manualmente el siguiente fichero tslint.json a nuestro directorio raíz:

{
  "defaultSeverity": "error",
  "extends": [
    "./node_modules/gts/tslint.json"
  ],
  "jsRules": {},
  "rules": {},
  "rulesDirectory": []
}

4. Utilizar ts-node

En caso de que estemos desarrollando un proyecto en Node.js, necesitaríamos compilar el proyecto antes de poder ejecutarlo. Cada vez que efectuásemos un cambio en el código necesitaríamos recompilar el proyecto antes de volver a ejecutarlo. Existe una herramienta, ts-node, que permite ejecutar directamente el código TypeScript.

Para poder utilizar ts-node primero debemos descargarlo como una dependencia local:

> npm i -D ts-node

Una vez descargado, podremos ejecutar nuestro proyecto con la siguiente instrucción:

> npx ts-node ./src/index.ts