Cómo usar TypeScript en CAP

¡Hola!

¡Cuánto tiempo sin escribir! Hoy os voy a resumir todas las configuraciones que he llevado a cabo para utilizar TypeScript en mi proyecto de CAP.

Primero os resumo un poco qué es TypeScript aunque entiendo que si estáis leyendo este artículo es porque sabéis qué es y estáis interesados en usarlo en CAP :). Es importante primero que seáis consciente que TypeScript NO nos resuelve los errores en JavaScript, sino que ayuda al programador a poder acotar mucho los errores en tiempo de desarrollo (que es una de las principales carencias de JavaScript, que para ver los errores tienes que estar ejecutando la app) ¿y esto como lo consigue? Pues básicamente añadiendo validaciones al propio javascript y ayudándonos a tipar nuestro javascript.

Lo primero es instalarte la librería ts-node
```
npm i -g typescript ts-node
```

Lo siguiente es crear el archivo tsconfig.json en el directorio principal de vuestro proyecto (raíz), en este archivo se configura TypeScript y hay bastantes parámetros para marcar por ejemplo validaciones en el código (si quieres marcar los nulos como error, los undefined, etc) y otras características interesantes que os invito que exploréis por vosotros mismos en este link.
Os comento los que yo estoy informando por ahora, algunos se para que sirven, otros no tanto pero esto es ir jugando y leyendo la documentación:

{
    "compilerOptions": {
        "target": "es6", //Ajusta la versión de JavaScript para el código que transpila typescript
        "module": "commonjs", //especifica qué module code se genera
        "rootDir": "./srv", //de donde salen los ficheros .ts que se deben transpilar
        "baseUrl": "./", //especifica el directorio base para resolver nombres de módulos no relativos
        "moduleResolution": "node", 
        "skipLibCheck": true,  //validaciones
        "preserveConstEnums": true, //validaciones
        "sourceMap": true, //este es muy importante!! crea un mapeo entre el .ts y el .js más adelante os explico para qué sirve
        "allowJs": true, //validaciones
        "strict": true, 
        "strictNullChecks": true, //validaciones
        "strictPropertyInitialization": true, //validaciones
        "esModuleInterop": true
    },
    "include": [
        "./srv/**/*" //las carpetas que se incluyen en la transpilación
    ]
}

⚠️Como consejo, intentad tener el archivo tsconfig.json lo más restrictivo posible, esto hará que se validen más aspectos en typescript y haya menos margen de error

En este punto ya podríamos ejecutarlo con los comandos:
```
cds-ts serve world.cds

cds-ts watch
```

Como comentaba antes este parámetro “sourceMap” es muy útil, ya que si lo activamos lo que hará es crear un archivo .js.map que mapea el js transpilado con su correspondiente .ts ¿y esto qué quiere decir? Pues quiere decir 2 cosas:

Podré poner breakpoints en mi .ts
Cuando me salte un error aunque me esté saltando en el archivo .js (recordemos que esto al final es lo que corre en el navegador) tendremos la línea correspondiente al fichero .ts

Colocando este parámetro a true nos quitará bastantes dolores de cabeza a la hora de depurar nuestra aplicación.😉

Además también se pueden crear varios tsconfig.json y hacer que se extiendan, por ejemplo tengo dos entornos y en cada uno quiero aplicar una configuración de typescript diferente, pues lo suyo sería crear un fichero tsconfig.base.json (que contendrá toda la parametrización común) y el resto, por ejemplo, tsconfig.test.json o tsconfig.prod.json. Ejecutando el siguiente comando ajustaremos este fichero a lo que nos convenga.

tsc -p tsconfig.test.json

Enlaces de interés:

¡Hasta la próxima!🚀

Leave a Reply Cancel reply