Configurar TypeScript en Visual Studio Code con NPM

TypeScript es un lenguaje de programación moderno usado para el desarrollo de aplicaciones JavaScript de gran tamaño. Este es un superconjunto de JavaScript que incorpora funcionalidades extras además de incorporar funciones recientes de JavaScript.

Al final Typescript se compila para producir una versión de JavaScript compatible con todas las plataformas.

Vamos a crear un proyecto web donde usaremos TypeScript. Necesitaremos compilar los archivos TypeScript y levantar un servidor web para ejecutar la aplicación.

Instalar Node JS

Instalar Visual Studio Code

Crear proyecto

Crear la carpeta test-typescript y abrirla con VS Code. Abrir la consola de VS Code con Ctrl + Ñ.

Añadir los archivos index.html y app.ts al proyecto.

<!DOCTYPE html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>TypeScript - devseo.xyz</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
    <H1>Mi web con TypeScript</H1>
    <script src="app.js"></script>
</body>

</html>

El código HTML hace referencia al archivo app.js aunque este aún no existe. Este archivo será el resultado de compilar el archivo TypeScript app.ts.

Inicializar NPM

NPM ayudará a instalar paquetes para automatizar el compilado de los archivos TypeScript. También permitirá ejecutar el proyecto en un entorno virtual con el servidor lite, además de mantener un control sobre las dependencias.

En la terminal ejecutar el siguiente comando para inicializar NPM:

npm init

Completar la información que nos pide. Cuando nos pida el punto de entrada ingresaremos app.js.

Agregar dependencias

Instalar dependencias de desarrollo

Concurrently: permite ejecutar múltiples comandos a la vez

Typescript

Lite-server: levanta un servidor web y refresca la página si hay cambios en el código (HTML, CSS…).

npm install concurrently typescript lite-server --save-dev

Configurar TypeScript

Necesitamos crear el archivo tsconfig.json para compilar los archivos TypeScript. Para ello ejecutamos el siguiente comando.

tsc --init

Configurar package.json

Vamos a hacer unos cambios en el package.json para facilitar el desarrollo: compilar automáticamente los archivos TypeScript cuando haya cambios y ejecutar un servidor donde correr la aplicación.

Añadiremos algunos comandos de script al archivo package.json quedando así:

{
  "name": "test-typescript",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "lite": "lite-server",
    "start": "concurrently \"npm run tsc:w\" \"npm run lite\" "
  },
  "author": "",
  "license": "ISC",
  "dependencies": {},
  "devDependencies": {
    "concurrently": "^5.3.0",
    "lite-server": "^2.5.4",
    "typescript": "^3.9.7"
  }
}

Ejecutar proyecto

En el paso anterior configuramos el comando start para que ejecute el servidor lite y compile los archivos TypeScript cuando haya cambios.

Lo ejecutamos y lanzará la web en la URL http://localhost:3000/ y estará a la escucha de los cambios que hagamos en el código.

npm start

👇Tu comentario