簡単にreact native projectでtypescriptを使う方法

typescriptをreact nativeの環境で使えるようにするために色々ググってみたらこちらのやり方が一番簡単なのでは?ということだったので真似して環境を作ってみました。 TypeScript in CRNA – GeekyAnts Blog

忘れないようにメモメモ〜

流れ

1.typescriptとtslint、typingsをインストール。

tslintはコードがちゃんと綺麗になっているかチェックするためのツール、 typingsは型がちゃんと合っているか、型定義管理ツール。

$ npm install -g typescript tslint typings

2.プロジェクトを作成する。

$ create-react-native-app test
$ cd test

3.dependenciesをインストールする。

$ npm install --save-dev typescript tslint typings

僕の場合はinstallしたtypingsでエラーになったため、package.jsonのdevDependenciesにあったtypingsを削除し、npm updateをした。これによりエラーは解決され、最終的にチュートリアルと同じような動きになった。

4.tsconfig.jsonファイルを作成する。

$ tsc --init

ここに以下の内容のルールを記述。

{
   "compilerOptions": {
       "target": "es2016",
       "module": "commonjs",
       "jsx": "react-native",
       "outDir": "build",
       "rootDir": "src",
       "allowSyntheticDefaultImports": true,
       "noImplicitAny": true,
       "experimentalDecorators": true,
       "preserveConstEnums": true,
       "allowJs": true,
       "sourceMap": true,
       "forceConsistentCasingInFileNames": true,
       "noImplicitReturns": true,
       "noImplicitThis": true,
       "strictNullChecks": true,
       "suppressImplicitAnyIndexErrors": true,
       "noUnusedLocals": true,
       "skipLibCheck": true,
       "moduleResolution": "node"
   },
   "exclude": [
       "App.js",
       "App.test.js",
       "build",
       "node_modules"
   ],
   "compileOnSave": false
}

typingsをインストールする

$ npm install @types/react @types/react-native

アプリに関する作成したファイルはsrcフォルダにまとめてtsx拡張子を使う。 これらのファイルは自動的に作成されたbuildフォルダにjsファイルとして変換される。

tslint.jsonを作成する

$ tslint --init

試しに、App.jsファイルの中身をsrc/Root.tsxにコピペして、エディタを再起動し、プロジェクトを開くとbuildフォルダに変換されたjsファイルがあることが確認できる。

gitignoreに以下を追加
node_modules/
.expo/
npm-debug.*
build
typings

これで一通りのtypescriptをreact nativeプロジェクトで使うための準備は整った。

参考 https://blog.geekyants.com/typescript-in-crna-8baab5f95db0 https://github.com/theankurkedia/TypeScriptCRNA