TypeScript LSP Navigation and Safe Refactoring

Trace real TypeScript types, imports, and references, then refactor with scoped diagnostics and compiler checks.

Development / Languagestypescriptlanguage-server
by AgentVoltv1.0.0
Free to sign up · every skill included with AgentVolt Pro

Before & after

Same prompt, same agent — the only difference is the skill.

Prompt“Which files reference the User type across my codebase?”
Beforegeneric AI agent
Finding references across a large codebase can be time-consuming. You might need to search through files manually or use grep commands. Different files have different naming conventions for types and interfaces. You could look through your imports and exports to trace dependencies. Understanding the connections between files helps with refactoring. It depends on how your codebase is organized. Have you thought about what you're trying to accomplish with the refactor?
Afterwith TypeScript LSP Navigation and Safe Refactoring
TYPESCRIPT LSP REFERENCE MAP

QUERY: Find all references to User type

DIRECT IMPORTS (13 files):
1. services/AuthService.ts
   Line 4: import { User } from '../models/User'
   Usage: parseJwt(): User → returns typed object
   Calls: 2 functions (loginUser, refreshSession)

2. components/UserProfile.tsx
   Line 2: import type { User } from '../models/User'
   Usage: React.FC<{ user: User }> → props type
   Calls: 8 prop references

3. api/users/route.ts
   Line 1: import { User } from '../models/User'
   Usage: POST handler returns Promise<User>
   Cross-reference: calls AuthService.loginUser (cycle detection: false)

INDIRECT REFERENCES (5 files):
4. types/ApiResponse.ts (imports UserDTO, which extends User)
   Line 12: type ApiResponse = { data: UserDTO }
   Inheritance chain detected: User ← UserDTO ← ApiResponse

5. hooks/useAuth.ts (returns User via custom hook)
   Line 8: const user: User = JSON.parse(localStorage.getItem('auth'))
   Consumer: 23 files import useAuth (therefore use User indirectly)

CIRCULAR DEPENDENCY ALERT:
   User.ts imports UserRole (enum)
   UserRole.ts imports User type in comment (safe, just docs)
   Status: No cycle

BREAKING CHANGE RISK:
If you delete 'User.name' field:
   - 7 files directly break (prop expects name)
   - 11 files indirectly break (components render user.name)
   - Estimated refactor time: 4 hours

REFACTOR SAFE PATH:
1. Add User.displayName (optional, default to name)
2. Update all consumers to use displayName first, fallback to name
3. Deprecate name field (1 release)
4. Remove name field (next major)

No file reads required; LSP traced all 18 references instantly.

About this skill

“That property doesn't exist.” “You changed the interface but missed its callers.” TypeScript changes go wrong when an assistant guesses at types or treats text matches as a dependency graph. This skill makes it trace actual symbols, inspect reference coverage, and verify the affected project before calling a change complete.

What it does

  • Resolves imported symbols through aliases and re-exports to their actual declarations.
  • Distinguishes a value's declared contract from its inferred or narrowed type at a particular usage.
  • Uses semantic references to plan signature changes, then checks structural assignments and runtime boundaries that references can miss.
  • Reviews rename edits for accidental changes to public JSON keys, generated files, and unrelated symbols.
  • Separates editor diagnostics, compiler checks, and runtime tests so verification claims match the evidence.
  • Provides a concrete fallback when no TypeScript language server is available, without pretending a Markdown file installs one.

What you get

A focused explanation or implemented refactor, sized to your request, with declaration locations, affected consumers, validation results, and explicit coverage gaps. When tool access is missing, you get a provisional patch or investigation plan with the exact remaining checks.

Best for

Developers changing unfamiliar TypeScript projects, tracing confusing type errors, navigating monorepos, or renaming symbols without breaking callers and public contracts.

SKILL.md preview

SKILL.md
---
name: typescript-lsp-navigation-and-safe-refactoring
description: Trace TypeScript symbols with language-service definitions, hover types, references, and rename previews, then validate changes against the affected compiler project. Use when the user says "trace this type", "where does this import come from", "rename this symbol everywhere", "update all callers", "my editor and build disagree", "my refactor keeps missing usages", or "why does TypeScript think this property is missing".
---

# TypeScript LSP Navigation and Safe Refactoring

… (sign up to view the full skill)
Sign up to view, copy, and install the full skill

Featured in

More development skills

View all Development skills →