En el mundo actual del desarrollo de aplicaciones, que avanza a un ritmo vertiginoso, los proyectos suelen involucrar a varios desarrolladores y dependen de decenas de bibliotecas. Al crear con JavaScript en la plataforma Fastly Compute, puedes encontrarte recurriendo a TypeScript y a la robustez que aporta a tu proceso de desarrollo, y ciertamente no estás solo. De hecho, la compatibilidad con TypeScript es una duda frecuente que nos llega de los desarrolladores. Afortunadamente, trabajar con TypeScript en Fastly Compute es supersencillo.

¿Por qué TypeScript?

Para quienes sois nuevos en TypeScript, es un superconjunto de JavaScript que añade tipado estático. Ayuda a detectar errores de forma temprana y mejora la capacidad de mantenimiento del código, lo que lo convierte en una opción popular para aplicaciones a gran escala. TypeScript es muy popular entre los desarrolladores, quizás por la mejora de la experiencia de desarrollo que ofrece, como el autocompletado de código y la inspección de tipos en tu IDE favorito.

De hecho, el SDK de JavaScript de Fastly incorpora un conjunto completo de definiciones de TypeScript para que resulte muy agradable trabajar con él en entornos como VS Code e IntelliJ IDEA, incluso cuando se escribe usando JavaScript puro:

Autocompletado de código en JavaScript en IntelliJ IDEA, gracias a las definiciones de tipos de TypeScript exportadas por @fastly/js-compute 

El uso de TypeScript para escribir tu aplicación contribuye a que tu código sea más seguro, ya que te permite definir y ampliar los tipos en tu aplicación, y garantizar que los valores, las variables y las funciones coincidan con sus usos. De este modo, puedes detectar muchos errores antes, durante la compilación e incluso antes, gracias al resaltado de sintaxis, en lugar de esperar a que aparezcan en tiempo de ejecución.

TypeScript es muy intuitivo. De hecho, el lenguaje TypeScript se posiciona como un superconjunto de JavaScript, por lo que si ya conoces JavaScript, usarlo solo te supondrá aprender unas cuantas reglas y palabras clave. Consulta el Manual de TypeScript para iniciarte en este lenguaje.

Introducción a TypeScript en Fastly Compute

Cuando llega el momento de ejecutar el código, el código fuente escrito en TypeScript se traduce primero a JavaScript equivalente y, a continuación, se ejecuta en un entorno JavaScript. En otras palabras, TypeScript funciona como un paso del compilador en un proyecto de JavaScript, lo que significa que también es fácil de configurar para Fastly Compute.

Si vas a iniciar un nuevo proyecto desde cero, Fastly te proporciona un kit de inicio oficial de TypeScript para que te sea más fácil. La forma más sencilla de comenzar es usando el comando npm init @fastly/compute en un nuevo directorio:

mkdir new-project && cd new-project
npm init @fastly/compute@latest

He tratado npm init @fastly/compute con más detalle en una entrada anterior del blog, así que no te la pierdas si es la primera vez que desarrollas un proyecto en JavaScript con Fastly Compute.

Este comando te guía para configurar un nuevo proyecto de Compute y, cuando se te solicite, puedes elegir TypeScript como lenguaje. Generará un proyecto con nuestro kit de inicio de TypeScript, que incluye todo lo que necesitas para comenzar en seguida, con todos los pasos de compilación preconfigurados y un archivo index.ts que contiene el controlador de petición.

Con TypeScript, el IDE conoce los tipos de variables y parámetros la mayoría de las veces

TypeScript detecta clases enteras de errores en el momento de la compilación, con lo que el desarrollo es más eficaz y el código, más fiable

Añadir TypeScript a una aplicación Compute actual

Si ya tienes una aplicación Fastly Compute basada en JavaScript y quieres migrar a TypeScript, puedes hacerlo en unos pocos pasos.

NOTA: Las siguientes instrucciones suponen que tu aplicación de Compute no está utilizando un empaquetador como Webpack, esbuild o rollup. Si tu proyecto utiliza un empaquetador, añade TypeScript según las instrucciones para tu empaquetador (Webpack, esbuild, rollup).

1. Instala TypeScript como una dependencia de desarrollo:

npm install --save-dev typescript

2. Crea un archivo tsconfig.json en la raíz del proyecto. Una configuración recomendada para Fastly Compute es:

{
  "compilerOptions": {
    "strict": true,
    "rootDir": "src",
    "outDir": "build",
    "allowJs": true,
    "module": "ES2022",
    "lib": [ "ES2022" ],
    "moduleResolution": "bundler",
    "customConditions": [ "fastly" ],
    "esModuleInterop": true
  }
}

Para más información sobre las propiedades que se pueden establecer en este archivo, consulta la documentación de tsconfig.json.

3. La configuración anterior coloca los archivos JavaScript «compilados» intermedios en el directorio build/, así que añádelo al archivo .gitignore.

/build

4. Añade tsc (compilador de TypeScript) como el script «prebuild» de tu aplicación. Además, el paso «build» debe encontrar el archivo de entrada en el directorio intermedio. Actualiza tus scripts en package.json de la siguiente manera:

{
  "scripts": {
    "prebuild": "tsc",
    "build": "js-compute-runtime build/index.js bin/main.wasm"
  }
}

5. Cambia el nombre de los archivos .js a .ts y empieza a añadir anotaciones de tipo cuando sea necesario. Por ejemplo, añade el tipo fetchEvent al objeto de evento del controlador:

async function handler(event: FetchEvent) {
  // ...
}

¡Ya puedes compilar y ejecutar la aplicación TypeScript!

Estos pasos se explican con más detalle en la sección TypeScript de nuestra documentación de JavaScript, así que échale un vistazo si necesitas más información.

Cómo funciona

Después de realizar los pasos anteriores, al compilar la aplicación se ejecutan los siguientes pasos:

1. Se consulta el archivo fastly.toml para obtener su valor scripts.build, que es npm run build. Esto indica a npm que ejecute el build script que aparece en package.json. 

2. Debido a que package.json define un script prebuild, npm primero lo ejecuta: tsc procesa los archivos de origen de TypeScript en src/ y los envía a bin/.

3. npm ejecuta el script build: la herramienta CLI js-compute-runtime compila el tiempo de ejecución de JavaScript y el programa en un archivo binario Wasm en bin/main.wasm y lo empaqueta para su implementación en Compute.

Una vez que comprendas todo esto, podrás realizar los ajustes necesarios para la configuración de compilación de tu aplicación.

Únete a la discusión

¡Estamos deseando ver lo que creas con TypeScript en Fastly Compute! Si aún no lo has hecho, obtén tu cuenta de desarrollador gratuita de Fastly y únete a nosotros en el foro comunitario de Fastly. ¡Nos encantaría saber qué has estado construyendo!

¡A programar se ha dicho!