v0.57以降React Nativeが公式でTypeScriptに対応するようになりました。
Babel7でTypeScriptをトランスコンパイル出来るようになったため、その仕組みをReact Nativeが利用する形で実現されています。 ただし、Babelは古いJavaScriptへのトランスコンパイルを行うだけで、型チェックまでは行ってくれません。
そのため型チェックはtscコマンドで別途実行する必要があります。
そこで、この記事ではBabel7でReact Native+TypeScriptを実行しつつ、tscコマンドによる型チェックが出来る環境を構築するための手順を解説していきます。
これらに当てはまる方におすすめの記事となっています。これを読めばTypeScriptをReact Nativeに導入する方法が丸わかりですよ。
まずは下記コマンドでReact Nativeのサンプルプロジェクトを作成します。
react-native init TSSampleApp
サンプルプロジェクトが作成できたら、
下記コマンドを実行して画面が正常に表示されることを確認します。
npm run ios
今回はTypeScriptの環境構築がメインですので、Androidは割愛します。
次に下記コマンドでApp.tsxにファイル名をリネームします。
mv App.js App.tsx
.tsxはJSXを返すファイルでTypeScriptを利用する場合の拡張子です。
リネーム後にシミュレーターを確認すると下記のエラーが表示されます。
これは利用しているReactやReact Nativeのライブラリの型定義ファイルが見つからず、
TypeScriptのコンパイルエラーになるためです。
次に下記コマンドでTypeScript本体とReact Native開発に必要な型定義ファイルをインストールします。
インストールするライブラリはReact Nativeの公式ドキュメントに従っています。
yarn add --dev typescript @types/jest @types/react @types/react-native @types/react-test-renderer
@typesで始まっているTypeScriptの型定義ファイルはDefinitelyTypedで管理されています。
ライブラリのインストールが完了したら、上記のMetro Bundlerを再起動します。
起動が完了したら下記画面が表示されるようになります。
これでTypeScriptをBabelでトランスコンパイルして実行出来るようになりました。
次にtscコマンドでTypeScriptの型チェックが出来るようにします。
下記の内容でtsconfig.jsonをプロジェクトのルートに作成します。
{
"compilerOptions": {
"allowJs": true,
"allowSyntheticDefaultImports": true,
"esModuleInterop": true,
"isolatedModules": true,
"jsx": "react",
"lib": ["es6"],
"moduleResolution": "node”,
"noEmit": true,
"strict": true,
"target": "esnext"
},
"exclude": [
"node_modules",
"babel.config.js",
"metro.config.js",
"jest.config.js"
]
} noEmit: trueを設定することでJavaScriptのトランスコンパイルはBabelに任せ、 tscコマンドはファイル出力はせず型チェックのみ行うようにしています。
上記の設定内容もReact Nativeの公式ドキュメントに従っています。
次にtscコマンドをnpm-scriptsのbuildで実行できるようにpackage.jsonを修正します。
"scripts": {
"build": "tsc",
…
}, 追加できたら下記コマンドを実行します。
npm run build
実行すると以下のようなエラーが表示されます。
> tsc
App.tsx:26:18 - error TS2304: Cannot find name 'React$Node'.
26 const App: () => React$Node = () => {
App.tsx:35:12 - error TS2304: Cannot find name 'global'.
35 {global.HermesInternal == null ? null : (
Found 2 errors. React$NodeはReact.ReactNodeに書き換え、HermesInternalに関してはCannot find name ‘global’.ts(2304) のイシューを参考に修正します。
TypeScriptテンプレートを利用せずにReact Nativeアプリを作成した場合、デフォルトではflowを利用するようになっています。
TypeScriptを利用する場合は不要なので、 下記コマンドで設定ファイルを削除します。
rm .flowconfig
これでTypeScriptを利用してReact Native開発が行えるようになりました。
TypeScriptを利用してReact Native開発を行うことで、JavaScriptのコードのみでiOSとAndroid両方のアプリを開発することができます。
この記事では環境構築の手順を紹介していきました。こちらの記事では実際の画面の開発について解説しています。
ぜひ合わせてチェックしてみて下さい。
こうしたアプリ開発を外注してみるのはいかがでしょうか。 dehaソリューションズではオフショア開発によって低コストで迅速な開発をサポートしています。
Laravelに関して詳しくお話を聞きたい方、開発相談や無料お見積りをしたい方はこちらからご気軽にお問い合わせください。
▼ dehaソリューションへの簡単見積もりの依頼はこちら
ビジネスのオンライン化が進む中、予約システムの導入はさまざまな業種で必須ともいえる存在になっています。 業務効率化や顧客満足度の向上に寄与する予約システムですが、その機能や開発費用はどのようなものなのでしょうか。 この記事では、予約システムの概要や導入メリット、具体的な機能、そして開発費用の相場を解説します。 予約システムを導入したいとお考えの方 予約システムの費用相場が知りたい方 社内のIT人材が不足している方 これらに当てはまる方におすすめの記事となっています。これを読めば予約システムの機能や費用の相場がわかるのはもちろん、オフショア開発によってコストを抑える方法も丸わかりですよ。 (more…)
ビジネスを効率的に運営するうえで欠かせないのが「在庫管理」です。 しかし、多くの企業がこの在庫管理においてさまざまな課題を抱えているのが現実です。 手作業での記録ミス、在庫過多や欠品、データの属人化など、管理の煩雑さが業務全体に影響を与えるケースも少なくありません。 そこで注目されているのが「在庫管理システム」の導入です。 この記事では、在庫管理における課題からシステム導入のメリット、機能、そして導入費用の相場までを解説します。 在庫管理システムを導入したいとお考えの方 社内のIT人材が不足している方 これらに当てはまる方におすすめの記事となっています。これを読めば在庫管理システムの導入メリットがわかるのはもちろん、オフショア開発での導入事例も交えて、より現実的な選択肢についてもわかりますよ。 (more…)
2025年におけるベトナムのデジタル環境は、急速に進化を遂げています。 国民のインターネット利用率は約78.8%、SNS利用者数は約7,620万人に達し、デジタル領域は日常生活の中で欠かせない存在となっています。 特に、SNSはベトナム国内の若者を中心に急成長を遂げており、企業のマーケティングにおいても強力なツールとして活用されています。 この記事では、2025年のベトナムにおけるデジタルの現状の他、SNSの利用状況、広告リーチ、各プラットフォームの成長トレンドなどを具体的なデータとともに紹介します。 ベトナムデジタル事情が気になる方 ベトナムオフショアが気になる方 これらに当てはまる方におすすめの記事となっています。これを読めば企業がベトナム市場でデジタルマーケティング戦略を立てる際に重要となるインサイトを得ることができますよ。 (more…)
請求システムを導入することで請求書作成の人的ミスを防ぎ、管理も楽に行うことができます。 この記事ではそんな請求システムの導入について具体的なメリットや開発費用などについて徹底解説していきます。 請求システムを導入したい方 社内のIT人材が不足している方 これらに当てはまる方におすすめの記事となっています。これを読めば請求システムについてわかるのはもちろん、開発にかかるコストまで丸わかりですよ。 (more…)
見積作成は多くの企業で重要なプロセスですが、手作業やエクセル管理では多くのミスの恐れがあり、人的負担も懸念されます。 そこでおすすめなのが見積作成システムの導入です。見積作成システムを導入することで業務の効率化を図ることができます。 この記事ではそんな見積作成システムについて導入メリットや費用などについて徹底解説していきます。 見積作成システムが気になる方 見積作成に多くの時間を費やしている方 社内のIT人材が不足している方 これらに当てはまる方におすすめの記事となっています。これを読めば見積作成システムの導入メリットや必要性がわかるのはもちろん、DEHAソリューションズでの具体的コストなどについても丸わかりですよ。 (more…)
顧客データの一括管理ができるCRMは仕事の効率化や顧客満足度向上のための有用なツールです。 近年導入する企業が増えているCRMですが、導入には一定の費用がかかります。 本日はそんなCRMについてシステム導入には具体的にいくらかかるのかや、導入の基本機能などについて紹介していきたいと思います。 CRMの必要性が気になる方 CRMについて詳しく知りたい方 CRMの導入費用が知りたい方 これらに当てはまる方におすすめの記事となっています。これを読めばCRMについて具体的にいくらかかるのかや、CRMの導入方法まで丸わかりですよ。 (more…)