React Native with TypeScript
Complete guide to convert a React Native project to TypeScript
Update 27 Jun ’18: Thanks for overwhelming response to this article. React Native has come a long way since I wrote the original article an year ago. Configuring TypeScript is much easier now. Today, I have updated this article with the new steps. Enjoy!
TypeScript is a superset of JavaScript which primarily provides optional static typing, classes and interfaces. Since 2012, TypeScript has been a popular choice among programmers coming to JavaScript from more structured languages.
One of the benefits of TypeScript is better tooling. TypeScript enables IDEs to provide a richer environment for spotting common errors as you type the code (vs running a tool after you’ve finished the code). Also you get to use Visual Studio Code — a performant editor that comes with great integration for TypeScript. For a large JavaScript project, adopting TypeScript might result in more robust software, while still being deployable where a regular JavaScript application would run. Backward compatibility with the JavaScript versions is another advantage of using TypeScript. In short, TypeScript provides great tooling and language services for autocompletion, code navigation and refactoring and provide great backward compatibility.
Enough with the advantages! The advantages of the tools used in this project verses the alternatives (TypeScript vs Flow, Visual Studio vs Atom, Babel vs TypeScript) are beyond the scope of this article. My guess is, you already know the benefits of TypeScript. However I will leave some useful links towards the end of this article.
This guide will take you through the steps required for setting up a React Native project in TypeScript.
Setup React Native
We will start with the same steps as with a normal React Native project (in JavaScript). I’m going to describe the minimal steps here, because React Native’s Getting Started Guide is well documented.
Install XCode (for iOS) and Android Studio (for android).
Create Project
Easy and effective way to start with a react-native project is to use CLI. The command below will generate a project with all the setup required for development including babel, iOS and Android setup. This project is in JavaScript; we will convert it to TypeScript soon. Choose a name for the project; Todo is the name I prefer for this tutorial.
react-native init Todo
Setup Visual Studio Code
Visual Studio Code is one of the best editors out there today, especially for TypeScript projects. Since our objective is to convert RN project to TypeScript, let’s go ahead and install VSCode first. You can skip this section if you are already familiar with VSCode setup.
Download Visual Studio Code and install. Open Visual Studio Code and press Cmd+Shift+P and type Code. Select the command Shell Command: Install 'code' command in PATH.
You must configure TSLint extension to be able to do static checks from within the editor. Install it from the extensions tab.
Configure & Test
Before we start converting the project to TypeScript, we need to be sure that our setup works. I’m going to setup iOS and test. You could alternatively try android, especially if you are trying this tutorial from Windows.
Let’s open the project in VSCode. Go to the project folder Todo and type code .;
Update package.json
That’s all for now, but we will come back and add more later. Let’s run and see if everything is fine.
npm run ios
To enable Live Reload or Hot Reload, press Cmd+D from the simulator window; you will see developer menu. Select either Live Reload or Hot Relaod.
And finally, let’s add our work upto this point to a git repository. VS Code comes with awesome integration for git; so open Git Tab and hit Initialize Git Repository. Give a comment and commit.
Setup TypeScript
Now let’s configure TypeScript for this project. We will start by installing TypeScript library, linter and some other required libraries.
npm install typescript tslint tslint-react tslint-eslint-rules react-native-typescript-transformer tslint-react-recommended --save-devCreate tsconfig.json
Create tsconfig.json at the root of the project with the following configuration:
Add typings
We must install typings for React and React Native libraries (typings are definition files — read more about it here) for the best linter experience.
npm install @types/react @types/react-native --save-devConfigure React Native CLI
Create rn-cli.config.js at the root of the project with the following content. This is a very important step. Be careful with the file name.
Setup TSLint
The whole purpose of converting this project to TypeScript is to get proper linter errors as we type and TSLint is here to help. To add TSLint support, create a file tslint.json at the root of the project with the following content:
Feel free to change these configurations as per the coding standards of your project. Check out this link for more details. Now let’s add linter script to package.json
You may have to restart Visual Studio Code at this point for TSLint to start showing errors. Or else you could reload the window by following: CMD + P , type > Reload and select Reload Window
Refactor Code to TypeScript
Create src folder and add app.tsx. You may also remove App.js from the root of the
Create src/app.tsx
Update index.js
Run
You see the same window as before. Commit new files to git and update the existing ones.
Setup Test Suit
Test Suits are important to your project. It’s necessary to write test suites in TypeScript to get the best of both worlds — TypeScript & Testing.
Install required modules:
npm i jest @types/jest ts-jest react-test-renderer @types/react-test-renderer --save-devCreate src/app.test.tsx:
Update package.json with the following jest configuration:
Run npm test. You must see the coverage report in console. More detailed report in HTML format is available at coverage/lcov-report/index.html
And finally
We have a react native project in TypeScript. The final package.json will look like this:
