React Native Static type Checking Code

28 July 2020

Introduction

Hi Amigo, we usually write our code and we create a Merge Request to get our code reviewed but there should be a way to validate the code at compile type instead of run time.

Advantage of Static type checking is that it allows you to catch errors quickly, reliably and automatically, which indirectly reduces bugs and time spent on debugging.

The tool which we will be  using is TypeScript.

The reason for using TypeScript overflow is Typescript is faster than flow and comes with more features.

New React native project comes with both TypeScript and flow configured which make it easy to use.

This tutorial assumes that the reader would be knowing about Typescript, if not please read about TypeScript to get more insights of.

Installation

There are 2 ways to integrate TypeScript with React native

1. Using TypeScript Template provided by React native
2.  configuring the existence project.

New React Native Project/Typescript Templating:

npx react-native init MyRNProject --template react-native-template-typescript@6.2.0

Existing Project

• Installation

  npm install --save-dev typescript @types/jest @types/react @types/react-native

• Next step is to create a tsconfig.json  in the project’s root Directory. Here is the default configuration file.

  {
    "compilerOptions": {
      "allowJs": true,
      "allowSyntheticDefaultImports": true,
      "esModuleInterop": true,
      "isolatedModules": true,
      "jsx": "react",
      "lib": ["es6"],
      "moduleResolution": "node",
      "noEmit": true,
      "strict": true,
      "target": "esnext"
    },
    "exclude": [
      "node_modules",
      "babel.config.js",
      "metro.config.js",
      "jest.config.js"
    ]
  }
  

  Note: lib in configuration can be changed to es7, depending on the javascript standard used.

• We need to configure jest to use TypeScript for this we need to create a  jest.config.js in root directory and paste below block

  module.exports = {
  preset: 'react-native',
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
  };

• We need to rename all .js file to .tsx file in order to use TypeScript.
• Command to run Typescript:

  npm:
  npm run tsc
  
  Yarn:
  yarn tsc

Working Example/Use

Create a new file and name it as MyComponent.tsx and refer below code:

//MyComponent.tsx
import React from 'react';
import {Button, Text, View} from 'react-native';

export interface Props {
fullName: string;
count?: number;
}

const MyComponent: React.FC<Props> = (props) => {
const [count, setCount] = React.useState(props.count);

const onCountIncrement = () => setCount((count || 0) + 1);
const onCountDecrement = () => setCount((count || 0) - 1);

return (
<View style={styles.root}>
<Text>
Hi {props.fullName}
</Text>

<View >
<View >
<Button
title="Decrement"
onPress={onCountDecrement}
/>
</View>

<View >
<Button
title="Increment"
onPress={onCountIncrement}
/>
</View>
</View>
</View>
);
}

export default MyComponent;