Typescript is a one-way street: Once you start using it, it's hard to go back to plain JS. In fact, you'll probably decide to write your entire application in TypeScript.

After happily typing all of your models, you notice that there's a disconnect: Your types don't make it over the wire! Neither the server or client have any information about what types HTTP requests or responses should be.

RESTyped was designed to bridge the gap by creating an easy way to share types between your API server and any public or private clients.

Strongly typed API calls

In the GIF above we're writing a GET request to the excellent Giphy API using its RESTyped definition. Here are 3 things you may have noticed:

1. The editor is auto-suggesting routes available in the API
2. The query params are type checked
3. The res.data object is automagically typed

Bonus: The API call was made using normal axios syntax.

When you consume an API with a RESTyped definition, you'll save time jumping back and forth between docs and code, and reduce bugs in the process. It's an easier, safer way to consume APIs.

Strongly typed route definitions

If you've written your backend in node.js, you can take advantage of end-to-end typing by creating one RESTyped definition file and sharing it between your server and client.

Currently, RESTyped supports express.js in the form of restyped-express-async. Here's what a route definition looks like:

If your server and client don't exist in the same repo, I recommend keeping the RESTyped definition in your server's repo and publishing it as a npm module with lerna.

How it works

You can use RESTyped by creating or importing a RESTyped definition file and using one of the available library wrappers to declare and call your routes with strong typing.

RESTyped is a creative exploitation of TypeScript's keyof/Lookup Types (introduced in 2.1), Generic Parameter Defaults (introduced in 2.3) and improved generic inference (introduced in 2.4). It's actually very simple, and the best way to grok it is to read the spec, examples and client implementation.

I highly recommend you use Visual Studio Code as your editor for the best experience, as it has the best TypeScript support and auto suggestions available.

Why RESTyped, and why now

I've been writing full-stack apps for over 5 years. As I became enamored with TypeScript, I saw potential for creating a project that would give API development the same seamless experience that TypeScript provides for the rest of an application.

Some of the features I needed to make it happen weren't available in TypeScript, however, and it wasn't until version 2.4 that all the pieces fell into place. That's when I started working on RESTyped.

There are other solutions to build typed APIs out there, like GraphQL, but I don't like the idea of wrangling two separate type systems, and I love the simplicity of REST APIs. RESTyped gives you strong typing for your API without re-architecting your whole API layer or making big compromises.

Who uses this

I use RESTyped to save time building Falcross, the world's largest Picross puzzle community. Habitat uses RESTyped to sync their food delivery API with internal and external clients.

You can also check out the Giphy API definition and use it in your own project!

Further reading

I'm consistently inspired by the cool TypeScript projects and stories I see around the web. Here are a few of my recent favorites:

• TypeChain and Bloom's work to create type-safe Ethereum smart contracts
• This blog post about how Lyft uses TypeScript and their JS-to-TS PropTypes converter library
• Nest.js, a web application framework built in TS with some interesting FP/FRP ideas

Questions, comments, or feedback? I'd love to hear what you think about RESTyped! Hit me up at @rawrmaan or e-mail me at [email protected].

HN discussion: https://news.ycombinator.com/item?id=15934289

Redesigned profiles

Profiles now adjust to big screens nicely and have a larger, bolder Follow button to attract more followers. There's also a larger focus on your achievments--your profile will now display up to 3 leaderboards that you rank on, regardless of whether you're primarily a player or an artist.

Redesigned leaderboards

Leaderbords received a nice visual refresh, and some leaderboards now update more frequently. Plus, there's finally an all-time Stars Earned leaderboard! That's right, after years of the stars icon in the Puzzles tab doing nothing when you press on it, it finally has a purpose.

Notifications move to Feed tab

You'll find that the Notifications button is gone in your Profile tab. That's because Notifications have moved to the Feed tab for easier access!

Plus, if you're on Android, you won't get an annoying in-your-face alert every time a notification comes in.

You might also notice that notifications now update in real time while you're in-game. Neat!

Numbers bug fixed

Some of you reported that some numbers weren't showing up on certain puzzles as of the last update. This is now fixed. Thanks for your reports, and especially for including screenshots!

Technical details: In 5.12.1, I improved number rendering to reduce blurriness on Android by using small, base64-encoded versions of the numbers (about 7x7 pixels each) when numbers were below a certain size instead of scaling down 300x300 png's require'd through Metro Bundler.

The readability difference was drastic, but it turns out that React Native's Image component has a bug that causes it to occasionally not load base64 images on initial render: https://github.com/facebook/react-native/issues/12120

I've reverted to using require only, but kept the dynamic loading of smaller images on Android. This retains the readability improvements while ensuring all numbers show up when you open a puzzle.

Under the hood

Leaderboard generation for many leaderboards is now much more efficient, putting less strain on the database so you will have a smoother online experience during busy playtimes.

Until next time, thanks for playing Falcross!