React × TypeScript × FullCalendar 開発での注意点

先日、React × TypeScript × FullCalendar を使って開発していたときに、以下のようなエラーに遭遇しました。

'DatesSetArg' は型であり、'verbatimModuleSyntax' が有効であるときは、
型のみのインポートを使用してインポートされる必要があります。ts(1484)

最初は「何これ？」と戸惑ったのですが、調べてみると TypeScript 5.0 以降の仕様変更 が関係していました。今回はこのエラーの概要、原因、そして対策方法をまとめます。

エラーが出たコード例

FullCalendar の DatesSetArg 型をインポートして使おうとしたときにエラーが発生しました。

import dayGridPlugin from "@fullcalendar/daygrid";
import FullCalendar from "@fullcalendar/react";
import { DatesSetArg } from '@fullcalendar/core' // ←ここでエラー

const Calendar = () => {
  const handleDateSet = (datesetInfo: DatesSetArg) => {
    const currentMonth = datesetInfo.view.currentStart
  }
}

エラーの原因

TypeScript 5.0 から導入された verbatimModuleSyntax がポイントです。
これを true にしていると、

• 値（JavaScriptとして存在するもの）
• 型（コンパイル時だけ必要なもの）

を明確に分けてインポートする必要があります。
今回 DatesSetArg は 型だけ なので、普通の import を使うとエラーになってしまいました。

解決方法

解決方法は大きく2つあります。

1. import type を使う

型だけをインポートする場合は import type を使えばOKです。

import type { DatesSetArg } from '@fullcalendar/core'

これでエラーは解消されますし、「これは型だよ」というのが明確になるので、将来的にもおすすめの方法です。

---

2. tsconfig.json で verbatimModuleSyntax を無効にする

もし「いちいち import type を書くのが面倒」という場合は、tsconfig.json で設定をオフにする方法もあります。

{
  "compilerOptions": {
    "verbatimModuleSyntax": false
  }
}

これで従来通りの挙動に戻せます。

まとめ

• TypeScript 5.0 から 型と値のインポートを区別 する必要がある
• DatesSetArg は「型」なので、普通の import だとエラーになる
• 解決方法は

1. import type を使う
2. tsconfig.json で verbatimModuleSyntax: false にする

自分は今回、素直に import type に修正して解決しました。
同じように TypeScript 5.0 以降で「急にエラーが出た！」と困っている方の参考になれば幸いです！