JavaScript! We all love it. But some of us also love types. Luckily, options exist to add stronger types to JavaScript. My favourite is TypeScript, but React Native supports Flow out of the box. Which you prefer is a matter of preference, they each have their own approach on how to add the magic of types to JavaScript. Today, we're going to look at how to use TypeScript in React Native apps.

-

We'll be using Microsoft's TypeScript-React-Native-Starter repo as a guide.

+

This post uses Microsoft's TypeScript-React-Native-Starter repo as a guide.

+

Update: Since this blog post was written, Babel 7 was released with integrated TypeScript support. Babel 7 replaces all the set up described in this blog post with just one command:

+
react-native init MyAwesomeProject --template typescript
+
+

However, there are some limitations to Babel's TypeScript support, which the blog post above goes into in detail. The steps outlined in this post still work, and Artsy is still using react-native-typescript-transformer in production, but the fastest way to get up and running with React Native and TypeScript is using the above command. You can always switch later if you have to.

+

In any case, have fun! The original blog post continues below.

Prerequisites

Because you might be developing on one of several different platforms, targeting several different types of devices, basic setup can be involved. You should first ensure that you can run a plain React Native app without TypeScript. Follow the instructions on the React Native website to get started. When you've managed to deploy to a device or emulator, you'll be ready to start a TypeScript React Native app.

You will also need Node.js, npm, and Yarn.