メインコンテンツへスキップ

TypeScriptのファーストクラスサポート

·6分で読めます
Luna Wei
Luna Wei
ソフトウェアエンジニア @ Meta
Nick Gerleman
Nick Gerleman
ソフトウェアエンジニア @ Meta

0.71のリリースに伴い、React Nativeは以下の変更によりTypeScriptエクスペリエンスに投資しています

この記事では、これらの変更がTypeScriptまたはFlowユーザーにとって何を意味するのかを解説します。

新しいアプリテンプレートがデフォルトでTypeScriptに​

0.71から、React Native CLI経由で新しいReact Nativeアプリを作成すると、デフォルトでTypeScriptアプリが生成されるようになります！

npx react-native init My71App --version 0.71.0

Screenshot of an iPhone simulator running a new app generated by React Native CLI. Alongside the simulator is a screenshot of Visual Studio Code editor opened to "App.tsx" to illustrate it is running a TypeScript file.

新規生成されたアプリのエントリポイントは、App.jsの代わりにApp.tsxとなり、完全にTypeScriptで型付けされています。新しいプロジェクトにはすでにtsconfig.jsonが設定されているため、IDEがすぐに型付けされたコードを書く手助けをしてくれます！

React Nativeに同梱される型定義​

0.71は、TypeScript (TS) の型定義が組み込まれた最初のリリースです。

以前は、React NativeのTypeScript型定義は、DefinitelyTypedリポジトリでホストされている@types/react-nativeによって提供されていました。TypeScriptの型をReact Nativeのソースと共存させる決定は、正確性とメンテナンス性の向上のためでした。

@types/react-nativeは安定版リリースの型のみを提供します。これは、もしReact Nativeのプレリリース版をTypeScriptで開発したい場合、不正確な可能性のある古いリリースの型を使用しなければならないことを意味します。また、@types/react-nativeのリリースは間違いが起こりやすいプロセスです。リリースはReact Nativeのリリースに遅れがちで、そのプロセスには、React Nativeの公開APIに加えられた型の変更を手動で検査し、それに合わせてTSの型定義を更新する作業が含まれます。

TSの型がReact Nativeのソースと共存することで、TSの型に対する可視性と所有権が高まります。私たちのチームは、FlowとTS間の整合性を維持するためのツールに積極的に取り組んでいます。

この変更により、React Nativeユーザーが管理する必要のある依存関係が1つ減ります。0.71以上にアップグレードする際には、@types/react-nativeを依存関係から削除できます。TypeScriptサポートの設定方法については、新しいアプリテンプレートを参照してください。

バージョン0.73以降では、@types/react-nativeを非推奨にする予定です。具体的には、以下のようになります。

  • React Nativeバージョン0.71および0.72を追跡する@types/react-nativeはリリースされます。これらは、関連するリリースブランチ上のReact Nativeの型と同一になります。
  • React Native 0.73以降では、TSの型はReact Nativeからのみ利用可能になります。

移行方法​

できるだけ早く、新しく共存する型に移行してください。以下に、あなたのニーズに応じた移行の詳細を記載します。

アプリのメンテナー​

React Nativeを0.71以上にアップグレードしたら、devDependencyから@types/react-nativeを削除できます。

注記

使用しているライブラリが@types/react-nativeをpeerDependencyとして参照しているために警告が表示される場合は、そのライブラリにissueを立てるか、PRを送り、オプショナルなpeerDependenciesを使用するように依頼し、当面はその警告を無視してください。

ライブラリのメンテナー​

0.71より前のReact Nativeのバージョンを対象とするライブラリは、アプリのバージョンの型定義に対して型チェックを行うために、@types/react-nativeのpeerDependencyを使用することがあります。この依存関係は、TypeScriptを使用しないユーザーや、型定義が組み込まれている0.71ユーザーに対して型が必須とならないように、peerDependenciesMetaでオプショナルとしてマークする必要があります。

@types/react-nativeに依存するTypeScript型定義のメンテナー​

移行の準備ができているかどうかを確認するには、0.71で導入された破壊的変更をご確認ください。

Flowを使っている場合はどうなりますか？​

Flowユーザーは、0.71+を対象とするアプリケーションの型チェックを続けることができますが、そのための設定ロジックはテンプレートにデフォルトでは含まれなくなりました。

Flowユーザーはこれまで、新しいアプリテンプレートから.flowconfigをマージし、flow-binを手動で更新することでReact NativeのFlowの型をアップグレードしていました。新しいアプリテンプレートにはもはや.flowconfigはありませんが、あなたのアプリのベースとして使用できるものがReact Nativeのリポジトリにはまだ存在します。

Flowで新しいReact Nativeアプリを開始する必要がある場合は、0.70の新しいアプリテンプレートを参照できます。

TypeScriptの型定義にバグを見つけたらどうすればいいですか？​

組み込みのTS型を使用しているか、@types/react-nativeを使用しているかに関わらず、バグを見つけた場合は、React NativeとDefinitelyTypedの両方のリポジトリにPRを提出してください。修正方法がわからない場合は、React NativeリポジトリにGitHub issueを立て、そのissueで@lunaleapsにメンションしてください。

ドキュメントはTypeScriptファーストに​

一貫したTypeScriptエクスペリエンスを保証するために、React Nativeのドキュメントにいくつかの更新を加え、TypeScriptを新しいデフォルト言語として反映させました。

コード例ではインラインTypeScriptが許可されるようになり、170以上のインタラクティブなコード例が新しいテンプレートでのリンティング、フォーマット、型チェックをパスするように更新されました。ほとんどの例はTypeScriptとJavaScriptの両方で有効です。互換性がない場合は、どちらかの言語で例を表示することができます。

間違いを見つけたり、改善点がある場合は、ウェブサイトもオープンソースであることを思い出してください。私たちはあなたのPRを歓迎します！

React Native TypeScriptコミュニティに感謝します！​

最後に、React Native開発者がTypeScriptを使用できるようにするために、コミュニティによって長年にわたって行われてきたすべての作業に感謝の意を表したいと思います。

2015年から@types/react-nativeをメンテナンスしてきたすべての貢献者に感謝します！React Nativeユーザーが最高の体験を得られるように、皆さんが注いできた努力と配慮を私たちは認識しています。

TypeScriptの型をReact Nativeに移行するための変更について、コンサルティング、質問、コミュニケーション、レビューにご協力いただいた@acoates氏、@eps1lon氏、@kelset氏、@tido64氏、@Titozzz氏、そして@ZihanChen-MSFT氏に感謝します。

同様に、React Nativeでの新しいアプリ開発におけるTypeScriptエクスペリエンスを当初からサポートしてくださったreact-native-template-typescriptのメンテナーの皆様にも感謝します。

React Nativeリポジトリでより直接的に協力し、React Native開発者のエクスペリエンスを向上させ続けることを楽しみにしています！