Configs to make in an existing React Native project to migrate it to Typescript

notes.md

I'M NOT RESPONSIBLE FOR WHAT YOU DO IN YOUR PROJECT. DO IT AT YOUR OWN RISK

These configs are based in setup.js and package.json from React Native Template Typescript.

• If you starting your project now, I recommend to use the typescript template, with the following command:

  react-native init MyApp --template typescript

• Keep the root index.js file with .js extension.

• If you use PropTypes before the migration, you can delete its package running:

  yarn remove prop-types

• Keep in mind that you have to add @types declarations for most libs you add. Some libs already has types out of the box, like Redux and NativeBase. For these, there's no need to add a @types dependency. Others need to add @types dependecy, like React (@types/react) and React-Native-FBSDK (@types/react-native-fbsdk). And some others have no type declarations, like Reactotron-Redux. For these, you have to add type declarations manually. To make it, add a file that has .d.ts extension anywhere in your src folder, with:

  declare module 'name-of-module' {
  // here you can add things that you can use
  }
  

  Some IDEs, like VSCode, do it automatically if you choose it.

If you will use Typescript, enjoy it and all its ecosystem. It's very powerfull. 😄

package-json.md

There's no need to put this file in the project

Only follow the instructions to update your package.json file

• run in a terminal (I use yarn, but you can use npm too)

  yarn add -D typescript @types/jest @types/react @types/react-native @types/react-test-renderer

• delete files: ['.flowconfig']

• rename files:

  ['App.js', '__tests__/App-test.js'] to

  ['App.tsx', '__tests__/App-test.tsx']

  NOTE: If you creating the project now (just in case), I recommend to use the following command to start using typescript template:

  react-native init MyApp --template typescript

  where "MyApp" is the name of your app

rename.js

// Script for rename ./src files from .js(x) to .ts(x). (it's not perfect, but works)
// NOTE: If you choose or have few files, you CAN rename them manually
// Put it into the root of your project (aside with package.json) and run `node rename.js`
// After runs, you can delete this file manually
// What this script do is to rename src/{**}index.js files (in my project, most index.js files are my .tsx ones), and another files to .ts
// Maybe in your project, you have to modify this script to rename correct files (like checking for .jsx to .tsx)
// Sometime later, I'll make a better script that you can choose a way to rename files

const fs = require('fs');
const path = require('path');

function readDirAndRename(...paths) {
  fs.readdirSync(path.resolve(__dirname, ...paths)).forEach((filePath) => {
    console.log(filePath);
    const isDir = fs.lstatSync(path.resolve(...paths, filePath)).isDirectory();
    if (isDir) {
      readDirAndRename(...paths, filePath);
    } else {
      const [name, extension] = filePath.split('.');
      if (extension && extension === 'js') {
        if (name === 'index') {
          console.log('renaming', filePath, 'to be tsx');
          fs.renameSync(path.resolve(...paths, filePath), path.resolve(...paths, `${name}.tsx`));
        } else {
          console.log('renaming', filePath, 'to be ts');
          fs.renameSync(path.resolve(...paths, filePath), path.resolve(...paths, `${name}.ts`));
        }
      }
    }
    console.log('');
  });
}

readDirAndRename('src');

tsconfig.json

// Put it into the root of your project (aside with package.json)
// if you have a jsconfig.json, i recomend to delete it
{
  "compilerOptions": {
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "isolatedModules": true,
    "jsx": "react",
    "lib": ["es6"],
    "moduleResolution": "node",
    "noEmit": true,
    "strict": true,
    "target": "esnext",
    "baseUrl": "./", // this is for use option below (if you don't use it, ignore)
    "paths": { // this is for babel module resolver and better integration with it, tsc and IDE (if you don't use it, ignore)
      "*": ["src/*"],
      "test/*": ["test/*"]
    },
    "resolveJsonModule": true, // only if you import json files in your typescript files
    "skipLibCheck": true // don't check lib 
  },
  "exclude": ["node_modules"] // put here another folders that you don't want to compile (in my case, i put "native-base-theme" too)
}