인터페이스는 현지화되어 있으며, Skill 소개와 설명 문서는 선택한 언어로 AI가 자동 번역합니다. 코드·명령어·경로·전문 용어는 원문을 유지하며 원작자 문서가 우선합니다.
Skills 둘러보기
생산성 및 협업 · 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

Skill 문서

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

저장한 Skills