How to set up typescript with react-native

Easier than setting up react with it

Sunset in Valencia, my phone.

A few weeks ago I wanted to experiment with react-native.
Mobile development has always interested me.
Since you can now write applications with just JavaScript, why not leverage this opportunity and make use of Typescript?

Why Typescript?

Typescript offers a lot more on top of JavaScript and React.

Just the safety of knowing every prop, function parameter and return will warn you if you try to use it in a way that it is not accounted for is invaluable.

Thinking about all the major bugs and errors I encountered during these years as a JavaScript developer, most were regarding wrong parameters in undocumented functions. There is no way to find out the problem until you, or unfortunately, a client/user, reaches a specific condition.

Typescript, coupled with a good testing environment makes your application more error safe and your code easier to understand for new developers thus causing even less mistakes.

Set up react-native

Setting up a react-native project is easier than ever thanks to Expo.

$ npm i -g expo-cli
$ expo init my-folder
$ cd my-folder

And that’s it!
You’ll have a full project ready for you to use, just use expo start to start it and with hot-reload enabled.

After that you’ll only need the expo app on your phone to see your app live.

This will open automatically, use the expo app on your phone and scan the QR code to see your app live.

Adding Typescript

All this is pretty cool, but what about Typescript support?

Turns out it’s pretty easy to add, let’s see how.

First of all, let’s add the typescript package:

npm i -D typescript

And then let’s add a tsconfig.json, you can get the basic one from the typescript docs here.
I improved mine to suit my preferences a bit better (mostly being able to write default imports without the *).

// tsconfig.json
{
  "compilerOptions": {
  "outDir": "build",
  "rootDir": "src",
  "sourceMap": true,
  "noImplicitAny": true,
  "noUnusedLocals": true,
  "noUnusedParameters": true,
  "module": "commonjs",
  "target": "es6",
  "jsx": "react",
  "strict": true,
  "typeRoots": ["node_modules/@types", "src/custom-types"], 
  "baseUrl": ".",
  "moduleResolution": "node",
  "esModuleInterop": true  },
  "include": ["./src/**/*"],
  "exclude": ["node_modules"]
}

After this we need to configure babel so it can compile typescript.
First we’ll need the presets.

npm i -D @babel/preset-typescript

And then we just include them in the babel.config.js file already available.

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo', '@babel/typescript'],
  };
};

Now let’s install types for both react and react-native

npm i -D @types/react @types/react-native

And we’re pretty much done, change the extension of App.jsx to .tsx and you can already write Typescript code!

The app will run just as before, with the awesome addition of type checking and intellisense (with VSCode).

Github link of the project is available here. Feel free to clone!