This article assumes you know about Typescript, its advantages and that you already have it installed and ready to use. We also assume you have create-react-native-app installed as this will be the starting point from which we're going to add Typescript. An assumption we're giving you to make is that this is actually easy. In our experience, injecting Typescript into the more popular Javascript frameworks and sophisticated build processes (i.e. webpack) has sometimes proven quite challenging. Refreshingly, getting Typescript support into React Native is quick and easy. Lets get started!

A lot of what makes this simple is thanks to David Sheldrick's react-native-transformer package. So lets get that installed.

yarn add --dev react-native-typescript-transformer typescript

Next, in your project root, create a rn-cli.config.js file, and add the following:

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

And if you haven't already, you'll need a

tsconfig.json

file to configure Typescript to place nicely with React Native.

{
  "compilerOptions": {
    "target": "es2015",
    "module": "es2015",
    "jsx": "react-native",
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true
  }
}

Yes, we're pretty much done here. This will essentially slip Typescript right in because it still works with Expo (or ejected), hot module reloading and all of the other features provided out of the box by create-react-native-app. Start renaming your '.jsx' files to '.tsx' and your '.js' to '.ts' and begin enjoying the benefits of Typescript!

Yye Software is a custom mobile application development shop in the metro Atlanta area. From our Kennesaw office, we provide custom mobile apps for business. We deliver mobile app solutions for both Android and iOS. Please contact us for a free consultation today.