React Hooksで作ったWeb版ニュースアプリをTypeScript化

以前React Hooksを使ってWeb上で動作するニュースアプリの開発について記事にしました。そのニュースアプリをTypeScriptで書き直しましたので今回記事にしました。

関連記事

UdemyにあるReact Nativeでニュースアプリを作るeラーニングコースに触発され、学習目的でReact Hooksを使ったWeb版ニュースアプリを作ってみました。 [blogcard url=https://www.udem[…]

ニュース一覧_コンポーネント

以降前提としてNode.jsとパッケージ管理に使うyarnはインストール済みとしています。

ソースコードはGitHubにあげています。よかったらご利用ください。

GitHub

React Hooks(TypeScript)で作ったWeb版ニュースアプリ. Contribute to ganeo/…

環境構築

TypeScript用のcreate-react-appを使ってアプリの雛形を作成

yarn create react-app react-news-app-typescript –template typescript

青字イタリック体はアプリ名

利用するパッケージをインストール

yarn add react-router-dom
yarn add @types/react-router-dom

yarn add axios

yarn add @fortawesome/fontawesome-svg-core
yarn add @fortawesome/free-solid-svg-icons
yarn add @fortawesome/react-fontawesome

yarn add node-sass

ソースコードの変更

ソースコードは以前作ったニュースアプリのものをコピーしてきて基本的には型を追加しただけですが、Headerコンポーネントのルーティングで「You should not use <Switch> outside a <Router>」というエラーが発生したので回避策としてApp.tsxにMemoryRouterを追加しています。

なお型定義はtypeで表記を統一し、types.tsにまとめて記述してあります。ただし各コンポートのpropsの型は外部モジュールでは使わないのでモジュール内に記述しました。

参考サイト

「React + TypeScript」の書き方(ベストプラクティス)は「React TypeScript Cheatsheets」がよくまとまっています。本記事で作成したアプリもこれにのっとって書いている箇所が多くありますので紹介しておきます。

sponsor