UI はローカライズ済みです。スキルの紹介と説明文書は選択した言語へ AI が自動翻訳し、コード・コマンド・パス・専門用語は原文のままです。原作者の文書が優先されます。
スキルを探す
生産性・共同作業 · SKILL.md

type-only-imports

type-only-imports

Use when auditing import statements in TypeScript files, setting up a new TypeScript project, or investigating unexpected bundle inclusions from type-only dependencies.

Independent GitHub snapshot · Automated classification · Original documentation governs

スキルの説明

GitHub

name: type-only-imports description: "Use when auditing import statements in TypeScript files, setting up a new TypeScript project, or investigating unexpected bundle inclusions from type-only dependencies." metadata: category: javascript priority: low difficulty: beginner estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/javascript/type-only-imports

Use import type for type-only imports

Regular imports cause the JavaScript runtime to evaluate and execute the imported module even when only a TypeScript type from that module is used. This can increase bundle size, introduce unintended side effects, and create circular dependency issues that are otherwise avoidable. Using import type makes the erased-at-runtime nature of type imports explicit and enables bundlers and the TypeScript compiler to handle them optimally.

Quick Reference

  • import type is erased entirely at compile time — no runtime module evaluation
  • Prevents accidentally importing a value when only a type is needed
  • Reduces circular dependency issues caused by type-only relationships
  • verbatimModuleSyntax in TypeScript 5 enforces this automatically

Check

Review the import statements in this TypeScript file and identify any imports where only types or interfaces are used. These should use import type instead of a regular import.

Fix

Convert the identified regular imports to import type where the imported binding is only used as a TypeScript type annotation and not as a runtime value.

Explain

Explain the difference between import and import type in TypeScript, why type-only imports should be declared explicitly, and how verbatimModuleSyntax enforces this at the compiler level.

Code Review

Inspect all import statements in this file. For each import, check whether the imported name appears only in type positions (annotations, generics, implements clauses) versus runtime positions (function calls, new, typeof). Flag any regular import that is used only as a type.


For full implementation details, code examples, and framework-specific guidance, see references/rule.md.

Rule page: https://frontendchecklist.io/rules/javascript/type-only-imports

保存したスキル