En este blog, discutiremos Node.js con mecanografiado. Básicamente, aprenderemos la demostración sobre cómo crear un proyecto con los marcos y el lenguaje de programación mencionados. Antes de continuar, debe asegurarse de tener un conocimiento básico de TypeScript, Node.js y Express. Además, está usando o planea usar Node.js versión 12 o superior.
Lea también: Node js en docker: todo lo que necesita saber
1. Configurar el proyecto
En primer lugar, debe crear un directorio para el proyecto e inicializarlo. Luego, ejecute los siguientes comandos para crear un directorio vacío llamado mecanografiado-nodejs. Tienes que cambiar el directorio actual a él.
mkdir typescript-nodejs cd typescript-nodejs
Ahora debe inicializar nuestro proyecto Node desde el directorio typescript-nodejs. Ejecute el siguiente comando para hacerlo:
npm init -y
Cuando usa el indicador -y en el comando anterior, genera el archivo package.json con los valores predeterminados. npm inicializa el archivo con valores predeterminados que se pueden actualizar más tarde en lugar de agregar información nosotros mismos. Por ejemplo, el nombre y la descripción del proyecto. Después de inicializar el proyecto, podemos agregar las dependencias requeridas ahora.
2. Agregar dependencias
Debe agregar TypeScript y el marco Express. Ejecute los siguientes comandos para hacerlo:
npm install express npm install typescript ts-node @types/node @types/express --save-dev
Cuando instale dependencias relacionadas con TypeScript, se instalará como devDependencies. La razón de esto es que aunque el código está escrito en TypeScript, se compilará como JavaScript “vainilla”. El único uso de TypeScript es durante el desarrollo y no para el tiempo de ejecución. Se instalará como una dependencia de desarrollo ya que TypeScript tiene al desarrollador como su único “consumidor”.
Una vez completadas las instalaciones de dependencia, su paquete.json tendrá el siguiente aspecto:
{
"name": "typescript-nodejs",
"version": "1.0.0",
"description": "",
"main": "index.js",
"dependencies": {
"express": "^4.17.1"
},
"devDependencies": {
"@types/express": "^4.17.9",
"@types/node": "^14.14.20",
"ts-node": "^9.1.1",
"typescript": "^4.1.3"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}3. Configurar mecanografiado
La instalación de TypeScript está completa, pero aún no puede usarlo todavía. Esto se debe a que debe configurarlo primero. Para esto, debe crear un archivo con el nombre de tsconfig.json. Esto indicará que el directorio es la raíz de un proyecto TypeScript o JavaScript.
npx tsc --init
Cuando ejecute el comando anterior, creará el archivo tsconfig.json donde puede personalizar la configuración de TypeScript. La creación de un nuevo archivo contendrá una gran cantidad de código, la mayor parte es comentario. Hay algunas configuraciones importantes que debe conocer:
- objetivo: Con la ayuda de esta opción, puede especificar qué versión de ECMAScript usar en su proyecto. Pongamos un ejemplo, si establece el objetivo en ES5 y luego usa funciones de flecha. El código se compilará en una función ES5 equivalente. Algunas de las versiones disponibles son ES3 (predeterminado), ES5, ES2015, ES2016, ES2017, ES2018, ES2019, ES2020 o ESNEXT.
- módulo: Al usar esta opción, podrá especificar qué administrador de módulos usar después de la generación del código JavaScript. Tiene la opción de elegir entre los siguientes valores none, commonjs, amd, system, umd, es2015, es2020 o ESNext. El módulo predeterminado y más común es commonjs.
- rootDir: esta opción especifica la ubicación de los archivos TypeScript.
- outDir: Con esta opción, podrá especificar dónde generar el código JavaScript “vainilla”.
- esModuleInterop: Esta opción por defecto es verdadera. Tiene la capacidad de controlar la interoperabilidad entre los módulos CommonJS y ES. Puede hacerlo creando objetos de espacio de nombres para todas las importaciones.
- estricto: Esta opción está activada de forma predeterminada. Y alterna las opciones estrictas de verificación de tipo.
4. Crea un servidor Express
Ahora que hemos terminado con Typescript, podemos crear el servidor web Express. Para eso, debemos crear el index.ts (atención a la extensión del archivo) ejecutando touch index.ts.
import express from 'express';
const app = express();
app.get('/', (req, res) => {
res.send('Well done!');
})
app.listen(3000, () => {
console.log('The application is listening on port 3000!');
})Un simple servidor web le mostrará “¡Bien hecho!” después de acceder a localhost:3000 un navegador. El servidor es muy simple y no aprovecha TypeScript al menos no todavía. Pero el motivo de este blog es hacer que Node.js, TypeScript y Express trabajen juntos y creen un estándar. La aplicación se personalizará desde allí.
Cuando desee ejecutar la aplicación después de realizar cambios, debe compilar TypeScript en JavaScript “vainilla”. Ejecute el siguiente comando para hacerlo:
npx tsc --project ./
Puede compilar TypeScript a JavaScript usando el comando tsc. El indicador –project especifica desde dónde puede elegir los archivos TS. Y por último pero no menos importante, ./ especifica la raíz del proyecto.
Verá la compilación del código JavaScript cuando acceda a la carpeta de compilación. Esta es la compilación del código del código TypeScript que escribió.
5. Crear guiones
Será difícil para usted escribir npx tsc –project ./ cada vez durante la compilación del código. Para automatizar esto, puede agregar un script a package.json que se encargará de ello.
Solo tiene que agregar la siguiente línea de código en package.json en scripts para automatizar la compilación del código TypeScript en JavaScript:
"build": "tsc --project ./"
Ahora, para la compilación del código, puede ejecutar npm run build. Hará su tarea más fácil y sencilla.
Conclusión
Al usar este método, puede usar fácilmente Node.js con mecanografiado. Además, esto que explicamos es solo la punta del iceberg y puede crear fácilmente cualquier aplicación que desee desde aquí. Esperamos que esta información sea útil. Gracias por la lectura.
