Cómo usar TypeScript con Node.js: The Dynamic Duo para desarrollo web

TypeScript se está abriendo camino como uno de los lenguajes de programación más populares para las organizaciones modernas. 

Mecanografiado es un superíndice de JavaScript compilado y estrictamente tipado (construido sobre el lenguaje JavaScript). Este lenguaje de tipado estático, desarrollado y mantenido por Microsoft, admite conceptos orientados a objetos como su subconjunto, JavaScript. 

Este lenguaje de programación de código abierto tiene muchos casos de uso, como la creación de aplicaciones web, a gran escala y móviles. TypeScript se puede usar para el desarrollo de frontend y backend. También tiene varios marcos y bibliotecas que simplifican el desarrollo y amplían sus casos de uso. 

¿Por qué usar TypeScript con Node.js? Este artículo discutirá por qué TypeScript se considera "mejor" que JavaScript, cómo instalarlo usando Node.js, configurar y crear un pequeño programa usando TypeScript y Node.js. 

TypeScript with Node.js: Benefits

• Escritura estática opcional: JavaScript se escribe dinámicamente, lo que significa que el tipo de datos de una variable se determina en tiempo de ejecución y no durante el tiempo de compilación. Por otro lado, TypeScript ofrece escritura estática opcional, lo que significa que una vez que declaras una variable, no cambiará su tipo y solo tomará ciertos valores. 
• Previsibilidad: Cuando se trata de TypeScript, existe la seguridad de que todo lo que defina seguirá siendo el mismo. Por ejemplo, si declara una determinada variable como booleana, nunca puede cambiar a una cadena en el camino. Como desarrollador, tiene la seguridad de que sus funciones seguirán siendo las mismas. 
• Fácil de detectar errores temprano: TypeScript detecta la mayoría de los errores tipográficos de manera temprana, por lo que su probabilidad de pasar a producción es baja. Esto reduce el tiempo que los ingenieros dedican a probar el código en etapas posteriores. 
• Compatible con la mayoría de los IDE: TypeScript funciona con la mayoría de los entornos de desarrollo integrados (IDE). La mayoría de estos IDE proporcionan finalización de código y resaltado de sintaxis. Este artículo utilizará Código de Visual Studio, otro producto de Microsoft. 
• Código fácil de refactorizar: Puede actualizar o refactorizar su aplicación TypeScript sin cambiar su comportamiento. La presencia de herramientas de navegación y el IDE que comprende su código facilita la refactorización de la base de código sin esfuerzo. 
• Utiliza paquetes existentes: No tienes que crear todo desde cero; puede usar paquetes NPM existentes con TypeScript. Este lenguaje también tiene una comunidad sólida que mantiene y crea definiciones de tipos para paquetes populares. 

How to use TypeScript with Node.js

Aunque TypeScript tiene estas ventajas, los navegadores modernos no pueden leer su código en forma simple. Por lo tanto, el código TypeScript debe transpilarse primero a código JavaScript para ejecutarse en los navegadores. El código resultante tendrá la misma funcionalidad que el código TypeScript original y funcionalidades adicionales que no están disponibles en JavaScript. 

Requisitos previos 

• Nodo.js: Node es un entorno de tiempo de ejecución multiplataforma que permite ejecutar código JavaScript fuera de un entorno de navegador. Puede verificar si el nodo está instalado en su máquina usando este comando;

node -v

De lo contrario, puedes descargar Node.js del sitio web oficial. Ejecute el comando anterior nuevamente después de la instalación para verificar si se ha configurado correctamente. 

• Un administrador de paquetes de nodos: Puede usar NPM o Yarn. El primero se instala por defecto cuando instalar Node.js. Usaremos NPM como administrador de paquetes en este artículo. Use este comando para verificar su versión actual;

npm -v

Instalación de TypeScript con Node.js

Paso 1: configurar una carpeta de proyecto

Comenzaremos creando una carpeta de proyecto para el proyecto de TypeScript. Puede dar a esta carpeta el nombre que desee. Puede usar estos comandos para comenzar;

mkdir typescript-node

cd typescript-node

Paso 2: Inicializar el proyecto

Use npm para inicializar su proyecto usando este comando;

npm init -y

El comando anterior creará un archivo package.json. El indicador -y en el comando le dice a npm que incluya los valores predeterminados. El archivo generado tendrá un resultado similar. 

{

  "name": "typescript-node",

  "version": "1.0.0",

  "description": "",

  "main": "index.js",

  "scripts": {

    "test": "echo \"Error: no test specified\" && exit 1"

  },

  "keywords": [],

  "author": "",

  "license": "ISC"

}

Configuración de TypeScript con Node.js

Paso 1: Instale el compilador de TypeScript

Ahora puede instalar el compilador de TypeScript en su proyecto. Ejecute este comando;

npm install --save-dev typescript

La salida en su línea de comando será algo similar a esto;

added 1 package, and audited 2 packages in 26s

found 0 vulnerabilities

Nota:: El enfoque anterior instala TypeScript localmente en la carpeta del proyecto en el que está trabajando. Puede instalar TypeScript globalmente en su sistema, por lo que no tiene que instalarlo cada vez que trabaja en un proyecto. Use este comando para instalar TypeScript globalmente;

npm install -g typescript

Puede verificar si TypeScript se ha instalado usando este comando;

tsc -v

Paso 2: Agregar tipos de Ambient Node.js para TypeScript

TypeScript tiene diferentes tipos, como Implicit, Explicit y Ambient. Los tipos ambientales siempre se agregan al ámbito de ejecución global. Use este comando para agregar tipos de ambiente;

npm install @types/node --save-dev

Paso 3: Crea un tsconfig.json presentar

Este es el archivo de configuración que especifica todas las opciones de compilación de TypeScript. Ejecute este comando que viene con varias opciones de compilación definidas; 

npx tsc --init --rootDir src --outDir build \

--esModuleInterop --resolveJsonModule --lib es6 \

--module commonjs --allowJs true --noImplicitAny true

Esto se emitirá en el terminal;

El tsconfig.json Se generará un archivo que contiene algunos valores predeterminados y comentarios.

Esto es lo que hemos configurado:

• El rootDir es donde TypeScript buscará nuestro código. Lo hemos dirigido a /src carpeta donde escribiremos nuestro código. 
• El outDir La carpeta define dónde se coloca el código compilado. Dicho código está configurado para ser almacenado en build/ carpeta.

Usando TypeScript con Node.js

Paso 1: Crear src carpeta y archivo index.ts

Ahora tenemos la configuración básica. Ahora podemos crear una aplicación TypeScript simple y compilarla. La extensión de archivo para un archivo TypeScript es .ts. Ejecute estos comandos dentro de la carpeta que creamos en los pasos anteriores;

mkdir src

touch src/index.ts

Paso 2: agregue código al archivo TypeScript (index.ts)

Puedes comenzar con algo simple como;

console.log('Hello world!')

Paso 3: Compile el código TypeScript en código JavaScript

Ejecute este comando;

npx tsc

Puede comprobar el build carpeta (build/index.js), y verá que se ha generado un index.js con esta salida;

TypeScript se ha compilado en código JavaScript. 

Paso 4: Ejecute el código JavaScript compilado

Recuerde que el código TypeScript no se puede ejecutar en navegadores. Por lo tanto, ejecutaremos el código en index.js en la carpeta de compilación. Ejecute este comando;

node build/index.js

Esta será la salida;

Paso 5: configure TypeScript para compilar automáticamente en código JavaScript

Compilar el código de TypeScript manualmente cada vez que cambia sus archivos de TypeScript puede hacerle perder tiempo. puedes instalar ts-node (ejecuta código TypeScript directamente sin esperar a ser compilado) y nodemon (comprueba su código en busca de cambios y reinicia automáticamente el servidor). 

Ejecute este comando;

npm install --save-dev ts-node nodemon

Luego puede ir al archivo package.json y agregar este script;

"scripts": {

   "start": "ts-node ./src/index.ts"

}

Podemos usar un nuevo bloque de código con fines de demostración;

function sum (num1:number, num2:number, num3:number){

    return num1 + num2 +num3;

}

console.log(sum(10,15,30))

Eliminar el index.js (/build/index.js) y ejecute npm start. 

Su salida será similar a esta;

Configure TypeScript Linting with eslint

Paso 1: Instalar eslint

Linting puede ser útil si desea mantener la coherencia del código y detectar errores antes del tiempo de ejecución. Instale eslint usando este comando;

npm install --save-dev eslint

Paso 2: Inicializar eslint

Puede inicializar eslint usando este comando;

npx eslint --init

El proceso de inicialización lo llevará a través de varios pasos. Use la siguiente captura de pantalla para guiarlo;

Una vez finalizado el proceso, verá un archivo llamado .eslintrc.js con contenidos similares a este;

module.exports = {

  env: {

    browser: true,

    es2021: true

  },

  extends: 'standard-with-typescript',

  overrides: [

  ],

  parserOptions: {

    ecmaVersion: 'latest',

    sourceType: 'module'

  },

  rules: {

  }

}

Paso 3: Ejecute eslint

Ejecute este comando para verificar y eliminar todos los archivos con el .ts extensión;

npx eslint . --ext .ts

Paso 4: Actualizar package.json 

Agrega una lint script en este archivo para la pelusa automática. 

"scripts": {

    "lint": "eslint . --ext .ts",

  },

TypeScript with Node.js: Best practices

• Mantenga TypeScript actualizado: Los desarrolladores de TypeScript siempre lanzan nuevas versiones. Asegúrese de tener la última versión instalada en su máquina/carpeta de proyecto y benefíciese de las nuevas funciones y correcciones de errores. 
• Habilitar modo estricto: Puede detectar los errores de programación comunes en tiempo de compilación cuando habilita el modo estricto en el archivo tsconfig.json. Esto reducirá el tiempo de depuración y aumentará la productividad. 
• Habilite comprobaciones nulas estrictas: Puede detectar todos los errores nulos e indefinidos en el momento de la compilación habilitando controles nulos estrictos en el archivo tsconfig.json. 
• Use un editor de código que admita TypeScript: Existen montones de editores de código. Una buena práctica es escoger editores de código como VS Code, Sublime Text o Atom que admiten TypeScript a través de complementos. 
• Tipos de uso e interfaces: Con tipos e interfaces, puede definir tipos personalizados que puede reutilizar en todo su proyecto. Este enfoque hará que su código sea más modular y fácil de mantener. 

Resumen

Ahora tiene la estructura básica de una aplicación creada con TypeScript en Node.js. Ahora puede usar los paquetes regulares de Node.js, pero aún así, escriba su código en TypeScript y disfrute de todas las características adicionales que vienen con este último. 

Si recién está comenzando con TypeScript, asegúrese de comprender las diferencias entre Mecanografiado y JavaScript.