Home
%3CLINGO-SUB%20id%3D%22lingo-sub-1136376%22%20slang%3D%22en-US%22%3EAdd%20TypeScript%20support%20to%20React%20Native%20for%20Windows%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1136376%22%20slang%3D%22en-US%22%3E%3CP%3EReact%20Native%20is%20an%20interesting%20technology!!%20Theer%20are%20many%20great%20articles%20our%20team%20blog.%3C%2FP%3E%0A%3CUL%3E%0A%3CLI%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fwindows-dev-appconsult%2Fgetting-started-with-react-native-for-windows%2Fba-p%2F912093%22%20target%3D%22_self%22%3EGetting%20started%20with%20React%20Native%20for%20Windows%3C%2FA%3E%3C%2FLI%3E%0A%3CLI%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fwindows-dev-appconsult%2Fbuilding-a-react-native-module-for-windows%2Fba-p%2F1067893%22%20target%3D%22_self%22%3EBuilding%20a%20React%20Native%20module%20for%20Windows%3C%2FA%3E%3C%2FLI%3E%0A%3CLI%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fwindows-dev-appconsult%2Fcreate-a-ci-cd-pipeline-for-a-react-native-for-windows%2Fba-p%2F1083253%22%20target%3D%22_self%22%3ECreate%20a%20CI%2FCD%20pipeline%20for%20a%20React%20Native%20for%20Windows%20application%3C%2FA%3E%3C%2FLI%3E%0A%3CLI%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fwindows-dev-appconsult%2Freact-native-for-windows-and-native-modules-how-to-add-ci-cd-to%2Fba-p%2F1085473%22%20target%3D%22_self%22%3EReact%20Native%20for%20Windows%20and%20native%20modules%3A%20how%20to%20add%20CI%2FCD%20to%20your%20project%3C%2FA%3E%3C%2FLI%3E%0A%3C%2FUL%3E%0A%3CP%3EIn%20this%20article%2C%20I%20will%20explain%20to%20add%20TypeScript%20support%20to%20a%20RN4W%20project.%3C%2FP%3E%0A%3CH2%20id%3D%22toc-hId--1411698583%22%20id%3D%22toc-hId--1411698583%22%3ECreate%20a%20new%20RN4W%20project(JS)%3C%2FH2%3E%0A%3CP%3EFirst%2C%20we%20create%20a%20new%20RN4W%20project%20in%20JavaScript.%20The%20completely%20steps%20are%20writtn%20on%20the%20official%20GitHub%20repository.%3C%2FP%3E%0A%3CP%20style%3D%22padding-left%3A%2030px%3B%22%3E%3CSTRONG%3EConsuming%20react%20native%20windows%3C%2FSTRONG%3E%3CBR%20%2F%3E%3CA%20href%3D%22https%3A%2F%2Fgithub.com%2Fmicrosoft%2Freact-native-windows%2Fblob%2Fmaster%2Fvnext%2Fdocs%2FConsumingRNW.md%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fgithub.com%2Fmicrosoft%2Freact-native-windows%2Fblob%2Fmaster%2Fvnext%2Fdocs%2FConsumingRNW.md%3C%2FA%3E%3C%2FP%3E%0A%3CP%3EAfter%20doing%20the%20steps%2C%20we%20will%20see%20following%3A%3C%2FP%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22KazukiOta_0-1580982883306.png%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F169362iC466D6BC8E25F91C%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20title%3D%22KazukiOta_0-1580982883306.png%22%20alt%3D%22KazukiOta_0-1580982883306.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CH2%20id%3D%22toc-hId-1075814250%22%20id%3D%22toc-hId-1075814250%22%3EAdd%20TypeScript%20support%3C%2FH2%3E%0A%3CP%3EThere%20is%20a%20official%20document%20that%20is%20%22Adding%20TypeScript%20to%20an%20Existing%20Project.%22%3CBR%20%2F%3E%3CA%20href%3D%22https%3A%2F%2Ffacebook.github.io%2Freact-native%2Fdocs%2Ftypescript%23adding-typescript-to-an-existing-project%22%20target%3D%22_blank%22%20rel%3D%22noopener%20nofollow%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Ffacebook.github.io%2Freact-native%2Fdocs%2Ftypescript%23adding-typescript-to-an-existing-project%3C%2FA%3E%3C%2FP%3E%0A%3CP%3EThe%20steps%20also%20works%20for%20React%20Native%20for%20Windows.%20So%20let's%20type%20following%20command%3A%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CPRE%20class%3D%22lia-code-sample%20language-markup%22%3E%3CCODE%3Eyarn%20add%20typescript%20%40types%2Fjest%20%40types%2Freact%20%40types%2Freact-native%20%40types%2Freact-test-renderer%3C%2FCODE%3E%3C%2FPRE%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CSPAN%3EAnd%20adding%20tsconfig.json%20like%20below%3A%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CPRE%20class%3D%22lia-code-sample%20language-javascript%22%3E%3CCODE%3E%7B%0A%20%20%20%20%22compilerOptions%22%3A%20%7B%0A%20%20%20%20%20%20%22allowJs%22%3A%20true%2C%0A%20%20%20%20%20%20%22allowSyntheticDefaultImports%22%3A%20true%2C%0A%20%20%20%20%20%20%22esModuleInterop%22%3A%20true%2C%0A%20%20%20%20%20%20%22isolatedModules%22%3A%20true%2C%0A%20%20%20%20%20%20%22jsx%22%3A%20%22react%22%2C%0A%20%20%20%20%20%20%22lib%22%3A%20%5B%22es6%22%5D%2C%0A%20%20%20%20%20%20%22moduleResolution%22%3A%20%22node%22%2C%0A%20%20%20%20%20%20%22noEmit%22%3A%20true%2C%0A%20%20%20%20%20%20%22strict%22%3A%20true%2C%0A%20%20%20%20%20%20%22target%22%3A%20%22esnext%22%2C%0A%20%20%20%20%20%20%22resolveJsonModule%22%3A%20true%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22exclude%22%3A%20%5B%0A%20%20%20%20%20%20%22node_modules%22%2C%0A%20%20%20%20%20%20%22babel.config.js%22%2C%0A%20%20%20%20%20%20%22metro.config.js%22%2C%0A%20%20%20%20%20%20%22jest.config.js%22%0A%20%20%20%20%5D%0A%20%20%7D%3C%2FCODE%3E%3C%2FPRE%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EThere%20is%20a%20different%20line%20from%20the%20original%20document.%20I%20added%20%22resolveJsonModule%22%3A%20true%20because%20in%20the%20React%20Native%20template%20app%20is%20using%20import%20JSON%20file%20directly.%3C%2FP%3E%0A%3CP%3EAnd%20adding%20jest.config.js%20like%20below.%20This%20is%20a%20same%20as%20the%20original%20document.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CPRE%20class%3D%22lia-code-sample%20language-javascript%22%3E%3CCODE%3Emodule.exports%20%3D%20%7B%0A%20%20preset%3A%20'react-native'%2C%0A%20%20moduleFileExtensions%3A%20%5B'ts'%2C%20'tsx'%2C%20'js'%2C%20'jsx'%2C%20'json'%2C%20'node'%5D%2C%0A%7D%3B%3C%2FCODE%3E%3C%2FPRE%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EThe%20next%2C%20rename%20file%20extensions%20from%20.js%20to%20.tsx.%20There%20are%20two%20target%20files%20that%20are%20App.js%20and%20index.js.%3C%2FP%3E%0A%3CP%3EAfter%20that%2C%20you%20can%20launch%20the%20app%20like%20below%3A%3C%2FP%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22KazukiOta_0-1580983915027.png%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F169368i385E7D18AEC2FC31%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20title%3D%22KazukiOta_0-1580983915027.png%22%20alt%3D%22KazukiOta_0-1580983915027.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3EBut%20there%20is%20a%20compile%20error%20in%20App.tsx%20yet.%20Adding%20a%20following%20type%20declare%20to%20above%20of%20App%20component%20definition%20to%20fix%20the%20error.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CPRE%20class%3D%22lia-code-sample%20language-javascript%22%3E%3CCODE%3Edeclare%20var%20global%3A%20%7BHermesInternal%3A%20null%20%7C%20%7B%7D%7D%3B%3C%2FCODE%3E%3C%2FPRE%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EIf%20you%20remove%20global.HermesInternal%20from%20App.tsx%2C%20then%20you%20can%20remove%20the%20row.%3C%2FP%3E%0A%3CP%3EAfter%20that%2C%20you%20can%20get%20intellisence%20everywhere.%3C%2FP%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22KazukiOta_1-1580984801768.png%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F169370i90B75D707FC7C33B%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20title%3D%22KazukiOta_1-1580984801768.png%22%20alt%3D%22KazukiOta_1-1580984801768.png%22%20%2F%3E%3C%2FSPAN%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22KazukiOta_0-1580984776787.png%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F169369i037576D4A28BFEDF%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20title%3D%22KazukiOta_0-1580984776787.png%22%20alt%3D%22KazukiOta_0-1580984776787.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3EHappy%20type%20safe%20coding!!%3C%2FP%3E%3C%2FLINGO-BODY%3E
Microsoft

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:

KazukiOta_0-1580982883306.png

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, rename file extensions from .js to .tsx. There are two target files that are App.js and index.js.

After that, you can launch the app like below:

KazukiOta_0-1580983915027.png

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.

KazukiOta_1-1580984801768.pngKazukiOta_0-1580984776787.png

Happy type safe coding!!