Estos días cuando creo proyectos web, un lenguaje de programación que uso mucho es Typescript, ya sea tanto en el backend, como en el frontend e incluso para otras cosas más. Así que en este artículo voy a compartirles que herramientas son las que más uso y otras que tambien podrian considerar estudiar si les interesa crear proyectos web completos usando herramientas (Frameworks, bibliotecas) que soporten este lenguaje principalmente.

Si tienen prisa la lista completa de herramientas es esta:

• Frontend
  • Vite
  • Astro
• Backend
  • Nestjs
  • Ts.ED
  • AdonisJS
• ORMS
  • typeORM
  • Prisma
  • Typegoose
• API
  • tRPC
  • Apollo
  • graphql-codegen
• Libraries
  • Zod
  • TsDoc
  • Tensorflow.js
• Runtimes
  • Nodejs
  • Deno
  • Bun

Aunque tambien mencionaré otras para que te enteres cuales son las alternativas o que otras opciones tiene.

Empecemos con el Frontend.

Frontend

Empezar con Typescript en el frontend es muy sencillo actualmente debido a que proyectos como VItejs, el cual permite crear proyectos de React, Vue, Svelte y otros, ya permiten crear proyectos con una configuracion de Typescript hecha. Y aunque estos Frameworks de Frontend no estan creados con Typescript, la gran mayoria ya posee un soporte, y documentacion por lo que es muy facil empezar a uarlo alli.

O por otro lado proyectos como Angular, Solid o Astro, ya estan creados enteramente con Typescript, asi que estos por defecto ya tienen soporte al lenguaje.

Aunque si ya tienes un proyecto creado en frameworks como React y ahora quieres usar Typescript, tambien hay guias de como integrarlo

En lo personal cuando trabajo en el frontend, Frameworks que uso muy frecuente son React, React Native y Nextjs junto con Typescript, usado su modo Strict, junto con Eslint y Prettier, lo que da una gran ayuda en conjunto con editores como Visual Studio Code que tiene un soporte completo al lengujae, de hecho este tambien esta desarrollado en Typescript.

Backend

En cuanto al Backend tambien es posible integrar Typescript con Frameworks de Nodejs como Express, Fastify y otros. Sin embargo Frameworks que utilizan la gran mayoria de caracteristicas del lenguaje y ya te dan muchas funcionalidades hechas son:

• Nestjs
• ts.ED
• Adonis

Los tres practicamente permiten hacer lo mismo, es decir crear código de servidor que permitan conectarse a una base de datos y enviar respuestas al Frontend usando APIs (REST, GraphQL), los tres usan conceptos de orientacion a objetos, tienen comandos para generar codigo, o ya genera documentacion automatica.

En lo personal la mayor parte del tiempo prefiero crear mi propia configuracion de Typescript junto a frameworks como Express, sin embargo cuando quiero un framework completo la mayor parte del tiempo escojo Nestjs.

ORM

Un ORM o Object Relational Mapping, es basicamente una biblioteca que convierte codigo de tu lenguaje de programacion a codigo SQL. ORMs de Nodejs que soporten Typescript tipicamente son:

• Sequelize
• Knexjs
• Objection.js

Sin embargo ORMS que soportan y estan desarrollados con Typescript son:

• Prisma
• TypeORM

En este caso la ventaja de estos es que te evitan que tenga que duplicar codigo creando tus tipos de datos ademas de tu esquema de base de datos, es decir solo creas un clase y esta se convertira en una tabla. Ademas que son de los proyectos mas usados en este ambito.

De hecho estas son la razones de porque uso ambos proyectos actualmente.

APIs

Hasta este punto ya tendriamos un Backend y un Frontend creados con Typescript y para comunicarlos podriamos usar una REST API, que envie y reciba en formatos JSON, sin embargo otra forma de comunicarlos actualmente es usado GraphQL o tRPC que son basicamente bibliotecas que instalas en el frontend y en el backend para poder ir solicitando datos.

Si quieres conocer más de esto ya hay dos videos creados del tema

• ¿Qué es GraphQL?
• ¿Qué es tRPC?

de los 2 el que más uso es GraphQL porque este es un lenguaje más robusto y que esta diseñado especificamente para comunicar proyectos, aunque aprenderlo puede llegar a ser un poco complicado.

Sin embargo usarlo puede llegar a mejorar mucho el rendimiento de tus aplicaciones al solicitar solo los datos necesarios a diferencia de REST.

De hecho si vas a crear GraphQL APIs en el backend usando Nodejs junto con Typescript hay varios proyecos que debes tener en cuenta. Uno es typeGraphQL y el otro es GraphQL Code Generator

La diferencia de estos que typeGraphQL te permite crear tu API de GraphQL solo usado Typescript. basicamente escribes una clase, y esta biblioteca convierte por ti, codigo de Typescrpt a GraphQL, lo que al momento de desarrollar te proporciona autocompletado y analisis de errores:

@ObjectType()
class Recipe {
  @Field()
  title: string;

  @Field(type => [Rate])
  ratings: Rate[];

  @Field({ nullable: true })
  averageRating?: number;
}

Por otro lado Graphql code generator, te permite que en tus proyectos tengas archivos de graphql, con la sintaxis del lenguaje y este transformara por ti a codigo de Typescript, de esta forma podras usar tus consultas desde el frontend, aunque en tu codigo tienes que crear tus propios tipos de datos de Typescript para tus resolvers.

Usa uno u otro es un temas mas complejo asi que planeo abarcarlo en un video por aparte.

En lo personal uso más graphql-codegenerator, al ser una solucion más simple, y que me permite usar GraphQL puro.

Ahora, aparte de esto, tambien hay un proyecto relativamente nuevo llamado tRPC este hace lo mismo que graphql solo que uso Typescript y nada. esto es muy simple basicamente creas tus rutas en el backend y el frontend puede obtener autocompletado de que puede consultar, ademas de analisis de errores de tipos de datos.

Sin embargo tRPC es solo para monorepos, y aun no tiene soporte para otros frameworks que no sean React o Svelte. asi que GraphQL sigue siendo una solucion muchisimo más grande y estandarizada.

Libraries

En cuanto a biblitocas hay varias que son muy utiles porque puedes usarlas para proyectos frontend y backend al mismo tiempo, por ejemplo esta el proyecto llamado:

• Zod, que permite validar datos tanto desde el backend y el fronten usando esquemas que usan tipos de datos de typescript. Aunque no es el unico proyectos como class-validator tambien estan creados en TS
• tsDoc, un proyecto que basado en los tipos de datos de Typescript y comentarios, puede generar documentaciones completas.

export class Statistics {
  /**
   * Returns the average of two numbers.
   *
   * @remarks
   * This method is part of the {@link core-library#Statistics | Statistics subsystem}.
   *
   * @param x - The first input number
   * @param y - The second input number
   * @returns The arithmetic mean of `x` and `y`
   *
   * @beta
   */
  public static getAverage(x: number, y: number): number {
    return (x + y) / 2.0;
  }
}

De hecho documentaciones de proyectos como Monaco Editor, que es lo que usa Viual Studio code o la misma documentacion de TSDoc estan creadas usando esta biblioteca.

• Typescript Eslint tambien permiten configurar rapidamente eslint en proyectos de typescript
• Tensorflow.js y Brainjs que esta desarrollado en Typescript y permite ejecutar modelos de Machine learning dentro del navegador
• t3 Stack

Runtimes

Y finalmente tenemos el entorno dodnde se ejecuta el lenguaje que actualmente es Nodejs principalmente, sin embargo en este tenemos que instalar y configuarlo para poder usarlo correctamente, mientras que alternativas más modernas como Deno o Bun, ya tienen soporte al lenguaje, ademas de ser más rapida.

Aunque de los dos ultimos Deno esta más cerca de ser usable. De hecho en este momento ya puede crear proyectos de typescript que permitan ejecutarse con Deno y poder desplegarlos usando un servicio de la nube llamado Deno Deploy. Incluso tambien tien un proyecot similar a Nextjs escrito en Typescript llamado Fresh que usando deno de backend y Preact de frontend permite crear apps con server side rendering.

Conclusion

En fin usar Typecript actualmente es una de las formas más comunes para crear proyectos que pueden ir mejorando con el tiempo,debido a sus tipos de datos principalmente, algo a notar tambien es que este lenguje requiere que conozcas como funciona Javascript, asi que no es un remplazo sino una extension del lenguaje.

Y si quieren empezar a conocer las bases del lenguaje les dejo el curso de Typescript en donde pueden aprender de que sus fundamente para que luego puedan usarlo para crear todos estos tipos de proyectos.

Nos vemos un siguiente video