Edited at

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

これでフォルダの階層が汚れないです。(完全なる好みですが、、)

これで気分良くアプリをスタート!