ReactNative に TypeScript を導入してみました

React Native（0.57.8） に TypeScript を導入してみた

基本的にはMicrosoftの説明を見ればできますが、コンパイルにエラーが発生するので備忘録的に書こうと思います。

プロジェクトの初期化

ここは公式サイトそのままです。

react-native init MyAwesomeProject
cd MyAwesomeProject

TypeScriptの追加

• モジュールの追加
  ここも公式サイトそのままです。
  

yarn add --dev typescript
yarn add --dev react-native-typescript-transformer
yarn tsc --init --pretty --jsx react
touch rn-cli.config.js
yarn add --dev @types/react @types/react-native

• tsconfig.json　の修正（公式サイトの修正）
  コメントアウトされているところを下記のように外します。

tsconfig.json　

{
  ...
   "allowSyntheticDefaultImports": true,  /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
  ...
}

• tsconfig.jsonの修正（コンパイルエラーをなくすためにしたこと）
  allowSyntheticDefaultImportsの修正だけでも動くことには動くが、コンパイルエラーとなるため 下記のような設定を追加しました。

tsconfig.json　

{
  ...
  "target": "es2015",
  "module": "es2015",
  "lib": ["es2015"], 
  "moduleResolution": "node",
  ...
}

• rn-cli.config.jsの修正（公式サイト通りに）
  公式サイトの通りに下記を追加します。

rn-cli.config.js

module.exports = {
  getTransformModulePath() {
    return require.resolve("react-native-typescript-transformer");
  },
  getSourceExts() {
    return ["ts", "tsx"];
  }
};

TypeScriptへの移行（公式サイトそのまま）

• App.js を App.tsxに変更します。
• import React, { Component } from 'react'を以下のように書き換えます。
  

import React from 'react'
import { Component } from 'react';

Jestの切り替え

• 下記のコマンドを叩き、Jestを導入します。
  

yarn add --dev ts-jest

• package.jsonのJest部分を書き換えます。

package.json

"jest": {
  "preset": "react-native",
  "moduleFileExtensions": [
    "ts",
    "tsx",
    "js"
  ],
  "transform": {
    "^.+\\.(js)$": "<rootDir>/node_modules/babel-jest",
    "\\.(ts|tsx)$": "<rootDir>/node_modules/ts-jest/preprocessor.js"
  },
  "testRegex": "(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js)$",
  "testPathIgnorePatterns": [
    "\\.snap$",
    "<rootDir>/node_modules/"
  ],
  "cacheDirectory": ".jest/cache"
}

typesモジュールの追加

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

yarn tsc

コンパイルをするとエラーが出てこなくなるはずです。

option

今のままだと、tsxがプロジェクト直下に存在し、jsファイルがその場に出来上がってしまうので、任意で以下の修正を加える。

• srcフォルダを作成して、App.tsxを移動させる。
• tsconfig.jsonに以下の3行を加える。

tsconfig.json

{
  "compilerOptions": {
    ...
    "outDir": "./artifact/",　　/* jsファイルの生成場所を指定 */
    "rootDir": "./src/", /* コンパイル箇所の指定 */
    ...
  },
  "include": ["./src/*.tsx","./src/**/*.tsx"]
}

これでフォルダの階層が汚れないです。（完全なる好みですが、、）
これで気分良くアプリをスタート！