ReactNativeでTypeScriptを使う

2020.6.24

Using TypeScript with React Native · React Nativeを参考にしながらReactNativeでTypeScriptを使う環境構築をしていきたいと思います。

ReactNative自体の環境構築は以前のこちらの記事を参照してください。

React Native環境構築 | blog.kwst.site

ReactNativeプロジェクトにTypeScriptを導入していく

initコマンドでプロジェクトをまず作ります。

npx react-native init ReactNativePractice

TypeScript関連のモジュールをインストールする

TypeScriptの他に既にインストールされているモジュールの型定義モジュールをインストールします。

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

tsconfig.jsonを作成する

プロジェクトルートにTypeScriptのための設定ファイルtsconfig.jsonを作成します。コンパイルの設定などを書いておくファイルです。

{
  "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"
  ]
}

Jestの設定ファイルを追加

Jestのための設定ファイルjest.config.jsを作成します。

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

JSファイルをTSファイルに拡張子を変える

.jsファイルの拡張子を.tsxに変えていきます。

You should leave the ./index.js entrypoint file as it is otherwise you may run into an issue when it comes to bundling a production build.

と書いてあるのでエントリポイントであるindex.jsはそのまま残しておきます。

yarn tscでコンパイルしてみる

コンパイルしてみると下記の通りコンパイルエラーが出ました。

$ yarn tsc
yarn run v1.15.2
$ /ReactNativePractice/node_modules/.bin/tsc
App.tsx:27:18 - error TS2304: Cannot find name 'React$Node'.

27 const App: () => React$Node = () => {
                    ~~~~~~~~~~

App.tsx:36:19 - error TS2339: Property 'HermesInternal' does not exist on type 'Global & typeof globalThis'.

36           {global.HermesInternal == null ? null : (
                     ~~~~~~~~~~~~~~

Found 2 errors.

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

React$Nodeに関してはReact.ReactNodeに変更したら解消されました。

global.HermesInternalに関してはCannot find name 'global'.ts(2304) · Issue #71 · react-native-community/react-native-template-typescript · GitHubを参考にして下記のglobal定義を追加して回避しました。

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

npx react-native startとnpx react-native run-iosでアプリを起動することができました。

© 2019-2024 kwst.site.