TypeScriptのファーストクラスサポート
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
新しく生成されたアプリの開始点は、App.jsではなくApp.tsxになります – 完全にTypeScriptで型付けされています。新しいプロジェクトには、tsconfig.jsonが既に設定されているため、すぐにIDEが型付きコードの記述を支援します！
React Nativeに同梱された宣言
0.71は、組み込みのTypeScript（TS）宣言を備えた最初のリリースです。
以前は、React NativeのTypeScript宣言は、@types/react-nativeによって提供され、DefinitelyTypedリポジトリでホストされていました。TypeScript型をReact Nativeソースと併置する決定は、正確性と保守性を向上させるためでした。
@types/react-nativeは、安定版リリースのみの型を提供します。つまり、TypeScriptでReact Nativeのプレリリースバージョンを使用して開発する場合、不正確な可能性がある古いリリースの型を使用する必要がありました。また、@types/react-nativeのリリースもエラーが発生しやすいものでした。リリースはReact Nativeのリリースに遅れており、プロセスには、React Nativeの公開APIに加えられた型の変更を手動で検査し、TS宣言を一致するように更新することが含まれていました。
TS型がReact Nativeソースと併置されることで、TS型の可視性と所有権が向上します。私たちのチームは、FlowとTS間の整合性を維持するためのツールを積極的に開発しています。
この変更により、React Nativeユーザーが管理する依存関係も削除されます。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として参照しているために警告が表示される場合は、そのライブラリに対してオプションのpeerDependenciesを使用するように問題を報告するか、PRを開いて、当面は警告を無視してください。
ライブラリメンテナー
0.71より前のバージョンのReact Nativeを対象とするライブラリでは、アプリの型のバージョンに対して型チェックするために@types/react-nativeのpeerDependencyを使用する場合があります。この依存関係は、peerDependenciesMetaでオプションとしてマークする必要があります。これにより、TypeScriptを使用していないユーザーや、型が組み込みになっている0.71ユーザーには型が不要になります。
@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以上のインタラクティブなコード例が新しいテンプレートでlint、フォーマット、型チェックに合格するように更新されました。ほとんどの例は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-template-typescriptのメンテナーにも、React Nativeでの新しいアプリ開発のTypeScriptエクスペリエンスを当初からサポートしてくれたことに感謝いたします。
React Nativeリポジトリでより直接的に協力し、React Native開発者のエクスペリエンスを向上させ続けることを楽しみにしています！