Typescript llegó para quedarse y añadirlo a express es una de las mejores cosas que se puede hacer.

Partimos con generador de Express

Aquí sin complicaciones. La mejor opción es utilizar el asistente de express con las siguientes opciones:

-e Añade el motor de rederizado (para este caso ejs) -v Añade vistas con el motor que se escoja (para este caso ejs) -c Añade el motor de estilos (en este caso sass) —git Añade un git ignore

npm install -g express-generator 
express -e ejs -v ejs -c sass --git my-app

Ahora acceder, instalar dependencias y ejecutar.

cd my-app
yarn install
DEBUG=ejs:* npm start

Y como de costumbre, su visita al http://localhost:3000 para ver el resultado.

Ahora sí, su Typescript

Quizás, más pronto que tarde este paso este incluido en el generador. Por mientras, aquí están los paquetes que instalé:

yarn add -D \
@types/cookie-parser \
@types/debug \
@types/express \
@types/http-errors \
@types/morgan \
@types/node \
nodemon \
typescript \
ts-node

En resumen,

@types/*: Son los types para que Typescript verifique los tipos de las librerías nodemon: Para actualizar cambios typescript: Por que Typescript es importante si queremos programar en Typescipt. ts-node: Para transpilar el código a Javascript.

Ajusta el script start en package.json para probar.

"start": "NODE_ENV=development ts-node ./bin/www",

Quizás te arroje uno que otro error o advertencia, pero te seguro que será algo puedas resolver.

Linter, es tu momento.

Antes de ajustar a ciegas el código, ¿para que luchar a ciegas si ESLint te puede hacer la pega?

Otra vez… a instalar su secuencia de paquetes:

yarn add -D \
@typescript-eslint/eslint-plugin \
@typescript-eslint/parser \
eslint \
eslint-config-prettier \
eslint-plugin-prettier \
prettier

Y otra vez… en resumen,

@types/*: Son los types para que Typescript verifique los tipos de las librerías eslint: Porque necesitamos un linter y en este caso será eslint pretier: Para que el complemento pueda jugar con nuestro código eslint-config-prettier: porque sí… eslint-plugin-prettier: y porque sí!

Prepara tu Visual Studio

Intala los siguientes complementos en tu Visual Studio para que todo ande bien.

• ESLInt
• prettier
• Prettier ESLint

Casi Casi… Falten los archivos de configuración.

Sí aún falta. XD!

Para que ESLint funcione hay que tener unos archivos de configuración en tu proyecto.

Acá te dejo los mios. Copialos y luego, en el futuro los ajustas.

Ahora la prioridad es programar!!

.eslintrc.js: Configura ESLint

module.exports = {
  parser: '@typescript-eslint/parser', // Specifies the ESLint parser
  parserOptions: {
    ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features
    sourceType: 'module', // Allows for the use of imports
  },
  extends: [
    'plugin:@typescript-eslint/recommended', // Uses the recommended rules from the @typescript-eslint/eslint-plugin
    'prettier', // Uses eslint-config-prettier to disable ESLint rules from @typescript-eslint/eslint-plugin that would conflict with prettier
    'plugin:prettier/recommended', // Enables eslint-plugin-prettier and eslint-config-prettier. This will display prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array.
  ],
  ignorePatterns: ['**/log/*', '**/node_modules/*', '**/build/*'],
  rules: {
    // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
    // e.g. '@typescript-eslint/explicit-function-return-type': 'off',
    quotes: [1, 'single', { avoidEscape: true }],
    'jsx-quotes': [1, 'prefer-single'],
    'prettier/prettier': [
      'warn',
      {
        singleQuote: true,
        semi: true,
      },
    ],
  },
};

.prettierrc: Configura Prettier

{
  "useTabs": false,
  "semi": true,
  "trailingComma": "all",
  "singleQuote": true,
  "printWidth": 120,
  "tabWidth": 2
}

settings.json: Configura Visual Studio Code

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

tsconfig.json: Configura Typescript

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "rootDir": "./",
    "outDir": "./build",
    "esModuleInterop": true,
    "strict": true,
    "types": ["node"]
  }
}

Casi Casi Casi…

Ok ESLint te hará la vida difícil por un par de horas entre advertencias y errores, pero la ventaja es que aprenderás más Typescript que días leyendo documentación o viendo tutoriales.

Así que te dejo lo pasos finales,

1.- Actualiza los scripts del Package.json. Acá te dejo los que tengo yo:

"scripts": {
    "prestart": "yarn lint",
    "start": "NODE_ENV=development DEBUG=ejs:* ts-node ./bin/www",
    "prebuild": "yarn lint",
    "build": "tsc --project ./",
    "start:prod": "NODE_ENV=production node ./build/bin/www",
    "deploy": "scp -r ../api raspberry:/opt",
    "lint": "eslint '*/**/*.{js,jsx,ts,tsx}' --quiet --fix"
  },

2.- Convierte los archivos .js en archivos .ts.

3.- Limpia y reordena el código para que todo ande como la seda.

Con eso deberías tener listo tu proyecto de Express con Typescript y ESlint para…

Si no quieres perder tiempo haciéndolo tú mismo aquí puedes descargar la versión estable que ajusté para proyectos futuros.

Dios Mio!! Creo que eso es todo amigos.