React × TypeScriptの環境構築【RaiseTech フロントコース#11】

悩んでいる人

ReactでTypeScriptってどうやって書いていくのだろう

本記事では、どのようにReactでTypeScriptを用いたプロジェクトを作成するのか、またどのように型定義をしていくのかを簡単に解説しています。

また、本記事は、Raise Techのフロントエンドエンジニアコースの受講記でもあります。
こちらの記事は、第9回の講義のまとめとなります。

オカ

僕もまだ勉強中なので間違っている認識があるかもです。
気づいたら教えてもらえるとうれしい。。

スポンサーリンク

目次

まずは、TypeScriptのプロジェクトファイルを作ってみる

ということで、さっそくTypeScriptのプロジェクトファイルを作ってみます。

作り方は非常に簡単でコマンドを打つだけでいけます。

まずは、ターミナルを開いてプロジェクトを作りたいディレクトリに移動します。

npx create-react-app 好きな名前 --template typescript

作られたフォルダをエディタで開きます。中に入っているファイルを見てみましょう。

ファイルの拡張子が、jsxではなくtsxになっているのが分かるかと思います。

これがTypeScript用のファイル拡張子になります。

一旦これで、プロジェクトファイルを作ることができました。

Reactのとき同様、npm startをコマンドで叩けばブラウザが立ち上がりお馴染み?の画面が表示されます。

考える人

めっちゃ簡単、、、!!

ESLintとPrettierの設定

ここは、めっちゃ長くなりそうなので設定済みのファイルのGitリポジトリ参考になった記事を貼っておきます。

▼Gitリポジトリ

https://github.com/takahiro-okada/typescript-default

▼ESLintの設定

https://maku.blog/p/xz9iry9/

▼Prittierの設定

https://maku.blog/p/au8iu6u/

▼VSCodeの設定

https://maku.blog/p/qcoz9ju/

StateやPropsの型定義

では、RaiseTechフロントエンドコースの第10回で教えてもらったことを使いながらReact開発ではどのように型定義をしていくのかをみていきましょうー

Stateの型定義

まずは、useStateでの型定義の方法について。

useStateで型定義をするには、ジェネリクスで型を定義します。

ジェネリクスとは…

型引数を指定することで、クラスやコンポーネント・関数などを使用する時に、実際に型を決定できる仕組みです。

  const [text, setText] = useState<string>("");
  return (
    <div className="App">
      <h1>value:{text}</h1>
      <input
        type="text"
        value={text}
        onChange={(e) => setText(e.target.value)}
      />
    </div>

1行目のconst [text, setText] = useState<string>("");と記述することで、textに入ってくる値はstring型と定義することができます。

間違った値(例:number型)を入れるとエラーを出してくれます。

Propsの型定義

フォルダ構成です。App.tsxPage.tsxを呼ば出す形にして、その際にPropsを渡したいと思います。

export default function App() {
  const greetJapanese = () => {
    alert("こんにちは!!!!!");
  };
  const greetEnglish = () => {
    alert("Hello World");
  };
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <Page name={"オカ"} age={31} greeting={greetJapanese} />
      <Page age={20} greeting={greetEnglish} />
    </div>
  );
}
type Props = {
  name?: string;
  age: number;
  greeting: () => void;
};

export const Page = (props: Props) => {
  const { name = "山田太郎", age, greeting } = props;
  return (
    <>
      <p>名前:{name}</p>
      <p>年齢:{age}</p>
      <button onClick={greeting}>挨拶する</button>
    </>
  );
};

Page.tsxで受け取る型の定義をしています。

type Props = {
  name?: string;
  age: number;
  greeting: () => void;
};

name?: string;?はオプショナルといって、必ずしも渡す必要のないPropsにつけることで渡ってこなくてもエラーがでないようにすることができます。

const { name = "山田太郎", age, greeting } = props;では分割代入をしており、もしnameが渡ってこなかったときにはデフォルトで山田太郎 が渡されるようになっております。

実際の動くコードになります。

CodeSandbox
raisetech11_Propsの型定義 - CodeSandbox raisetech11_Propsの型定義 by takahiro-okada using react, react-dom, react-scripts

型定義用のファイルを作る

Reactでは共通の部分に関しては、コンポーネント化して使い回しができるようにしてきました。

TypeScriptにおいても型定義の部分をコンポーネント化して複数のところで使い回せるようにするといいようです。

サンプル

今回課題でメモアプリを作った際に、上記のように取得してくるメモの型を定義して、複数箇所で使えるようにしました。

取得データへの型定義

axiosなどでAPIから外部のデータを取得してくるときに型情報がないので自分で型を定義して指定する必要があります。

いくつか記述方法がありますが、一番オススメされていたのは、axiosのジェネリクスで指定するパターンです。

import axios from 'axios';
const axiosInstance = axios.creat({
 baseURL:'https://jsonplaceholder.typicode.com/',
});
type User = {
 id: number;
 name:string;
 username: string;
 email :string;
};
export const fetch = async () => {
 try {
  const result = await axiosInstance.get<User>('/users');
  return result.data;
 } catch (error) {
  alert('通信に失敗しました');
 }
};

このように記述をすることで取得するdataUser型となります。

コンポーネント自体への型定義

関数コンポーネントそのものに型定義をすることができます。

型定義をしておくことで、コンポーネントのプロパティが補完されるなど安全にコンポーネントを扱えるようになります。

使える方はFC型VFC型となります。

▼FC型
型定義に暗黙的にchildrenを含んでいる。

▼VFC型
型定義にchildrenは含んでおらず、明示的にchildrenを型定義する必要がある。

※バージョン18からはFC型からもchildrenが除外されるようです。

VFC型childrenを指定しないと怒られます。(上記画像)

これで関数コンポーネントにchildrenが含まれているかどうかがわかるようになりました!

CodeSandbox
raisetech11_コンポーネント自体の型定義 - CodeSandbox raisetech11_コンポーネント自体の型定義 by takahiro-okada using react, react-dom, react-scripts

前回作ったToDoアプリをTypeScriptに書き換えてみる。

一度Reactで作成したToDoアプリをTypeScriptに書き換えながらTypeScriptの勉強をしていきます。

まだ作成途中ですが、こちらにGithubにあげているソースコードを公開しておりますのでよかったら見てみてください。

GitHub
GitHub - takahiro-okada/typescript-notepad Contribute to takahiro-okada/typescript-notepad development by creating an account on GitHub.

ログイン機能があり、バックエンドはRaiseTechの講師の方が作っており、ユーザーIDとパスワードを設定してしまっているのでここで公開できないのです。
いつか自分でバックエンドを作って誰でも使えるようにします。

まとめ

TypeScriptがわかるようになると特に保守・運用フェーズで非常に便利みたいなのでしっかり身につけていきたいと思います。

正直今は、型を考える余裕がないレベルなので、、、。

楽しみながらコツコツ毎日やっていきますー。`

スポンサーリンク

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
目次
閉じる