毎日、何か新しいことを。icon環境構築の大変なReactNativeのベースになるリポジトリを作ってみることにしました。GitHub前回のstyled-components導入に引き続き、今回は、最初にTypescriptを導入していこうと思います。そもそもTypeScriptってなに?TypeSciptというのはMS社が作った静的型付けのAltJSです。昔はCやJavaなど静的型付け言語が一般的でしたが、こんなの冗長だ!いちいち「int」とか「string」とか書くのだるいねん!といった流れから(?)、PythonやJavaScriptなどの動的型付け言語が流行りだしました。テストコードを書くのが大変だったり、思わぬバグを踏んだりしてやっぱ型がなかったら安全じゃないよね!となり、また静的型付けの流れが出てきました。がんばってなんか書く前準備をするまずはプロジェクト内にReactを記述するコードを入れるsrcディレクトリを作成します。srcディレクトリの中にapp.tsxというファイルを作成します。ここがルートのファイルになります。ここにはApp.jsをTypeScriptに書き換えたコードを書きます。ここが、ルートのファイルになります。ReactNative自体はコンパイル後のjsファイルを読み込むので、そのための設定を./index.jsファイルに記述します。App);現時点でのディレクトリ構造は以下のようになります。yarn.lockTypeScriptをインストールする準備は整ったので早速TypeScriptをインストールしていきます。一緒に依存関係のあるパッケージもインストールしておきましょう。--devTypeSciprtの設定ファイルを編集するTypeScriptのコンパイルオプションやコンパイル対象の設定などを記述するtsconfig.jsonファイルを作成します。その後、作成された./tsconfig.jsonを編集します。true}}こうすることでlibフォルダの中にコンパイルされたjsファイル集が作成されます。./package.jsonのjestの部分を編集します。tscでコンパイルできます。すると、lib下にjsファイルが作成されます。-wを実行すると、ファイルを編集し保存すると自動でコンパイルしてくれるので、これを裏で実行しておくと良いでしょう。最後に使わなくなったApp.jsファイルを消しておきましょう。コメントをキャンセルメールアドレスが公開されることはありません。