Converting to TypeScript with React Native in 5 minutes

Enabling typescript on a React Native codebase.

October 15, 2018 - 2 minute read -
development

This tutorial is heavily inspired by the one in React Native’s blog. The goal here is to have a minimal setup to get us up and running with TypeScript, so some things have been excluded and others were included for TS to run.

1. Start by installing dependencies:

yarn add -dev typescript react-native-typescript-transformer @types/react @types/react-native
 

2. Create a typescript configuration:

yarn tsc --init --pretty --jsx react
 

which will create a tsconfig.json file at the root of your project.

3. Make changes in tsconfig.json:

Search for allowSyntheticDefaultImports, and enable it by setting it to true.

Now, let’s change our outDir to outputs. This enables to have our transpiled files in a folder instead of having them next to the non-transpiled ones.

Now, and just for the sake of getting started quickly on an errorless state, we want to skip the type checking on default library declaration files by adding "skipLibCheck": true.

So, our tsconfig.json should include

{
  "compilerOptions": {
	  // ...
	  "skipLibCheck": true,
	  "outDir": "outputs",
	  "allowSyntheticDefaultImports": true
	  }
}
 

4. Configure the React Native Script Transformer.

Let’s create the file that holds these settings, by doing touch rn-cli.config.js, opening it and adding:

module.exports = {
  getTransformModulePath() {
    return require.resolve('react-native-typescript-transformer');
  },
  getSourceExts() {
    return ['ts', 'tsx'];
  },
};
 

5. That’s it!

Run tsc -w in the terminal and everything should be working!