React NativeにTypeScriptを導入する

目次

TypeScript 関係をインストールする。

npm install -D @tsconfig/react-native @types/jest @types/react @types/react-test-renderer typescript

上記コマンドでTypeScriptの依存パッケージをインストールする。

完了するとPackage.jsonが

  "devDependencies": {
    "@babel/core": "^7.20.0"
  },

から

  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@tsconfig/react-native": "^3.0.2",
    "@types/jest": "^29.5.4",
    "@types/react": "^18.2.21",
    "@types/react-test-renderer": "^18.0.1",
    "typescript": "^5.2.2"
  },

に更新される。

tsconfig.jsonを作成する

Appのルートにtsconfig.jsonを作成し、

{
  "extends": "@tsconfig/react-native/tsconfig.json"
}

を記述する。

Tsxファイルの作成と動作確認

最後にJavascriptファイルを*.tsxに変換する。

You should leave the ./index.js entrypoint file as it is otherwise you may run into an issue when it comes to bundling a production build.

と公式に書かれていたが、そもそもindex.jsを見つけることができなかったからドキュメントが古い?

App.tsxに型のない関数を書くとtsエラーが出たので、うまく機能していると思われる。

また無事にAppを開けたので、動作も問題ない。

ちなみに、

npx create-expo-app --template

を使えば初期のApp作成時にTypeScriptを導入できるので、こっちでやるべきだった。

参考Using TypeScript

次に読むおすすめ記事

React NativeでHello World(環境構築~サンプルアプリ立ち上げまで)

React NativeでBottom Tabs Navigatorを使用しタブナビゲーションを実装する

react native でサンプルアプリを立ち上げる🔭

React Nativeにコードフォーマッター(ESLint・Prettierを導入する)

React NativeでStackNavigatorを使用し一覧から詳細への遷移を実装する

この記事に対するコメント

お気軽にコメントを下さい

メールアドレスが公開されることはありません。 が付いている欄は必須項目です