Bienvenido, les saluda Luis y aquí les traigo este nuevo artículo.
Hoy les mostraré cómo configurar un proyecto Express.js con Typescript. Antes de sumergirnos en los detalles técnicos, hagámonos una pregunta:
Índice
¿Por qué queremos usar TypeScript?
Como desarrollador, siempre queremos que nuestro código esté libre de errores. O al menos, queremos evitar la aparición de errores debido a nuestros tontos errores. Además, el código debe ser extensible, fácil de mantener y altamente legible, lo que es tan fácil como leer en inglés simple, pero no como mirar un montón de espaguetis.
TypeScript es el superconjunto de Javascript y ofrece las siguientes ventajas:
- Estático escrito
- Funciones de programación orientadas a objetos mejoradas
El lenguaje de tipo estático permite que la comprobación de la escritura se realice durante la fase de codificación del ciclo de desarrollo, de modo que los errores se puedan encontrar temprano. Dado que Javascript es un lenguaje de escritura dinámica que no realiza la verificación de escritura, pueden ocurrir algunos errores debido a la conversión de tipo implícita.
Typecript también mejoró la función OOP de Javascript, lo que permite al desarrollador utilizar los «modificadores de acceso» (privado, público, protegido) para controlar la accesibilidad del miembro de datos en la clase, para aplicar «herencia» o definir «interfaz» para mejorar la reutilización del código, y como lo hacen los otros lenguajes de programación orientada a objetos, como Java y C #.
Es por eso que Typecript puede ayudarnos a lograr lo que deseamos. Comencemos a crear su primer proyecto Express.js usando Typescript.
Descripción del proyecto
├── módulos_nodo
├── package.json
├── package-lock.json
├── src
│ ├── controlador
│ ├── modelo
│ └── prueba
└── tsconfig.json
En esta demostración, se asume que queremos construir un servidor API ligero y comprobable que sirva para los requisitos de los clientes frontend. Yo personalmente prefiero usar Arquitectura MVC dividir el software en tres partes principales con diferentes responsabilidades. Como la interfaz de usuario será manejada por los clientes frontend, la carpeta «Ver» no es necesaria en el proyecto.
1. Crear package.json
npm init
2. Instale el paquete requerido
npm i --save express @types/express typescript ts-node jest ts-jest supertest @types/supertest
Descripción de los paquetes
- express: El marco web para nuestro servidor
- @ types / express: La definición mecanografiada de express
- mecanografiado: El paquete de idioma de Typecript
- ts-node: Ejecución de TypeScript y REPL para node.js
- jest: Marco de prueba de JavaScript para pruebas unitarias
- ts-jest: Preprocesador TypeScript de broma
3. Cree tsconfig.json
Este archivo se utiliza para configurar el compilador de TypeScript que transpila el código de Typecript a Javascript. En este proyecto, se utilizará la siguiente configuración, los detalles de cada configuración se pueden encontrar aquí:
tsconfig.json
{ "compilerOptions": { "target": "es2018", "module": "commonjs", "rootDir": "./src", "outDir": "./dist", "strict": true, "esModuleInterop": true }, "include": [ "./**/*.ts" ], "exclude": [ "node_modules" ] }
4. Cree sus archivos de origen en src
src / index.ts
import express, Application, Request, Response, Router from 'express'; const app:Application = express(); const router: Router = express.Router(); router.get('/', (req: Request, res: Response): void => {res.send('Hello, World');}); app.use(router); console.log('The Server is listening on the port 3000'); app.listen(3000);
5. Compilar y ejecutar
Escriba los siguientes comandos y vaya a localhost: 3000. Debería ver «Hola, mundo» 😆 😆
tsc // compile all the ts-file in the working directory node dist/index.js // run the compiled JS file
Haz nuestra vida más fácil
Deje modificar el package.json para agregar el script de ejecución npm para escribir comandos menores:
... "scripts": { ... "start": "npm run build && node dist/index.js", "build": "rimraf ./dist && tsc" } ...
Nosotros podemos usar npm run build
para construir el proyecto y npm run start
para construir y ejecutar el servidor ahora.
Recarga en caliente en tiempo real
Durante la fase de desarrollo, el código debe cambiarse con frecuencia y es muy molesto teclear el comando cada vez para reflejar los cambios. Entonces, usemos alguna biblioteca para ayudarnos: Nodemon. Es una herramienta que puede ayudarnos a reiniciar el proyecto cuando algún archivo haya cambiado. Puede seguir las instrucciones a continuación para instalar y configurar esta herramienta.
Instalación de nodemon
npm i --save nodemon // install the nodemon package
Crear nodemon.json
{ "ignore": ["**/*.test.ts", "**/*.spec.ts", ".git", "node_modules"], "watch": ["src"], "exec": "ts-node ./src/index.ts", "ext": ".ts,.js" }
Agregue un script más a package.json
... "scripts": { ... "dev": "nodemon" } ...
Cuando escribes npm run dev
, el servidor se está ejecutando nuevamente, si intenta cambiar el código fuente, ¡se volverá a compilar!
Pruebas, pruebas y pruebas
Las pruebas son de vital importancia en el desarrollo de software, y la gente está hablando de TDD hoy en día que no solo se usa para validar la corrección del software, sino que también hace que el código sea más modular, flexible y fácil de mantener. Integremos el marco de prueba, Jest, al proyecto.
Configurar el marco
module.exports = { preset: 'ts-jest', testEnvironment: 'node', coverageDirectory: "coverage", testRegex: "(/tests/.*|(\\.|/)(test|spec))\\.ts" };
Escribe una prueba unitaria simple
src / sum.ts
type sumType = (a: number, b: number) => number; const sum: sumType = (a, b) => a + b; export default sum;
prueba / suma.prueba.ts
import sum from '../sum';test('1 + 1 = 2', ()=> { let x: number = 1, y: number = 1; let expected:number = 2; let actual:number = sum(x, y); expect(actual).toBe(expected); });
Agregue el script de prueba a package.json
... "scripts": { ... "test": "jest --coverage" } ...
Cuando corres npm run test
, debería poder ver el siguiente resultado de la prueba:
Resumen
Ahora debería poder construir su aplicación express.js utilizando Typescript con la integración del marco de prueba para mejorar la confiabilidad de su aplicación. La configuración completa del proyecto está en este repositorio.
Codificación feliz.
Añadir comentario