ReactNativeにTypescriptを導入する

環境構築の大変なReactNativeのベースになるリポジトリを作ってみることにしました。

【参考】mrsekut/react-native-base-templates – GitHub

 

導入などに関しての目次となるようなインデックスページを用意しました。
【参考】ReactNative index

 

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

 

 

そもそもTypeScriptってなに?

 

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

昔は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 ts-jest @types/jest @types/react @types/react-native @types/react-test-renderer --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

コメントを残す