Migrando TypeScript a Módulos: Los Detalles Finales

Rate this content
Bookmark
SlidesGithub

En TypeScript 5.0, la cadena de herramientas de TypeScript se migró a módulos. En esta charla, profundizaremos en los detalles, discutiendo qué son los "módulos" (y cómo no los estábamos utilizando), los detalles de la migración en sí, cómo logramos hacer el cambio "en pleno vuelo" en un proyecto en desarrollo activo, cómo fue la migración y qué sigue.

This talk has been presented at TypeScript Congress 2023, check out the latest edition of this JavaScript Conference.

FAQ

La migración a módulos en TypeScript se refiere a cambiar TypeScript para usar la sintaxis de importación y exportación, moviendo el código de usar scripts sin importaciones a módulos donde se explicitan las importaciones y exportaciones.

Los desafíos incluyen manejar un código base grande con más de un cuarto de millón de líneas de código, la frecuencia de cambios en el código durante el proceso de migración y la necesidad de adaptar herramientas y procesos para soportar la nueva estructura de módulos.

Jake utilizó TS Morph, una herramienta de transformación de código que permite realizar cambios en el código TypeScript de manera eficiente y sin alterar el formato original.

Los cambios manuales se gestionaron utilizando git para almacenar y aplicar los cambios. Esto permitió manejar las modificaciones de forma controlada y solucionar problemas cuando los parches no se aplicaban correctamente.

La migración a módulos resultó en una mejora de velocidad de entre el 10% y el 20% gracias al scope hoisting de ESBuild, una reducción en el tamaño del paquete y la capacidad de realizar pruebas internas más efectivas.

Para reemplazar outfile y prepend, se utilizó ESBuild para agrupar los archivos en el nuevo entorno de módulos, manteniendo la eficiencia y la compatibilidad con las construcciones anteriores.

Después de la migración, se cambiaron las herramientas de compilación a ESBuild y se creó un nuevo gestor de tareas, llamado Hereby, para manejar los pasos de compilación de manera más eficiente y con menos dependencias.

Jake Bailey
Jake Bailey
26 min
21 Sep, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Esta charla discute la migración de TypeScript a módulos, los desafíos enfrentados y la automatización utilizada para la migración. La biblioteca TS Morph y git se utilizan para la transformación de código y la gestión de cambios. El último paso implica convertir los nombres punteados de TS en importaciones con nombre. La migración a ESBuild trae beneficios como un ciclo de desarrollo más rápido y una mejor organización de importaciones en TypeScript.

1. TypeScript's Migration to Modules

Short description:

Hola a todos, soy Jake. Hoy hablaré sobre la migración de TypeScript a módulos. Fue un cambio enorme, que modificó por completo la forma en que el compilador de TypeScript estaba estructurado internamente. Discutiremos qué significa una migración a módulos, por qué fue un desafío, cómo lo hice menos doloroso y qué sigue para los módulos en TypeScript. Los módulos en TypeScript se refieren a la sintaxis de importación y exportación, a diferencia del uso anterior de scripts. Los espacios de nombres, originalmente llamados módulos internos, proporcionaban encapsulación, exportación e importación como los módulos, pero con algunas diferencias.

Hola a todos, soy Jake. Soy un ingeniero de software senior en Microsoft y hoy voy a hablar sobre la migración de TypeScript a módulos. Entonces, primero, ¿de qué estamos hablando? Bueno, en noviembre del año pasado, envié esta PR. Fue la culminación de muchos, muchos meses de trabajo. Fue un cambio enorme, alrededor de un cuarto de millón de líneas de código, y cambió por completo la forma en que el compilador de TypeScript estaba estructurado internamente. Hablamos de esto en detalle en nuestro blog, pero hay muchos detalles de los que no pudimos hablar y eso es de lo que voy a hablar hoy. En resumen, vamos a hablar de qué significa una migración a módulos. Vamos a hablar de por qué fue tan desafiante, pero cómo lo hice menos doloroso. Vamos a hablar de cómo funcionó la migración bajo el capó y vamos a hablar de lo que eso significó para nosotros, cómo fue, y qué sigue para los módulos en TypeScript. Volviendo a lo básico, ¿qué son los módulos? Creo que hay algunas definiciones diferentes que se pueden dar para esto, pero creo que las dos más críticas son la sintaxis en sí misma. Así que eso es importación-exportación y la parte donde se crean múltiples archivos e importarlos entre sí, pero también es el formato de salida. Así que ESM como he escrito a continuación, CommonJS que se utiliza bastante en el ecosistema de Node, y muchos otros formatos menores. Cuando hablo de migrar TypeScript a módulos, me refiero específicamente a esta primera definición. Es decir, cambiar TypeScript para usar la sintaxis de importación y exportación. Ahora eso plantea la pregunta, si TypeScript no era módulos antes, pero no usaba importación-exportación, ¿qué usaba? La respuesta es scripts. Entonces, en TypeScript, todo es un script o un módulo.

2. Bundling and Imports in TypeScript

Short description:

Ahora, todo nuestro código está en diferentes archivos, pero podemos agruparlos usando outfile y prepend. Entonces, tsc ha sido efectivamente un paquete todo este tiempo, aunque esta opción se eliminará. Si alguien quiere importarnos, podemos ser inteligentes usando espacios de nombres. Los espacios de nombres tienen algunas ventajas, pero nadie escribe código así en la actualidad. Queremos tener archivos que se exporten e importen explícitamente entre sí.

explícito. Ahora, todo nuestro código está en diferentes archivos, pero podemos agruparlos usando outfile y prepend. Entonces, puedes ver que dentro de la configuración de tsconfig de tsc, establecemos outfile como tsc.js, y luego le pedimos a tsc que agregue todo el contenido de sus proyectos dependientes. A continuación, puedes ver todo el código que el compilador definió, el comando de ejecución de la línea de comandos definido, todo se coloca en la parte superior del archivo. Y luego todo el código que estaba en el proyecto tsc. Entonces, tsc ha sido efectivamente un paquete todo este tiempo, aunque veremos más adelante que esta opción se eliminará. Ahora, si alguien quiere importarnos, esto es interesante porque somos scripts globales. No hay importaciones ni exportaciones. Pero podemos ser inteligentes aquí. Lo que podemos hacer es decir que si estamos en un contexto de CommonJS, es decir, hay module y module exports, entonces simplemente podemos leer nuestro espacio de nombres ts como un valor y establecerlo en module.exports. Esto significa que si alguien nos carga dentro de un contexto que admite CommonJS, como Node, pero también otros paquetes, verán que este es un módulo de CommonJS y funcionará como la gente espera. Pero si alguien carga esto en su página web simplemente usando una etiqueta de script, obtendrán una variable ts y también funcionará. Los espacios de nombres tienen algunas ventajas. Debido a que estamos usando espacios de nombres, no tenemos que escribir importaciones. Obviamente, estamos hablando de agregar importaciones. Antes no había importaciones en absoluto. Cuando agregamos nuevo código, no tenemos que importarlo. Si es otro archivo, simplemente lo usamos. Si movemos código de un archivo a otro, tampoco tenemos que cambiar las importaciones. También obtenemos el agrupamiento de forma gratuita utilizado por TSC. Pero nadie escribe código así en la actualidad. Esto significa que no podemos probar los módulos. Si queremos probar cosas como la resolución de Node Next, importaciones automáticas, importaciones organizadas, todas esas cosas buenas, no podemos hacerlo en nuestro propio código base. Tampoco podemos usar herramientas externas que solo manejan importaciones y exportaciones. Entonces, si queremos probar ciclos entre archivos, todas esas herramientas esperan tener importaciones presentes y no podemos usarlas. También necesitamos mantener prepend. Resulta que nadie usa esta función excepto TypeScript en sí mismo. Entonces, sería genial eliminarla del producto y dejar de mantenerla. Queremos tener archivos que se exporten e importen explícitamente entre sí. Tenemos el mismo archivo anterior, pero tenemos parser.tsx exportando create source file en el nivel superior. Y luego en program.ts lo importamos por nombre y lo usamos.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Los tipos más útiles de React
React Day Berlin 2023React Day Berlin 2023
21 min
Los tipos más útiles de React
Top Content
Today's Talk focuses on React's best types and JSX. It covers the types of JSX and React components, including React.fc and React.reactnode. The discussion also explores JSX intrinsic elements and react.component props, highlighting their differences and use cases. The Talk concludes with insights on using React.componentType and passing components, as well as utilizing the react.element ref type for external libraries like React-Select.
TypeScript y React: Secretos de un matrimonio feliz
React Advanced Conference 2022React Advanced Conference 2022
21 min
TypeScript y React: Secretos de un matrimonio feliz
Top Content
React and TypeScript have a strong relationship, with TypeScript offering benefits like better type checking and contract enforcement. Failing early and failing hard is important in software development to catch errors and debug effectively. TypeScript provides early detection of errors and ensures data accuracy in components and hooks. It offers superior type safety but can become complex as the codebase grows. Using union types in props can resolve errors and address dependencies. Dynamic communication and type contracts can be achieved through generics. Understanding React's built-in types and hooks like useState and useRef is crucial for leveraging their functionality.
Haciendo Magia: Construyendo un Marco de Trabajo Primero-TypeScript
TypeScript Congress 2023TypeScript Congress 2023
31 min
Haciendo Magia: Construyendo un Marco de Trabajo Primero-TypeScript
Top Content
Daniel Rowe discusses building a TypeScript-first framework at TypeScript Congress and shares his involvement in various projects. Nuxt is a progressive framework built on Vue.js, aiming to reduce friction and distraction for developers. It leverages TypeScript for inference and aims to be the source of truth for projects. Nuxt provides type safety and extensibility through integration with TypeScript. Migrating to TypeScript offers long-term maintenance benefits and can uncover hidden bugs. Nuxt focuses on improving existing tools and finds inspiration in frameworks like TRPC.
Deja de Escribir tus Rutas
Vue.js London 2023Vue.js London 2023
30 min
Deja de Escribir tus Rutas
Designing APIs is a challenge, and it's important to consider the language used and different versions of the API. API ergonomics focus on ease of use and trade-offs. Routing is a misunderstood aspect of API design, and file-based routing can simplify it. Unplugging View Router provides typed routes and eliminates the need to pass routes when creating the router. Data loading and handling can be improved with data loaders and predictable routes. Handling protected routes and index and ID files are also discussed.
Compilaciones de TypeScript más rápidas con --isolatedDeclarations
TypeScript Congress 2023TypeScript Congress 2023
24 min
Compilaciones de TypeScript más rápidas con --isolatedDeclarations
Top Content
This talk discusses the performance issues in TypeScript builds and introduces a new feature called isolated declarations. By running the compiler in parallel and using isolated modules, significant performance gains can be achieved. Isolated declarations improve build speed, compatibility with other tools, and require developers to write types in code. This feature has the potential to further increase performance and may be available in TypeScript soon.
Aplicaciones React (+Native) full-stack y seguras con tRPC.io
React Advanced Conference 2021React Advanced Conference 2021
6 min
Aplicaciones React (+Native) full-stack y seguras con tRPC.io
Top Content
Alex introduces tRPC, a toolkit for making end-to-end type-safe APIs easily, with auto-completion of API endpoints and inferred data from backend to frontend. tRPC works the same way in React Native and can be adopted incrementally. The example showcases backend communication with a database using queries and validators, with types inferred to the frontend and data retrieval done using Prisma ORM.

Workshops on related topic

React, TypeScript y TDD
React Advanced Conference 2021React Advanced Conference 2021
174 min
React, TypeScript y TDD
Top Content
Featured WorkshopFree
Paul Everitt
Paul Everitt
ReactJS es extremadamente popular y, por lo tanto, ampliamente soportado. TypeScript está ganando popularidad y, por lo tanto, cada vez más soportado.

¿Los dos juntos? No tanto. Dado que ambos cambian rápidamente, es difícil encontrar materiales de aprendizaje precisos.

¿React+TypeScript, con los IDEs de JetBrains? Esa combinación de tres partes es el tema de esta serie. Mostraremos un poco sobre mucho. Es decir, los pasos clave para ser productivo, en el IDE, para proyectos de React utilizando TypeScript. En el camino, mostraremos el desarrollo guiado por pruebas y enfatizaremos consejos y trucos en el IDE.
Dominando conceptos avanzados en TypeScript
React Summit US 2023React Summit US 2023
132 min
Dominando conceptos avanzados en TypeScript
Top Content
Featured WorkshopFree
Jiri Lojda
Jiri Lojda
TypeScript no es solo tipos e interfaces. Únete a esta masterclass para dominar características más avanzadas de TypeScript que harán tu código a prueba de balas. Cubriremos tipos condicionales y notación de inferencia, cadenas de plantillas y cómo mapear sobre tipos de unión y propiedades de objetos/arrays. Cada tema se demostrará en una aplicación de muestra que se escribió con tipos básicos o sin tipos en absoluto y juntos mejoraremos el código para que te familiarices más con cada característica y puedas llevar este nuevo conocimiento directamente a tus proyectos.
Aprenderás:- - ¿Qué son los tipos condicionales y la notación de inferencia?- ¿Qué son las cadenas de plantillas?- Cómo mapear sobre tipos de unión y propiedades de objetos/arrays.
Consejos y Trucos Profundos de TypeScript
Node Congress 2024Node Congress 2024
83 min
Consejos y Trucos Profundos de TypeScript
Top Content
Featured Workshop
Josh Goldberg
Josh Goldberg
TypeScript tiene un sistema de tipos poderoso con todo tipo de características sofisticadas para representar estados de JavaScript salvajes y extravagantes. Pero la sintaxis para hacerlo no siempre es sencilla, y los mensajes de error no siempre son precisos al decirte qué está mal. Vamos a profundizar en cómo funcionan muchas de las características más poderosas de TypeScript, qué tipos de problemas del mundo real resuelven, y cómo dominar el sistema de tipos para que puedas escribir código TypeScript verdaderamente excelente.
Mejores Prácticas y Consejos Avanzados de TypeScript para Desarrolladores de React
React Advanced Conference 2022React Advanced Conference 2022
148 min
Mejores Prácticas y Consejos Avanzados de TypeScript para Desarrolladores de React
Top Content
Featured Workshop
Maurice de Beijer
Maurice de Beijer
¿Eres un desarrollador de React tratando de obtener los máximos beneficios de TypeScript? Entonces esta es la masterclass para ti.En esta masterclass interactiva, comenzaremos desde lo básico y examinaremos los pros y contras de las diferentes formas en que puedes declarar componentes de React usando TypeScript. Después de eso, pasaremos a conceptos más avanzados donde iremos más allá de la configuración estricta de TypeScript. Aprenderás cuándo usar tipos como any, unknown y never. Exploraremos el uso de predicados de tipo, guardias y comprobación exhaustiva. Aprenderás sobre los tipos mapeados incorporados, así como cómo crear tus propias utilidades de mapa de tipo nuevo. Y comenzaremos a programar en el sistema de tipos de TypeScript usando tipos condicionales e inferencia de tipos.
Building Your Own Custom Type System
React Summit 2024React Summit 2024
38 min
Building Your Own Custom Type System
Featured Workshop
Kunal Dubey
Kunal Dubey
I'll introduce the audience to a concept where they can have end-to-end type systems that helps ensure typesafety across the teams Such a system not only improves communication between teams but also helps teams collaborate effectively and ship way faster than they used to before. By having a custom type system, teams can also identify the errors and modify the API contracts on their IDE, which contributes to a better Developer Experience. The workshop would primarily leverage TS to showcase the concept and use tools like OpenAPI to generate the typesystem on the client side. 
Frictionless Development With Unified Type System
JSNation 2024JSNation 2024
113 min
Frictionless Development With Unified Type System
Featured Workshop
Ejiro Asiuwhu
Ejiro Asiuwhu
Imagine developing where frontend and backend sing in harmony, types dance in perfect sync, and errors become a distant memory. That's the magic of TypeScript Nirvana!
Join me on a journey to unveil the secrets of unified type definitions, the key to unlocking frictionless development. We'll dive into:
- Shared language, shared love: Define types once, share them everywhere. Consistency becomes your BFF, errors your worst nightmare (one you'll rarely see).- Effortless coding: Ditch the manual grind of type checking. TypeScript's got your back, freeing you to focus on building awesomeness.- Maintainability magic: With crystal-clear types guiding your code, maintaining it becomes a walk in the park. More time innovating, less time debugging.- Security fortress: TypeScript's type system shields your app from common vulnerabilities, making it a fortress against security threats.