この記事はSchoo Advent Calendar 2025の20日目の記事です！
株式会社Schooでフロントエンドエンジニアをしている手登根（てとね）です。
graphql-code-generatorにお世話になっています。
エンドポイントのGraphQLスキーマからTypeScriptの型定義を自動生成してくれる、本当にありがたいライブラリですよね。リクエストやレスポンスの型をポチッと作れるので、型安全な開発には欠かせない存在です。助かる。
……が、ちょっと困ったこともありました。 コード生成をするたびに、import文で ts(1484) というエラーが出てくるのです。
エラーの正体はこちら（ https://typescript.tv/errors/ts1484/ ）。
ざっくり言うと、「型としてしか使わないimportなら、ちゃんと type って付けてよね！」 というエラーです。
具体的には、以下のようなケースです。
まず、types.ts というファイルに User という型が定義されているとします。
export interface User {
id: string;
name: string;
email: string;
}
この User を別のファイルで使うとき、こう書くと怒られます。
// Userは型（interface）なのに、普通の変数みたいにインポートしている
import { User } from './types';
export const printUser = (user: User) => {
console.log(user.name);
};
次のように書くのが正解。
// 「これは型ですよ」と明示する（import type構文）
import type { User } from './types';
// または個別に type を添える
import { type User } from './types';
graphql-code-generator でコードを生成すると、型だけのimportなのに import { User } from './types'; 形式で出力されてしまうため、毎回このエラーと対面することになります。
う〜ん、地味に開発体験が悪い……。 修正自体は一瞬ですが、生成のたびにチマチマ直すのはなかなかのストレスですよね。
「なんとかならんのか……！」とリポジトリの奥地へ向かったところ、ちゃんと解決方法がありました！
そのものずばり「useTypeImports」設定があった
結論から言うと、そのまんまな名前の useTypeImports という設定がありました。これを true にするだけで、型のみのインポートに import type {} 構文を使ってくれるようになります。
codegen.ts の設定例:
import type { CodegenConfig } from "@graphql-codegen/cli";
const config: CodegenConfig = {
// ...
config: {
useTypeImports: true,
// ...
},
};
これを追加するだけで、ts(1484) エラーとおさらばできました！ 同じ事象で困っていたこちらの GitHub Issue に助けられました。感謝。
おまけ：なぜ ts(1484) は怒ってくるのか？
なぜ明示的に type を付けないといけないのか、少し掘り下げてみます。
原因は、TypeScript 5.0から導入された verbatimModuleSyntax という設定にあります。 （参考: https://www.typescriptlang.org/tsconfig/#verbatimModuleSyntax ）
TypeScriptをJavaScriptに変換（トランスパイル）する際、型情報は消し去りたいわけですが、
import { Foo } from "./foo";
とだけ書いてあると、トランスパイラ側は「えっ、これ型？それともクラスとかの実体？消していいの？」と迷ってしまうケースがあるんですね。
ここで type と明示しておけば、トランスパイラも「おっ、型ね！消しま〜す！」と迷わず処理できます。結果として余計なものがバンドルされず、バンドルサイズの軽量化にもつながる……という、実はとってもありがたい怒られでした。
まとめ
今回graphql-code-generator の設定を調べてuseTypeImportsの他にも便利そうな設定がありそうでした。
この辺りの理解をより深めて開発体験を高めていきたいですね！！！
Schooでは一緒に働く仲間を募集しています！