こんにちは。今日は TypeScript の type と interface の違い、そしてよく一緒に出てくる ユニオン型 についてまとめます。 自分の勉強メモも兼ねて書いているので、これから TypeScript を学ぶ人の参考になれば嬉しいです。 typeとinterfaceの共通点 どちら…

先日、React × TypeScript × FullCalendar を使って開発していたときに、以下のようなエラーに遭遇しました。 'DatesSetArg' は型であり、'verbatimModuleSyntax' が有効であるときは、 型のみのインポートを使用してインポートされる必要があります。ts(148…

フロントエンド開発では、見た目を整えるためにCSSやUIフレームワークを組み合わせて使うことが多いですが、その中でも人気が高いのが MUI (Material UI) です。 MUIは、Googleが提唱する Material Design に基づいたコンポーネントを提供してくれるライブラ…

MUIを使って以下のようなコードを書いたところ、TypeScriptでエラーが出ました。 import { Card, CardContent, Grid, Typography } from "@mui/material"; const MonthlySummary = () => { return ( <Grid container spacing={{ xs: 1, sm: 2 }} mb={2}> <Grid xs={4} display="flex" flexDirection="column"> </grid></grid>

Reactコンポーネントの書き方にはいくつかパターンがあります。 特に 関数の書き方 と export方法（default / named） の違いは、最初は分かりにくいところです。この記事では、 default export（後出し）の意味と使いどころ 巻き上げ（hoisting）とは何か …

ReactでSPA（シングルページアプリケーション）を作るとき、ほぼ必須になるのがreact-router-domです。今回は基本的な使い方から、AppLayoutを使った共通レイアウトの作成方法までまとめていきます。 1. react-router-domとは？ react-router-dom は React用…

最近、Reactの勉強を行っています。このブログでは、学んだことを随時まとめていこうと思います。今回は「Reactの新しいプロジェクトをVite＋TypeScriptで始める方法」について紹介します。 1. React新規プロジェクトをVite＋TypeScriptで作成するコマンド …