Generando TypeScript con TypeScript

Rate this content
Bookmark

Una inmersión profunda en cómo generamos automáticamente definiciones de TypeScript para el tiempo de ejecución basado en V8 que impulsa a los trabajadores de Cloudflare. Daremos una visión general de cómo utilizamos la API del compilador de TypeScript, cómo mejoramos las definiciones auto-generadas con anulaciones escritas por el usuario para mejorar la ergonomía, y cómo creamos un servicio para construir tipos para las configuraciones de compatibilidad específicas de los usuarios.

Brendan Coll
Brendan Coll
8 min
15 Feb, 2024

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Esta charla discute cómo se generan automáticamente las definiciones de TypeScript para los trabajadores de Cloudflare utilizando información de tipo en tiempo de ejecución. Se explica la codificación y transformación de la información de tipo, con los tipos de la API de tiempo de ejecución codificados en C++ y procesados posteriormente en TypeScript. También se cubre el proceso de mejora de las definiciones de tipo y la consecución de la compatibilidad, incluyendo la solución de problemas con los iteradores y el uso de la entrada humana para mejorar la ergonomía del desarrollador. La charla concluye con un plan para construir Types as a Service, un trabajador de Cloudflare que genera dinámicamente paquetes NPM que contienen archivos de definición de TypeScript.

Available in English

1. Introducción a CloudFlare Workers

Short description:

En esta parte, discutiré cómo generamos automáticamente definiciones de TypeScript para CloudFlare workers usando TypeScript. Cubriremos los problemas con el enfoque de tipos escritos a mano que usamos hace unos años, nuestro enfoque de generación automática utilizando información de tipo en tiempo de ejecución, transformaciones para mejorar otros tipos, anulaciones de tipo manuales para mejorar la ergonomía del desarrollador y fechas de compatibilidad. También exploraremos el sistema de información de tipo en tiempo de ejecución de la plataforma de ejecución de workers.

Hola a todos. Bienvenidos a mi charla sobre cómo generamos automáticamente definiciones de TypeScript para los workers de CloudFlare usando TypeScript. Como introducción rápida, soy Brendan. Creé MiniFlare, un simulador completamente local para los workers de CloudFlare. Ya mencioné los workers de CloudFlare varias veces, pero ¿qué son? Los workers son una plataforma de funciones como servicio. Escribes un código de manejo de HTTP, lo publicas en nuestra plataforma y te damos una URL a la que puedes acceder para ejecutarlo. Desplegamos tu código en todas las ubicaciones de borde de CloudFlare para que tus usuarios tengan acceso de baja latencia donde sea que estén. Importante, prácticamente no hay tiempo de inicio en frío. Debido a que nuestra plataforma de ejecución se basa en aislamientos de V8, no en contenedores o máquinas virtuales. Además de las API web estándar, proporcionamos API no estándar para almacenamiento de clave-valor. Los puntos clave que tenemos hasta ahora son tiempo de ejecución personalizado basado en V8, como Node o Dino. Implementamos principalmente API web estándar como los navegadores, pero también implementamos algunas API no estándar específicamente para casos de uso en el lado del servidor. Con todo esto en mente, ¿por qué queremos tipos? Queremos verificación de tipos para prevenir errores en tiempo de ejecución y queremos autocompletado en los IDE. Para empezar, cubriremos cómo solíamos hacer tipos escritos a mano hace un par de años, luego veremos nuestro enfoque de generación automática utilizando información de tipo en tiempo de ejecución. Después de eso, veremos algunas transformaciones que podemos hacer para mejorar otros tipos, y luego nos centraremos en cómo permitimos anulaciones de tipo manuales para mejorar la ergonomía del desarrollador. Y finalmente, echaremos un vistazo rápido a las fechas de compatibilidad.

En primer lugar, cómo hacíamos los tipos hace unos años. Al igual que la mayoría de las plataformas de ejecución, teníamos un paquete npm que proporcionaba tipos globales para nuestra plataforma de ejecución. Es importante destacar que este paquete solo incluía API específicas de CloudFlare, como el reescritor de HTML, y no estándares web. Había varios problemas con este enfoque. En primer lugar, estos tipos eran escritos a mano, lo que los hacía propensos a errores al actualizarlos. En segundo lugar, estos tipos no eran actualizados típicamente por el equipo que implementaba la plataforma de ejecución, lo que los hacía lentos para actualizarse con nuevas API. A la derecha, tenemos un ejemplo de un error de tipo al usar una nueva API, aunque ese código debería funcionar bien en Rutgers. Sin embargo, el mayor problema estaba en nuestra dependencia de libwebworker. Esto incluía API como message channel, que no implementamos, lo que significa que el código que pasaba la verificación de tipos no se ejecutaría en nuestra plataforma de ejecución. Y en ese momento, los workers no cumplían completamente con las especificaciones. También nos faltaban API experimentales que habíamos implementado. Así que aquí hay algunos problemas. Ahora que hemos visto todos los problemas, ¿qué debemos hacer al respecto? La plataforma de ejecución de workers proporciona un sistema de información de tipo en tiempo de ejecución. Esto nos permite consultar tipos en tiempo de ejecución y originalmente se usaba para la automatización

2. Codificación y Transformación de la Información de Tipo

Short description:

La información de tipo en tiempo de ejecución se codifica como cap y proto, que utilizamos como un formato binario independiente del lenguaje y la plataforma. Básicamente, es una versión tipada de JSON. Podemos codificar todos los tipos de API en tiempo de ejecución en C++ y realizar un procesamiento adicional en TypeScript. Esto nos permite utilizar la API del compilador de TypeScript para renderizar TypeScript. Con un poco más de trabajo para convertir los tipos cap y proto en TypeScript, tenemos tipos generados automáticamente. Los tipos aún no son perfectos, pero toda la información que necesitamos para solucionar estos problemas ya está en los tipos.

fuzz testing. La información de tipo en tiempo de ejecución se codifica como cap y proto, que utilizamos como un formato binario independiente del lenguaje y la plataforma, algo así como los protocol buffers si los has utilizado antes. Básicamente, es una versión tipada de JSON. Este es nuestro esquema cap y proto para la información de tipo. Puedes ver que esto se mapea a los tipos de TypeScript. Lo realmente bueno de cap y proto es que puede generar el código de codificación y decodificacióncode por ti a partir de tu esquema para muchos lenguajes diferentes. Es importante destacar que esto significa que no tenemos que implementar todas las etapas del proceso de generación automática en el mismo lenguaje. Podemos codificar todos los tipos de API en tiempo de ejecución en C++ y realizar un procesamiento adicional en TypeScript. Esto nos permite utilizar la API del compilador de TypeScript para renderizar TypeScript. Lo que queremos hacer es construir el nosotros mismos a partir de la información de tipo en tiempo de ejecución. Intentaremos construir la interfaz que acabamos de ver. Comenzaremos desde la parte inferior del árbol, por lo que comenzaremos con el parámetro clave para el método get, luego construiremos el tipo de retorno del método get y el propio método, luego construiremos la interfaz que contiene el método get, luego crearemos un archivo de origen de marcador de posición y un impresor para que podamos imprimir la interfaz en una cadena y registrarla en la console. Si ejecutamos eso, obtenemos lo que esperábamos. Todo eso por tres líneas de TypeScript, esto es una API muy detallada, pero con un poco más de trabajo para convertir los tipos cap y proto en TypeScript, tenemos tipos generados automáticamente. Esto prácticamente resuelve todos nuestros problemas anteriores. Tenemos exactamente las API que se implementaron en tiempo de ejecución con las diferencias menores de especificación. Pero los tipos aún no son perfectos. Por ejemplo, los iteradores no tienen valores con tipos correctos, no podemos usar funciones o constantes globales y no tenemos sobrecargas de funciones, por lo que TypeScript no puede estrechar los tipos de retorno dados los argumentos. Afortunadamente, toda la información que necesitamos para solucionar estos problemas ya está en los tipos. Lo que necesitamos hacer es transformarlos en una forma que TypeScript reconozca. Comenzaremos arreglando los iteradores. Así es como se ven nuestros tipos en este momento. Queremos usar el tipo de iterador iterable incorporado de TypeScript en su lugar, y la transición se ve algo así. Para solucionar los globales, necesitamos extraer los miembros del ámbito global del servicio de trabajador de servicio en el ámbito global, y esto también deberá incluir superclases. Entonces, nuevamente, necesitamos realizar algo como esto. Entonces, ¿cómo lo hacemos realmente? Veamos un ejemplo más simple. Digamos que queremos reemplazar todas las cadenas por números. Podemos escribir un transformador de TypeScript para esto que visite recursivamente todos los nodos. Si encontramos un token de cadena, lo reemplazamos por un número. Luego podemos usar la API de transformación de TS para aplicar esto a un nodo AST. Comenzamos en la declaración del espacio de nombres KV raíz, y hacemos un recorrido en profundidad

3. Mejorando las Definiciones de Tipo y la Compatibilidad

Short description:

Aplicar esta técnica a nuestras otras transformaciones nos permite solucionar los dos primeros problemas, por lo que los iteradores ahora tienen el tipo correcto y podemos usar funciones y constantes globales. Necesitamos aportes adicionales de los humanos para determinar la correspondencia entre los tipos de entrada y salida en el código C++ para los espacios de nombres KV. También necesitamos aportes humanos para mejorar la ergonomía del desarrollador, permitiendo que se inserte código TypeScript parcial junto con el código C++. Con eso, hemos resuelto todos los problemas anteriores y tenemos un conjunto sólido de definiciones de tipo para los workers. Ponemos los cambios disruptivos detrás de banderas de compatibilidad, pero generar tipos para todas las combinaciones posibles de banderas es inviable. En su lugar, planeamos construir Types as a Service, un worker de Cloudflare que genera dinámicamente paquetes NPM que contienen archivos de definición de TypeScript basados en la fecha de compatibilidad y las banderas seleccionadas.

Primero, buscamos hasta encontrar una cadena. Cuando lo hacemos, lo reemplazamos por un número, y seguimos hasta que todos los nodos hayan sido reemplazados. Aplicar esta técnica a nuestras otras transformaciones nos permite solucionar los dos primeros problemas, por lo que los iteradores ahora tienen el tipo correcto y podemos usar funciones y constantes globales. Para las sobrecargas, necesitamos algo un poco más complicado. Lo que queremos en nuestros tipos de TypeScript es algo como esto, donde tenemos una correspondencia entre los tipos de entrada y salida. Por ejemplo, cuando especificamos texto, esperamos una cadena. Cuando especificamos un búfer de rayos, esperamos un búfer de matriz, y así sucesivamente. El problema es que en el código C++ para los espacios de nombres KV, no hay correspondencia entre el tipo de entrada y el resultado de salida. ¿Cómo sabemos qué generar? Necesitamos aportes adicionales de los humanos aquí. Hay otros lugares donde también necesitamos aportes humanos, para mejorar la ergonomía del desarrollador. Como ya hemos visto, necesitamos esta función para las sobrecargas de funciones. También necesitamos aportes adicionales para agregar parámetros de tipo. A veces quieres renombrar los tipos para que sean menos verbosos, a veces quieres reemplazar la definición generada automáticamente con algo diferente, y a veces quieres ocultar el tipo porque no debería ser expuesto a los usuarios finales. Resolvemos esto permitiendo que se inserte código TypeScript parcial junto con el código C++. Esto se codifica con la información de tipo en tiempo de ejecución en cap y proto, y fusionamos esto con la definición generada. Podemos usar esto para todos los casos que hemos resaltado, y debido a que estamos colocando las anulaciones junto con el código C++, es mucho más fácil para los desarrolladores de tiempo de ejecución agregarlos y mantenerlos actualizados. Con eso, hemos resuelto todos los problemas anteriores y tenemos un conjunto sólido de definiciones de tipo para los workers. Pero hay una cosa más que podemos hacer para mejorarlos aún más. A veces las personas cometen errores. Los desarrolladores no son diferentes y a veces introducimos errores en nuestro código. A veces, corregir esos errores introduciría cambios de comportamiento disruptivos, pero no queremos romper el código existente implementado. Entonces, cuando cargas tu código de worker, debes especificar una fecha de compatibilidad. Ponemos los cambios disruptivos detrás de una bandera de compatibilidad que tiene una fecha en la que se habilitan de forma predeterminada. Si la fecha de compatibilidad de tu worker es posterior a la fecha predeterminada de una bandera, entonces esa bandera se habilitará. El problema es que algunas banderas cambian la superficie de la API pública y, por lo tanto, los tipos de TypeScript. Por ejemplo, la bandera global navigator agrega una nueva constante navigator al ámbito global. Actualmente hay 41 banderas de compatibilidad, aunque no todas ellas cambian la superficie de los tipos, pero si generamos una versión de los tipos para todas las combinaciones posibles de banderas, terminamos con 2 billones de archivos de definición de tipo, lo cual es inviable. En su lugar, nuestra solución en este momento es generar un punto de entrada de los tipos para cada fecha de compatibilidad que cambie la superficie de la API pública. Esto no resuelve completamente el problema, ya que los usuarios aún pueden habilitar y deshabilitar selectivamente las banderas. Lo que estamos planeando hacer es construir Types as a Service, que será un worker de Cloudflare que genera dinámicamente paquetes NPM que contienen archivos de definición de TypeScript basados en la fecha de compatibilidad y las banderas seleccionadas. Así que te animo a probar los workers de Cloudflare si aún no lo has hecho. Puedes encontrar todos los scripts de TypeJet Reclamation en el repositorio de GitHub de Cloudflare WorkerD y encontrarme en GitHub y Twitter. Muchas gracias por escuchar.

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

TypeScript and React: Secrets of a Happy Marriage
React Advanced Conference 2022React Advanced Conference 2022
21 min
TypeScript and React: Secrets of a Happy Marriage
Top Content
TypeScript and React are inseparable. What's the secret to their successful union? Quite a lot of surprisingly strange code. Learn why useRef always feels weird, how to wrangle generics in custom hooks, and how union types can transform your components.
React's Most Useful Types
React Day Berlin 2023React Day Berlin 2023
21 min
React's Most Useful Types
Top Content
We don't think of React as shipping its own types. But React's types are a core part of the framework - overseen by the React team, and co-ordinated with React's major releases.In this live coding talk, we'll look at all the types you've been missing out on. How do you get the props type from a component? How do you know what ref a component takes? Should you use React.FC? And what's the deal with JSX.Element?You'll walk away with a bunch of exciting ideas to take to your React applications, and hopefully a new appreciation for the wonders of React and TypeScript working together.
Stop Writing Your Routes
Vue.js London 2023Vue.js London 2023
30 min
Stop Writing Your Routes
The more you keep working on an application, the more complicated its routing becomes, and the easier it is to make a mistake. ""Was the route named users or was it user?"", ""Did it have an id param or was it userId?"". If only TypeScript could tell you what are the possible names and params. If only you didn't have to write a single route anymore and let a plugin do it for you. In this talk we will go through what it took to bring automatically typed routes for Vue Router.
Making Magic: Building a TypeScript-First Framework
TypeScript Congress 2023TypeScript Congress 2023
31 min
Making Magic: Building a TypeScript-First Framework
I'll dive into the internals of Nuxt to describe how we've built a TypeScript-first framework that is deeply integrated with the user's IDE and type checking setup to offer end-to-end full-stack type safety, hints for layouts, middleware and more, typed runtime configuration options and even typed routing. Plus, I'll highlight what I'm most excited about doing in the days to come and how TypeScript makes that possible not just for us but for any library author.
Full-stack & typesafe React (+Native) apps with tRPC.io
React Advanced Conference 2021React Advanced Conference 2021
6 min
Full-stack & typesafe React (+Native) apps with tRPC.io
Top Content
Why are we devs so obsessed with decoupling things that are coupled nature? tRPC is a library that replaces the need for GraphQL or REST for internal APIs. When using it, you simply write backend functions whose input and output shapes are instantly inferred in your frontend without any code generation; making writing API schemas a thing of the past. It's lightweight, not tied to React, HTTP-cacheable, and can be incrementally adopted. In this talk, I'll give a glimpse of the DX you can get from tRPC and how (and why) to get started.
Faster TypeScript builds with --isolatedDeclarations
TypeScript Congress 2023TypeScript Congress 2023
24 min
Faster TypeScript builds with --isolatedDeclarations
Top Content
Type-checking a TypeScript codebase can be slow, especially for monorepos containing lots of projects that each need to use the type checker to generate type declaration files. In this talk, we introduce — for the very first time — a new TypeScript feature we are working on called “Isolated Declarations” that allows DTS files to be generated without using the type checker at all! This opens the door to faster declaration generation in TypeScript itself, as well as in external tools written in other languages such as ESBuild and swc. You'll see how to use this new option, and maybe (just maybe) you’ll be convinced about the benefits of explicit return types! Most importantly, we will show how Isolated Declarations enables parallel builds to spread work across your CPU cores to significantly improve the build speed of your TypeScript projects.

Workshops on related topic

React, TypeScript, and TDD
React Advanced Conference 2021React Advanced Conference 2021
174 min
React, TypeScript, and TDD
Top Content
Featured WorkshopFree
Paul Everitt
Paul Everitt
ReactJS is wildly popular and thus wildly supported. TypeScript is increasingly popular, and thus increasingly supported.

The two together? Not as much. Given that they both change quickly, it's hard to find accurate learning materials.

React+TypeScript, with JetBrains IDEs? That three-part combination is the topic of this series. We'll show a little about a lot. Meaning, the key steps to getting productive, in the IDE, for React projects using TypeScript. Along the way we'll show test-driven development and emphasize tips-and-tricks in the IDE.
Best Practices and Advanced TypeScript Tips for React Developers
React Advanced Conference 2022React Advanced Conference 2022
148 min
Best Practices and Advanced TypeScript Tips for React Developers
Top Content
Featured Workshop
Maurice de Beijer
Maurice de Beijer
Are you a React developer trying to get the most benefits from TypeScript? Then this is the workshop for you.In this interactive workshop, we will start at the basics and examine the pros and cons of different ways you can declare React components using TypeScript. After that we will move to more advanced concepts where we will go beyond the strict setting of TypeScript. You will learn when to use types like any, unknown and never. We will explore the use of type predicates, guards and exhaustive checking. You will learn about the built-in mapped types as well as how to create your own new type map utilities. And we will start programming in the TypeScript type system using conditional types and type inferring.
Deep TypeScript Tips & Tricks
Node Congress 2024Node Congress 2024
83 min
Deep TypeScript Tips & Tricks
Top Content
Workshop
Josh Goldberg
Josh Goldberg
TypeScript has a powerful type system with all sorts of fancy features for representing wild and wacky JavaScript states. But the syntax to do so isn't always straightforward, and the error messages aren't always precise in telling you what's wrong. Let's dive into how many of TypeScript's more powerful features really work, what kinds of real-world problems they solve, and how to wrestle the type system into submission so you can write truly excellent TypeScript code.
Practice TypeScript Techniques Building React Server Components App
TypeScript Congress 2023TypeScript Congress 2023
131 min
Practice TypeScript Techniques Building React Server Components App
Workshop
Maurice de Beijer
Maurice de Beijer
In this hands-on workshop, Maurice will personally guide you through a series of exercises designed to empower you with a deep understanding of React Server Components and the power of TypeScript. Discover how to optimize your applications, improve performance, and unlock new possibilities.
 
During the workshop, you will:
- Maximize code maintainability and scalability with advanced TypeScript practices
- Unleash the performance benefits of React Server Components, surpassing traditional approaches
- Turbocharge your TypeScript with the power of Mapped Types
- Make your TypeScript types more secure with Opaque Types
- Explore the power of Template Literal Types when using Mapped Types
 
Maurice will virtually be by your side, offering comprehensive guidance and answering your questions as you navigate each exercise. By the end of the workshop, you'll have mastered React Server Components, armed with a newfound arsenal of TypeScript knowledge to supercharge your React applications.
 
Don't miss this opportunity to elevate your React expertise to new heights. Join our workshop and unlock the potential of React Server Components with TypeScript. Your apps will thank you.
Advanced TypeScript types for fun and reliability
TypeScript Congress 2022TypeScript Congress 2022
116 min
Advanced TypeScript types for fun and reliability
Workshop
Maurice de Beijer
Maurice de Beijer
If you're looking to get the most out of TypeScript, this workshop is for you! In this interactive workshop, we will explore the use of advanced types to improve the safety and predictability of your TypeScript code. You will learn when to use types like unknown or never. We will explore the use of type predicates, guards and exhaustive checking to make your TypeScript code more reliable both at compile and run-time. You will learn about the built-in mapped types as well as how to create your own new type map utilities. And we will start programming in the TypeScript type system using conditional types and type inferring.
Are you familiar with the basics of TypeScript and want to dive deeper? Then please join me with your laptop in this advanced and interactive workshop to learn all these topics and more.
You can find the slides, with links, here: http://theproblemsolver.nl/docs/ts-advanced-workshop.pdf
And the repository we will be using is here: https://github.com/mauricedb/ts-advanced
Mastering Node.js Test Runner
TestJS Summit 2023TestJS Summit 2023
78 min
Mastering Node.js Test Runner
Workshop
Marco Ippolito
Marco Ippolito
Node.js test runner is modern, fast, and doesn't require additional libraries, but understanding and using it well can be tricky. You will learn how to use Node.js test runner to its full potential. We'll show you how it compares to other tools, how to set it up, and how to run your tests effectively. During the workshop, we'll do exercises to help you get comfortable with filtering, using native assertions, running tests in parallel, using CLI, and more. We'll also talk about working with TypeScript, making custom reports, and code coverage.