Generating types without climbing a tree

Rate this content
Bookmark

How do you generate types dynamically? How do you write a script that creates some typescript code? The approach most people would recommend is to use Abstract Syntax Tree manipulations. I was working on a deadline to implement types for our OpenAPI client, and I would have missed our release window. I needed something different and easier to build. Luckily, a friend recommended me a library I didn't know: code-block-writer. I fall in love with it at first sight.

Matteo Collina
Matteo Collina
30 min
21 Sep, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

This talk explores the challenges and benefits of generating types for APIs. The speaker discusses the need for a better client experience and the popularity of generating clients. They also explain the use of OpenAPI for generating REST API clients and the use of Cold Block Writer for code generation. The talk covers the process of defining types for parameters and responses, generating the client and request, and using the generated client. The speaker also touches on validation in production and the initial challenges with TypeScript.

Available in Español

1. Introduction to Generating Types

Short description:

Hi, everyone. I'm Matteo Collina, Platformatic Co-founder and CTO, and today I'm going to talk about something that makes me a little bit nervous, generating types. Entries. Why? Let's dig into it. So, the first question for all of you is, how many ropes do you need to climb a tree? This is a fundamental question and we are going to try to answer that question in this talk.

Hi, everyone. I'm Matteo Collina, Platformatic Co-founder and CTO, and today I'm going to talk about something that makes me a little bit nervous, generating types. Entries. Why? Let's dig into it. So, the first question for all of you is, how many ropes do you need to climb a tree? This is a fundamental question and we are going to try to answer that question in this talk. So, let's go.

First thing, a couple of things about me. I am Matteo Collina, part of the Node.js Technical Steering Committee, also board member of the Open Source Open JS Foundation. I created a bunch of libraries, help maintaining nodes, probably using some of my software given it's been downloaded 17 billion times last year, so yeah, maybe. So, some of my decisions impact a few people, so hopefully I don't break too many of you during this talk or otherwise.

So anyway, let's go and let's jump. So, I wrote a lot of modules, I maintain a lot of modules on NPM, a lot of downloads, whatever that matters. By the way, if you ever use one of those, if you want to send me a GitHub sponsor, everything is appreciated. I have a little bit of a small confession to make. What? What? Well, before 2022, I almost never used TypeScript. And here I'm speaking at TypeScript Congress. So what is that? It's really fascinating. I completely skimmed and avoid this technology for as long as I could. What happened in 2022? Well, I started a new company, and it was a developer experience for companies. So yeah, I kind of had to dig into TypeScript. In fact, it's all based on something I'd previously done, which is Fastify, which is a project inside the Open Source Foundation too. And it's all about building APIs. I'm a back-end engineer by trade and what I want to help people and how to help people with my tool, you know, to build and use APIs better and make it faster and make them easier to develop, maintain, scale, whatever you name it. So yeah, typically the typical flow of when one of your team members or somebody else is starting writing your APIs, you have an API on one end and you are typically a back-end engineer writing some complex SQL or some complex MongoDB queries, whatever you want to like, then they generate, write some documentation from that API and then your client, your engineer, code their client. So, okay, how does it make to generating the types? Yes, let me introduce the problem first. So, this is more or less what Plasformatic wants to simplify and improve how we create back-end software. Typically what we want to do is we want to move, allow you to move very quickly from A to B using as much rails as possible, guard rails for all of you to move very fast. And then, you know, you can get your old SUV to go where exactly you want to go. So, we want to help developers get rid of all the undifferentiated heavy lifting of building your JS apps. So, as part of that, we, at some point, we started focusing after we worked a lot on APIs and improve on two APIs that had been written.

2. The Need for a Better Client Experience

Short description:

What we found out from talking to a lot of people was that having a client for APIs was fundamental for a good development experience. Generating clients has become popular recently with libraries like tRPC and TS Rest. However, these libraries introduce tight coupling between the client and server code, making it difficult to scale and evolve. We need a better client experience that allows for flexibility and the use of different versions of TypeScript.

What we found out from talking to a lot of people was that, you know, oh, but having a client for those APIs was actually fundamental for providing a good experience and streamlining the development. So, what happened was that, you know, most people really like this flow much better. So, instead of having to call the client and prepare documentation for the API, I just want to hit a button and generate a client.

In fact, this has been so popular for ages, and kind of we got it lost a little bit along the way, because, you know, I remember generating clients for my APIs when I was doing WSDL and SOAP a long time ago. So, you know, probably not a great comparison, but it is. So, anyway, this has been extremely popular recently. In fact, this has been popularized a lot by a few new libraries. One is tRPC, which is fantastic, provides a fantastic developer experience. It allows you to expose your... creates an RPC call from the server to the... from the client to the server in a completely type-safe way. It's great, okay? It has only one significant drawback, which is introduced type coupling within your... the code of your frontend with the code of your backend, it also uses a proprietary protocol to communicate. So yeah, it's very tight. It's a very tight coupling between client and server. There is another library called TS Rest, which is also great, fantastic library, but it has another small... still another small problem, which is you need to specify the contract between your client and your server at its own typescape definition. Again, in order to consume the library, you need to have a source code dependency on the server. So again, for me, it provides introduced tight coupling between those two.

In fact, the problem here is the concept of you know, what happens in most teams that I have worked and developed with and so on, it's that you have basically some API that is developed by more or less a team and there is another group of people that you know, creates and consumes or that consumes those APIs. And those groups typically are more or less separated in most companies and in most organizations. So, integrating everything together, create a tight coupling between everything that makes it very hard to break down and scale and keep evolving things. And by the way, there is nothing to be taken by those libraries, which are fantastic. I'm just talking about what I am not, some of the reasons why I think we need a better client experience for APIs. So what, where are we left? Well, something that we want to provide some fantastic developer experience but without any tight coupling. So, without any code being shared, essentially, between the server and the client, so that you can essentially use and consume other APIs. And so, that one can use TypeScript 4.9 and the other one can use TypeScript 6 in the future. And they can evolve and have different versions, different things. Everything is fun and perfect. And so, how can we generate this developer experience? I started this journey, one of my journey types of work with this question.

QnA

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

Scaling Up with Remix and Micro Frontends
Remix Conf Europe 2022Remix Conf Europe 2022
23 min
Scaling Up with Remix and Micro Frontends
Top Content
Do you have a large product built by many teams? Are you struggling to release often? Did your frontend turn into a massive unmaintainable monolith? If, like me, you’ve answered yes to any of those questions, this talk is for you! I’ll show you exactly how you can build a micro frontend architecture with Remix to solve those challenges.
Full Stack Components
Remix Conf Europe 2022Remix Conf Europe 2022
37 min
Full Stack Components
Top Content
Remix is a web framework that gives you the simple mental model of a Multi-Page App (MPA) but the power and capabilities of a Single-Page App (SPA). One of the big challenges of SPAs is network management resulting in a great deal of indirection and buggy code. This is especially noticeable in application state which Remix completely eliminates, but it's also an issue in individual components that communicate with a single-purpose backend endpoint (like a combobox search for example).
In this talk, Kent will demonstrate how Remix enables you to build complex UI components that are connected to a backend in the simplest and most powerful way you've ever seen. Leaving you time to chill with your family or whatever else you do for fun.
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.
Making JavaScript on WebAssembly Fast
JSNation Live 2021JSNation Live 2021
29 min
Making JavaScript on WebAssembly Fast
Top Content
JavaScript in the browser runs many times faster than it did two decades ago. And that happened because the browser vendors spent that time working on intensive performance optimizations in their JavaScript engines.Because of this optimization work, JavaScript is now running in many places besides the browser. But there are still some environments where the JS engines can’t apply those optimizations in the right way to make things fast.We’re working to solve this, beginning a whole new wave of JavaScript optimization work. We’re improving JavaScript performance for entirely different environments, where different rules apply. And this is possible because of WebAssembly. In this talk, I'll explain how this all works and what's coming next.
Debugging JS
React Summit 2023React Summit 2023
24 min
Debugging JS
Top Content
As developers, we spend much of our time debugging apps - often code we didn't even write. Sadly, few developers have ever been taught how to approach debugging - it's something most of us learn through painful experience.  The good news is you _can_ learn how to debug effectively, and there's several key techniques and tools you can use for debugging JS and React apps.
Remix Flat Routes – An Evolution in Routing
Remix Conf Europe 2022Remix Conf Europe 2022
16 min
Remix Flat Routes – An Evolution in Routing
Top Content
This talk introduces the new Flat Routes convention that will most likely be the default in a future version of Remix. It simplifies the existing convention as well as gives you new capabilities.

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.
Using CodeMirror to Build a JavaScript Editor with Linting and AutoComplete
React Day Berlin 2022React Day Berlin 2022
86 min
Using CodeMirror to Build a JavaScript Editor with Linting and AutoComplete
Top Content
WorkshopFree
Hussien Khayoon
Kahvi Patel
2 authors
Using a library might seem easy at first glance, but how do you choose the right library? How do you upgrade an existing one? And how do you wade through the documentation to find what you want?
In this workshop, we’ll discuss all these finer points while going through a general example of building a code editor using CodeMirror in React. All while sharing some of the nuances our team learned about using this library and some problems we encountered.
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.
Testing Web Applications Using Cypress
TestJS Summit - January, 2021TestJS Summit - January, 2021
173 min
Testing Web Applications Using Cypress
WorkshopFree
Gleb Bahmutov
Gleb Bahmutov
This workshop will teach you the basics of writing useful end-to-end tests using Cypress Test Runner.
We will cover writing tests, covering every application feature, structuring tests, intercepting network requests, and setting up the backend data.
Anyone who knows JavaScript programming language and has NPM installed would be able to follow along.
Build a powerful DataGrid in few hours with Ag Grid
React Summit US 2023React Summit US 2023
96 min
Build a powerful DataGrid in few hours with Ag Grid
WorkshopFree
Mike Ryan
Mike Ryan
Does your React app need to efficiently display lots (and lots) of data in a grid? Do your users want to be able to search, sort, filter, and edit data? AG Grid is the best JavaScript grid in the world and is packed with features, highly performant, and extensible. In this workshop, you’ll learn how to get started with AG Grid, how we can enable sorting and filtering of data in the grid, cell rendering, and more. You will walk away from this free 3-hour workshop equipped with the knowledge for implementing AG Grid into your React application.
We all know that rolling our own grid solution is not easy, and let's be honest, is not something that we should be working on. We are focused on building a product and driving forward innovation. In this workshop, you'll see just how easy it is to get started with AG Grid.
Prerequisites: Basic React and JavaScript
Workshop level: Beginner