Node es un entorno de tiempo de ejecución que hace que sea posible escribir JavaScript en el lado del servidor. Ha logrado una amplia adopción desde su lanzamiento en 2011. Escribir JavaSccript en el servidor puede ser difícil a medida que la base de código crece debido a la naturaleza del lenguaje JavaScript: dinámico y con escritura débil.
Los desarrolladores que llegan a JavaScript desde otros lenguajes a menudo se quejan sobre su falta de escritura estática fuerte, pero aquí es donde entra TypeScript, para cerrar esta brecha.
TypeScript es un superconjunto escrito (opcional) de JavaScript que puede ayudar a la hora de crear y gestionar proyectos JavaScript a gran escala. Puede verse como JavaScript con funciones adicionales como escritura estática fuerte, compilación y programación orientada a objetos.
Nota: TypeScript es técnicamente un superconjunto de JavaScript, lo que significa que todo el código JavaScript es código TypeScript válido.
Aquí tiene algunos beneficios del uso de TypeScript:
En este tutorial, configurará un proyecto Node con TypeScript. Creará una aplicación Express usando TypeScript y la convertirá en un código JavaScript limpio y fiable.
Antes de comenzar con esta guía, necesitará Node.js instalado en su equipo. Puede hacerlo siguiendo la guía Cómo instalar Node.js y crear un entorno de desarrollo local para su sistema operativo.
Para comenzar, cree una nueva carpeta llamada node_project
y entre en ese directorio.
- mkdir node_project
- cd node_project
A continuación, inícielo como proyecto npm:
- npm init
Tras ejecutar npm init
, necesitará suministrar a npm información sobre su proyecto. Si prefiere que npm asuma los valores predeterminados más sensatos, puede añadir el indicador y
para omitir las solicitudes de información adicional:
- npm init -y
Ahora que el espacio de su proyecto está configurado, está listo para instalar las dependencias necesarias.
Con un proyecto npm vacío iniciado, el siguiente paso es instalar las dependencias que se necesitan para ejecutar TypeScript.
Ejecute los siguientes comandos desde el directorio de su proyecto para instalar las dependencias:
- npm install -D typescript@3.3.3
- npm install -D tslint@5.12.1
El indicador -D
es el atajo para: --save-dev
. Puede obtener más información sobre este indicador en la documentación de npmjs.
Ahora es el momento de instalar el marco Express:
- npm install -S express@4.16.4
- npm install -D @types/express@4.16.1
El segundo comando instala los tipos de Express para la compatibilidad con TypeScript. Los Tipos de TypeScript son archivos, normalmente con una extensión .d.ts
. Los archivos se usan para proporcionar información de tipo sobre una API, en este caso el marco Express.
Este paquete es necesario porque TypeScript y Express son paquetes independientes. Sin el paquete @typ/express
, no hay forma de que TypeScript sepa sobre los tipos de clases Express.
En esta sección, configurará TypeScript y configurará un linting para TypeScript. TypeScript utiliza un archivo llamado tsconfig.json
para configurar las opciones del compilador para un proyecto. Cree un archivo tsconfig.json
en la raíz del directorio del proyecto y péguelo en el siguiente fragmento de código:
{
"compilerOptions": {
"module": "commonjs",
"esModuleInterop": true,
"target": "es6",
"moduleResolution": "node",
"sourceMap": true,
"outDir": "dist"
},
"lib": ["es2015"]
}
Vamos a repasar algunas de las claves del fragmento de código JSON anterior:
module
: Especifica el método de generación de código del módulo. Node utiliza commonjs
.target
: Especifica el nivel de lenguaje de salida.moduleResolution
: Esto ayuda al compilador a averiguar a qué se refiere una importación. El valor node
imita al mecanismo de resolución del módulo de Node.outDir
: Esta es la ubicación para los archivos .js
tras la transpilación. En este tutorial, lo guardará como dist
.Una alternativa a crear y popular manualmente el archivo tsconfig.json
es ejecutando el siguiente comando:
- tsc --init
Este comando generará un archivo tsconfig.json
bien redactado.
Para obtener más información sobre las opciones de valor clave disponibles, la documentación de TypeScript oficial ofrece explicaciones sobre cada opción.
Ahora puede configurar el linting de TypeScript para el proyecto. En un terminal que se ejecute en la raíz del directorio de su proyecto, que en este tutorial se estableció como node_project
, ejecute el siguiente comando para generar un archivo tslint.json
.
- ./node_modules/.bin/tslint --init
Abra el archivo tslint.json
recién generado y añada la regla no-console
como corresponda:
{
"defaultSeverity": "error",
"extends": ["tslint:recommended"],
"jsRules": {},
"rules": {
"no-console": false
},
"rulesDirectory": []
}
Por defecto, el linter de TypeScript evita el uso de depuración usando declaraciones console
, por tanto es necesario indicar explícitamente al linter que revoque la regla no-console
predeterminada.
package.json
En este momento del tutorial, puede ejecutar funciones en el terminal individualmente o crear un npm script para ejecutarlos.
En este paso, creará una secuencia de comandos start
que compilará y transpilará el código de TypeScript, y luego ejecutará la aplicación .js
resultante.
Abra el archivo package.json
y actualícelo:
{
"name": "node-with-ts",
"version": "1.0.0",
"description": "",
"main": "dist/app.js",
"scripts": {
"start": "tsc && node dist/app.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"@types/express": "^4.16.1",
"tslint": "^5.12.1",
"typescript": "^3.3.3"
},
"dependencies": {
"express": "^4.16.4"
}
}
En el fragmento de código anterior, actualizó la ruta main
y añadió el comando start
a la sección scripts. Cuando se observa el comando start
, verá que primero se ejecuta el comando tsc
y luego el comando node
. Esto compilará y ejecutará el resultado generado con node
.
El comando tsc
indica a TypeScript que compile la aplicación y coloque el resultado .jso
generado en el directorio outDir
especificado como se establece en el archivo tsconfig.json
.
Ahora que TypeScript y su linter están configurados, es el momento de crear un servidor Node Express.
Primero cree una carpeta src
en la raíz del directorio de su proyecto:
- mkdir src
A continuación cree un archivo llamado app.ts
dentro:
- touch src/app.ts
En este momento, la estructura de la carpeta debería tener este aspecto:
├── node_modules/
├── src/
├── app.ts
├── package-lock.json
├── package.json
├── tsconfig.json
├── tslint.json
Abra el archivo app.ts
con el editor de texto que prefiera y pegue el siguiente fragmento de código:
import express from 'express';
const app = express();
const port = 3000;
app.get('/', (req, res) => {
res.send('The sedulous hyena ate the antelope!');
});
app.listen(port, err => {
if (err) {
return console.error(err);
}
return console.log(`server is listening on ${port}`);
});
El código anterior crea Node Server que escucha las solicitudes sobre el puerto 3000
. Ejecute la aplicación usando el siguiente comando:
- npm start
Si se ejecuta correctamente se registrará un mensaje en el terminal:
- Outputserver is listening on 3000
Ahora, puede visitar http://localhost:3000
en su navegador y debería ver el mensaje:
- OutputThe sedulous hyena ate the antelope!
Abra el archivo dist/app.js
y encontrará la versión transpilada del código TypeScript:
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const express_1 = __importDefault(require("express"));
const app = express_1.default();
const port = 3000;
app.get('/', (req, res) => {
res.send('The sedulous hyena ate the antelope!');
});
app.listen(port, err => {
if (err) {
return console.error(err);
}
return console.log(`server is listening on ${port}`);
});
//# sourceMappingURL=app.js.map
En este momento ha configurado correctamente su proyecto Node para usar TypeScript.
En este tutorial, aprendió por qué TypeScript es útil para escribir un código JavaScript fiable. También aprendió algunos de los beneficios de trabajar con TypeScript.
Finalmente, ha configurado un proyecto Node usando el marco Express, pero compiló y ejecutó el proyecto usando TypeScript.
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!
Sign up for Infrastructure as a Newsletter.
Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.
Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.