React Native & Expo v31 で TypeScript を使ってみる

はじめに

React Native 0.57以降でTypeScriptがデフォルトサポートされたこともあり、最近はもっぱらTypeScriptをつかっていたのですが、
expo v31でもTypeScriptがデフォルトサポートとなったようなので、試しに立ち上げてみます。

導入

1) まずはプロジェクトの作成

React Nativeの公式ドキュメント通りにexpo-cliのインストールとプロジェクトを作成

yarn global add expo-cli
// npmなら　npm install -g expo-cli

expo init AwesomeProject

2) typescript導入前に起動してみる

yarn ios

動いた

3) typescriptのインストール

yarn add --dev --exact typescript
yarn add --exact tslib

※ react-native-typescript-transformerやエンドポイントの設定等は不要

4) 型定義やtsconfigなど

yarn add --dev --exact @types/react @types/react-native @types/expo @types/expo__vector-icons

tsconfig.json

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "experimentalDecorators": true,
    "forceConsistentCasingInFileNames": true,
    "importHelpers": true,
    "jsx": "react-native",
    "lib": [
      "es2017"
    ],
    "module": "es2015",
    "moduleResolution": "node",
    "noEmitHelpers": true,
    "noImplicitReturns": true,
    "noUnusedLocals": true,
    "strict": true,
    "target": "es2017"
  },
  "exclude": [
    "build",
    "node_modules"
  ],
  "types": [
    "typePatches"
  ]
}

参考のgithubを一旦そのまま(よしなに普段と同じに)

5) ファイルの拡張子をtsxに変更

そのままだと警告出ますが一旦特に変更せずそのまま。。

6) 起動しなおしてみる & ファイルを変更してみる

動いた！

所感：

特に何も考えずにそのまま動きました。。
jsとのファイル混在もできるので部分的に導入し始めるというのも可能かもしれないです。

今後にむけて

ejectしても特に問題ない?か確認

参考：