Blog Post

Modern Work App Consult Blog
2 MIN READ

Add TypeScript support to React Native for Windows

KazukiOta's avatar
KazukiOta
Icon for Microsoft rankMicrosoft
Feb 06, 2020

React Native is an interesting technology!! Theer are many great articles our team blog.

In this article, I will explain to add TypeScript support to a RN4W project.

Create a new RN4W project(JS)

First, we create a new RN4W project in JavaScript. The completely steps are writtn on the official GitHub repository.

Consuming react native windows
https://github.com/microsoft/react-native-windows/blob/master/vnext/docs/ConsumingRNW.md

After doing the steps, we will see following:

Add TypeScript support

There is a official document that is "Adding TypeScript to an Existing Project."
https://facebook.github.io/react-native/docs/typescript#adding-typescript-to-an-existing-project

The steps also works for React Native for Windows. So let's type following command:

 

 

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

 

 

And adding tsconfig.json like below:

 

 

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

 

 

There is a different line from the original document. I added "resolveJsonModule": true because in the React Native template app is using import JSON file directly.

And adding jest.config.js like below. This is a same as the original document.

 

 

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

 

 

The next, change the file extensions other than index.js from .js to .tsx . App.js is a target file.

After that, you will be able to launch the app like below:

But there is a compile error in App.tsx yet. Adding a following type declare to above of App component definition to fix the error.

 

 

declare var global: {HermesInternal: null | {}};

 

 

If you remove global.HermesInternal from App.tsx, then you can remove the row.

After that, you can get intellisence everywhere.

Happy type safe coding!!

Updated May 19, 2020
Version 3.0
No CommentsBe the first to comment