React NativeとTypeScript
さて、TypeScriptについての概要は説明できたので、ここからはReact NativeにおけるTypeScriptの話をしていきましょう。
React Nativeでは、JavaScriptのコンパイルにBabelを用いています。そのため、TypeScriptを使う場合には、tscコマンドを静的型チェックのためだけに使用するアプローチを採用することになります。React Native用のBabelプラグインとして、metro-react-native-babel-presetやbabel-preset-expoがありますが、どちらも @babel/preset-typescriptを含んでいるので、React NativeのビルドシステムはTypeScriptに対応していると言えます。
では、型情報のほうはどうでしょうか。残念ながら、要となるライブラリであるreactや react-nativeには、.d.tsが同梱されていません。Facebook社内では内製の静的型チェックツールが使われているのもあってか、TypeScriptへの対応はあまり積極的ではありません。
しかし、コミュニティがそれを補ってあまりあるサポートを行っています。@types/reactや@types/react-nativeはMicrosoft社がメンテナンスに力を注いでいるため、品質の高いものになっています。ReactやReact Native向けのライブラリも、TypeScript製のものが多くなりました。
多くの人々の尽力により、TypeScriptとReact Nativeは「相性が良い」と言っていいものに仕上がっているのです。
TypeScript向けにExpoプロジェクトをセットアップする
それでは、実際にTypeScriptを使えるプロジェクトを作ってみましょう。Expo CLIで、TypeScriptが設定済みのブランクプロジェクトを作成できます。
ターミナルでexpo initを実行すると、いつものように図4の選択肢が表示されます。
本連載では、これまで「blank」の選択肢を選んでプロジェクトを作成してきました。しかし今回はTypeScriptを扱いたいので、「blank （TypeScript）」を選びましょう。出来上がったプロジェクトは、図5の形になります。
エントリーポイントのファイル名がApp.tsxになっていることと、tsconfig.jsonというファイルが増えていること以外は、本連載でこれまで扱ってきたblankプロジェクトと変わらないように見えます。App.tsxに記述されているコンポーネント定義も、特に変わらないように見えますね。
JavaScript版との違い
JavaScript版との違いを探してみましょう。まずはpackage.jsonを見てみます（リスト6）。
"devDependencies": {
"@babel/core": "^7.8.6",
"@types/react": "~16.9.23",
"@types/react-native": "~0.61.17",
"babel-preset-expo": "~8.1.0",
"typescript": "~3.8.3"
},
devDependenciesに違いがありました。@typesで始まる型定義と、typescript が追加されています。では次に、新しいファイルであるtsconfig.jsonを開いてみましょう（リスト7）。
{
"compilerOptions": {
"allowSyntheticDefaultImports": true,
"jsx": "react-native",
"lib": ["dom", "esnext"],
"moduleResolution": "node",
"noEmit": true,
"skipLibCheck": true,
"resolveJsonModule": true,
"strict": true
}
}
tsconfig.jsonのcompilerOptionsには、tscコマンドの実行時に付与するオプションを事前に定義しておくことができます。tsc --noEmit trueというオプションをつける代わりに、"noEmit": trueと書いておくと、コマンド実行時に同じディレクトリ内にあるtsconfig.jsonが読み込まれます。ちなみにnoEmitは「JavaScriptを出力しない」というオプションで、これをtrueにすることで、tscが静的型チェックのみを実施する挙動になっています。
型チェックをしてみよう
次は、試しに型チェックを実行してみましょう。devDependenciesでtypescriptがインストール済みなので、リスト8のコマンドで実行できます。
$ npx tsc
特に何も起こらなければ成功です。これでは面白くないので、次は意図的にエラーを埋め込んでみましょう。App.tsxをリスト9の通りに書き換えます。
// 省略
export default function App() {
const message: number = 'Open up App.tsx to start working on your app!'
return (
<View style={styles.container}>
<Text>{message}</Text>
</View>
);
}
// 省略
もう一度npx tscを実行してみましょう（図6）。
素晴らしい！ コードに問題があることが検出されました。ここから先のワークフローは通常のブランクプロジェクトと同じです。TypeScriptによるプロジェクトの作成ができましたね。
まとめ
複数人で開発を行う場合は、静的型チェックができるツールをできるだけ導入したほうが、後々の保守性を担保しやすくなります。幸いにも、React Native周辺のツールはTypeScriptへの対応が進んでおり、比較的容易に導入することができるので、機会を見つけて導入してみてはいかがでしょうか。
さて、次回は最後の締めくくりとして、ストアにリリース可能なファイル形式であるapkファイルやipaファイルにアプリを組み上げる（＝ビルドする）方法について解説します。
