ReactNativeにTypescriptを導入する

環境構築の大変なReactNativeのベースになるリポジトリを作ってみることにしました。
【参考】mrsekut/react-native-base-templates – GitHub  

前回のstyled-components導入に引き続き、今回は、最初にTypescriptを導入していこうと思います。    

そもそもTypeScriptってなに?

TypeSciptというのはMS社が作った静的型付けのAltJSです。

昔はCやJavaなど静的型付け言語が一般的でしたが、こんなの冗長だ!いちいち「int」とか「string」とか書くのだるいねん!といった流れから(?)、PythonやJavaScriptなどの動的型付け言語が流行りだしました。

しかし、テストコードを書くのが大変だったり、思わぬバグを踏んだりしてやっぱ型がなかったら安全じゃないよね!となり、また静的型付けの流れが出てきました。

そこで、JavaScriptにも型付けたら良いんじゃね!ってなってMS社が作ってくれたみたいです   

【参考】Microsoft/TypeScript: TypeScript is a superset of JavaScript that compiles to clean JavaScript output.  

Typescriptを導入する

  【参考】React Native + TypeScript環境を作る – がんばってなんか書く  

前準備をする

まずはプロジェクト内にReactを記述するコードを入れるsrcディレクトリを作成します。 $ mkdir src   srcディレクトリの中にapp.tsxというファイルを作成します。 ここがルートのファイルになります。

ここにはApp.jsをTypeScriptに書き換えたコードを書きます。 ここが、ルートのファイルになります。

TypeScriptを使う場合、tsx拡張子のファイルにReactNativeコードを書き、 それをコンパイルすることでlibディレクトリ下にjs拡張子ファイルを作成することになるのですが、 ReactNative自体はコンパイル後のjsファイルを読み込むので、そのための設定を./index.jsファイルに記述します。

 

  現時点でのディレクトリ構造は以下のようになります。

 

TypeScriptをインストールする

準備は整ったので早速TypeScriptをインストールしていきます。
一緒に依存関係のあるパッケージもインストールしておきましょう。 $ yarn add typescript @types/react @types/react-native --dev  

TypeSciprtの設定ファイルを編集する

  TypeScriptのコンパイルオプションやコンパイル対象の設定などを記述するtsconfig.jsonファイルを作成します。 $ yarn tsc --init   その後、作成された./tsconfig.jsonを編集します。

  こうすることでlibフォルダの中にコンパイルされたjsファイル集が作成されます。   ./package.jsonのjestの部分を編集します。

 

コンパイルする

  $ yarn tscでコンパイルできます。 すると、lib下にjsファイルが作成されます。  

ちなみに、$ tsc -wを実行すると、ファイルを編集し保存すると自動でコンパイルしてくれるので、これを裏で実行しておくと良いでしょう。

  最後に使わなくなったApp.jsファイルを消しておきましょう。 $ git rm App.js