,
10 tweets,
3 min read
Read on Twitter
I just got the first big TypeScript port payoff. All API communication is statically checked on both the server and the client. I tested it by renaming ~100 identifiers at once. 3,914 lines of total diff. Once I got it to typecheck, it worked the first time. It took ~30 minutes.
The idea of doing a huge identifier switch like this in Ruby fills me with fear. Without the huge effort of getting to 100% test coverage, it would cause so many bugs in obscure corners of the system. OTOH, the function I wrote to define checked server routes is 34 lines long.
(You can substitute JavaScript or any other dynamic language in place of Ruby in this tweet if you like; there's no difference in this case.)
I was worried that I was missing something huge and obvious – "why aren't people doing this?!" But I wasn't missing anything. If you're using TypeScript without static checking of API communication on both sides of the app then you're wasting much of its value.
Statically typed API communication is what made me finally do this port. The client was already in TypeScript; the server worked fine in Ruby. But keeping the two sides of the API in sync took so much effort. I had to write a lot of my own tools, but now I'm here and it's good.
Yes, I'm sharing type definitions between the backend and frontend. The server also does runtime validation of incoming API data. That validation and the static types come from a single type definition. And I have static checking that those runtime checks match the static types.
(How it works: the definition of the API is done via io-ts. Static types are extracted from io-ts validators with the usual `t.TypeOf<typeof validator>`. When you define a route, you mention the validator. The static API types are inferred for free from that validator.)
This adds minimal API definition overhead. Here's the smallest handler:
post("/api/feedback.json", requests.feedback,
requireUser(
async ({user, input}) => {
await mailer.sendFeedbackEmail(user.email, input.userComments)
return {}
}
)
)
post("/api/feedback.json", requests.feedback,
requireUser(
async ({user, input}) => {
await mailer.sendFeedbackEmail(user.email, input.userComments)
return {}
}
)
)
requests.feedback is the io-ts validator. requireUser pulls the user out of the session and redirects if they're not logged in. It wraps the handler because it adds the user key to that `{user, input}` object that you see the handler taking. Zero types named explicitly.
All of this has zero cost in terms of runtime speed or bundle size. The client-side bundle is 121 bytes smaller than when I started (because many of those identifier renames that I did were switching underscore_case to camelCase). All of the types are erased at runtime.
