Typescript es una tecnología que nos da la posibilidad de trabajar de forma mas robusta y consistente, agregando validaciones por encima de la libertad que permite Javascript. En este articulo vamos a ver como agregarlo a un proyecto existente, y entender un poco de que trata esta configuración que vamos a estar agregando.

Para que usar Typescript?

Typescript es un lenguaje de programación que tiene todo lo que tiene Javascript, y le agrega un poco mas de sintaxis que nos permite de forma opcional especificar tipos a las variables y parámetros del código que vamos escribiendo.

Es una herramienta ampliamente utilizada, que muchos IDEs adoptaron para poder brindar la facilidad de detectar errores antes de pasar por el proceso de buildeo y de ejecución. Con el manejo de tipos en un proyecto se pueden detectar bugs al momento de escribir el código, lo cual reduce considerablemente los tiempos de desarrollo en proyectos de mediano o gran calibre.

Por otro lado, Typescript nos provee un compilador, llamado tsc. Con este Typescript transforma toda la sintaxis escrita en este lenguaje a código Javascript que los navegadores pueden entender y procesar. En este proceso de transformación de un lenguaje a otro, el compilador busca y detecta distintos tipos de errores que pueden o no frenar el proceso de compilación. Esto ultimo depende de la configuración que nosotros agreguemos al proyecto, o si son errores propios de Javascript o del manejo de los tipos.

Agregar Typescript a un proyecto

Lo primero que hay que hacer para poder usar esta tecnología es agregar la dependencia, para esto a la altura de nuestro proyecto escribimos los siguientes comandos:

npm i -D typescript

que viene a significar lo mismo que:

npm install --save-dev typescript

Y teniendo Typescript agregado al proyecto, es posible que al momento de compilar, no encuentre los tipos de las demás dependencias que typescript requiera para poder hacer la transpilacion.

 

En caso de ser necesario, para agregar los tipos de las distintas dependencias, se hace también mediante npm. Por ejemplo en caso de que estemos usando la versión 4.1.1 de Express:

npm i -D @types/express@4.1.1

La misma sintaxis aplica a todas las dependencias. De todas formas, Typescript sugiere el comando que hay que escribir en la consola en caso de encontrarse con esta situación.

 

Una vez agregada las dependencias, lo que sigue es agregar lo que Typescript necesita como configuración para ejecutar su compilador. Para eso hay que agregar un archivo llamado tsconfig.json a la altura de la raíz del proyecto.

Una forma rapida de agregar este archivo de forma bien redactada es usando el comando

tsc --init

 

A continuación veamos un archivo tsconfig.json y sus distintos atributos. Estos van a funcionar como directivas para el compilador al momento de crear el proyecto.

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es6",
        "outDir": "dist", 
        "strict": true,
        "noImplicitAny": false,
        "strictNullChecks": true,
        "strinctFunctionTypes": true,
        "alwaysStrict": true, 
        "removeComments": true,
    },
    "include": ["src/**/*"],
    "exclude": ["node_modules", "**/*.spec.ts"]
}

 Veamos que significan estos atributos:

module: Especifica el método de generación de código del modulo. En este caso, Node utiliza commonjs.

target: Con esta directiva le estamos diciendo a Typescript a que versión de Javascript hacer la transformación. Por defecto apunta a la versión de ECMAScript 5, que es una versión que prácticamente todos los navegadores soportan actualmente.

outDir: Hace referencia a la carpeta en donde se va a crear el archivo con el output del compilador.

 strict: Con esta directiva estamos activando todos los flags de rigurosidad de javascript.

noImplicitAny: Es una regla de rigurosidad que no permite que haya variables sin tipos asignados.

strictNullChecks: Se utiliza para obligar a especificar cuando una variable puede tomar el valor de null o undefined.

strictFunctionTypes: Se utiliza para obligar a especificar la forma que tiene que tener una funcion, es decir, los tipos de los parametros y del valor de retorno.

alwaysStrict: El codigo de Javascript se crea en modo estricto.

include/exclude: Se utiliza cuando se quiere especificar bien en donde tiene que buscar el compilador los archivos a transformar, y cuales tiene que ignorar.

 

Crear el proyecto

Para usar el compilador de Typescript, es necesario usar tsc por consola, el cual compilara y transpilará todo el código escrito en Typescript del proyecto y lo transformara en un archivo Javascript.

Una forma sencilla de hacer esto es agregar un script de npm en el package.json. A continuacion podemos ver un ejemplo de la forma que tendría:

{
    "name": 'nombre-del-proyecto",
    "version": "1.0.0",
    "description: "",
    "author": "",
    "scripts": {
        "start": "tsc && node dist/app.js"
    },
    "devDependencies": {
         "typescript": "3.3.3",
         "@types/express": "4.1.1"
    },
    "dependencies": {
        "express": "4.1.1"
    }
}

 

Nótese que dentro de la sección scripts se añadió el comando start, con este se compilara el proyecto, se generara el output de Typescript y por ultimo ejecutara este código Javascript escribiendo el siguiente comando:

npm start

Conclusión

En estos pasos hemos agregado Typescript de forma sencilla a nuestro proyecto.

Para indagar mas sobre que configuraciones pueden agregarse y para que sirven, recomiendo leer este articulo de la documentación.