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を導入できるので、こっちでやるべきだった。