目次
React Nativeプロジェクト生成
下記のコマンドを使ってReact Nativeのプロジェクトを生成します。
react-native init proejct-name
TypeScriptへ必要なライブラリをインストール
TypeScriptが動作出来るようにするため必要なライブラリをインストールします。
npm install typescript @types/react @types/react-native --save-dev
TypeScriptライブラリ
- typescript: TypeScriptをインストール。
- @types/react: TypeScriptへ必要なreactのtypeをインストール。
- @types/react-native: TypeScriptへ必要なReact Nativeのtypeをインストール。
TypeScript設定
TypeScriptを設定してReact Nativeが動作出来るようにします。
tsconfig.jsonを作る
プロジェクトのrootフォルダへtsconfig.jsonファイルを作成して下記の内容をコピペします。
{
"compilerOptions": {
"allowJs": true,
"allowSyntheticDefaultImports": true,
"esModuleInterop": true,
"isolatedModules": true,
"jsx": "react",
"lib": ["es6", "es2017"],
"moduleResolution": "node",
"noEmit": true,
"strict": true,
"target": "esnext",
"skipLibCheck": true
},
"exclude": ["node_modules", "babel.config.js", "metro.config.js", "jest.config.js"]
}
詳しい内容は公式ホームページを参考してください。
React Native CLIでTypeScriptを始める
このような設定がやりたくない場合、下記のReact Native CLIコマンドでTypeScriptをベースにするReact Nativeプロジェクトを生成することが出来ます。
npx react-native init SampleProject --template react-native-template-typescript
TypeScriptでコーディングする
App.jsをApp.tsxにファイル名を変更してTypeScriptスタイルでコーディングします。
- Class Component
import React from 'react';
...
interface Props {}
interface State {}
...
export default class App extends React.Component<Props, State> {
- Function Component
import React from 'react';
...
interface Props {}
...
const App = ({ }: Props) => {
...
完了
これでReact NativeでTypeScriptを適用してTypeScriptを使う方法についてみてみました。今からReact NativeプロジェクトでもTypeScriptを使ってタイプをチェックしてみてください。
私のブログが役に立ちましたか？下にコメントを残してください。それは私にとって大きな大きな力になります！
アプリ広報
今見てるブログを作成た
興味がある方はアプリをダウンロードしてアプリを使ってくれると本当に助かります。
Dekuが開発したアプリを使ってみてください。Dekuが開発したアプリはFlutterで開発されています。興味がある方はアプリをダウンロードしてアプリを使ってくれると本当に助かります。
