Typescript Refactor

作者 pproencacf93c57cac89無授權條款215 個星標收錄於 2026年10月8日更新於 2026年10月8日儲存庫7 週前更新

TypeScript and TSX refactoring and modernization guidelines from a principal specialist perspective, current to TypeScript 6.0 and React 19. This skill should be used when refactoring, reviewing, or modernizing TypeScript or React/TSX code for type safety, compiler performance, and idiomatic patterns. Triggers on tasks involving type architecture, narrowing, generics, discriminated unions, error handling, React component and hook typing, or migration to modern TypeScript features (satisfies, using, const type parameters, inferred type predicates, isolatedDeclarations, erasable syntax, import attributes).

AI 產生的概覽

用於重構與現代化 TypeScript 及 React/TSX 程式碼的指南,涵蓋九大類共 47 條規則。

功能
這個技能提供一套結構化的 TypeScript 與 TSX 重構指南,目標是型別安全、編譯器效能與慣用模式,內容更新至 TypeScript 6.0 與 React 19。它把 47 條規則依優先順序分成九大類,包括型別架構、型別收窄與守衛、現代 TypeScript 功能、React/TSX 型別標註、泛型、編譯器效能、錯誤安全、執行時模式與常見陷阱。每條規則都有獨立的參考檔案,內含說明與程式碼範例,並提供新增規則用的範本。它產出的是指引與建議,而不是修改後的程式碼檔案。
適用情境
在為了型別安全與可維護性而重構、審查或現代化 TypeScript 或 React/TSX 程式碼時使用。適合涉及型別架構、型別收窄、泛型、可辨識聯合、錯誤處理、React 元件與 Hook 型別標註,或遷移到現代 TypeScript 功能的任務。在最佳化大型程式庫的編譯器效能時也適用。
執行需求
不附帶指令碼,僅為說明文件與參考檔案。假定使用者熟悉 TypeScript 與 React/TSX 程式庫,不需要憑證、套件或網路存取。

TypeScript Refactor Best Practices

Comprehensive TypeScript and TSX refactoring and modernization guide designed for AI agents and LLMs. Contains 47 rules across 9 categories, prioritized by impact to guide automated refactoring, code review, and code generation. Current to TypeScript 6.0 and React 19.

When to Apply

Reference these guidelines when:

  • Refactoring TypeScript or React/TSX code for type safety and maintainability
  • Designing type architectures (discriminated unions, branded types, generics)
  • Narrowing types to eliminate unsafe as casts
  • Typing React components and hooks (props, refs, events, state) in .tsx files
  • Adopting modern TypeScript 5.x–6.0 features (satisfies, using, const type parameters, inferred type predicates, erasable syntax, with import attributes)
  • Optimizing compiler performance in large codebases (isolatedDeclarations, project references)
  • Implementing type-safe error handling patterns
  • Reviewing code for TypeScript quirks and pitfalls

Rule Categories by Priority

PriorityCategoryImpactPrefix
1Type ArchitectureCRITICALarch-
2Type Narrowing & GuardsCRITICALnarrow-
3Modern TypeScriptHIGHmodern-
4React & TSXHIGHtsx-
5Generic PatternsHIGHgeneric-
6Compiler PerformanceMEDIUM-HIGHcompile-
7Error SafetyMEDIUMerror-
8Runtime PatternsMEDIUMperf-
9Quirks & PitfallsLOW-MEDIUMquirk-

Quick Reference

1. Type Architecture (CRITICAL)

  • arch-discriminated-unions [blocked] — Use discriminated unions over string enums for exhaustive pattern matching
  • arch-branded-types [blocked] — Use branded types for domain identifiers to prevent value mix-ups
  • arch-satisfies-over-annotation [blocked] — Use satisfies for config objects to preserve literal types
  • arch-interfaces-over-intersections [blocked] — Extend interfaces instead of intersecting types for better error messages
  • arch-const-assertion [blocked] — Use as const for immutable literal inference
  • arch-readonly-by-default [blocked] — Default to readonly types for function parameters and return values
  • arch-avoid-partial-abuse [blocked] — Avoid Partial<T> abuse for builder patterns

2. Type Narrowing & Guards (CRITICAL)

  • narrow-custom-type-guards [blocked] — Replace as with runtime-checked guards; TS 5.5+ infers the predicate
  • narrow-assertion-functions [blocked] — Use assertion functions for precondition checks
  • narrow-exhaustive-switch [blocked] — Enforce exhaustive switch with never
  • narrow-in-operator [blocked] — Narrow with the in operator for interface unions
  • narrow-eliminate-as-casts [blocked] — Eliminate as casts with proper narrowing chains

3. Modern TypeScript (HIGH)

  • modern-using-keyword [blocked] — Use the using keyword for resource cleanup
  • modern-const-type-parameters [blocked] — Use const type parameters for literal inference
  • modern-template-literal-types [blocked] — Use template literal types for string patterns
  • modern-noinfer-utility [blocked] — Use NoInfer to control type parameter inference
  • modern-verbatim-module-syntax [blocked] — Enable verbatimModuleSyntax for explicit import types
  • modern-erasable-syntax [blocked] — Prefer erasable syntax over enums and namespaces for type-stripping
  • modern-import-attributes [blocked] — Use with import attributes instead of deprecated assert

4. React & TSX (HIGH)

  • tsx-avoid-react-fc [blocked] — Type props directly instead of React.FC
  • tsx-ref-as-prop [blocked] — Pass ref as a prop instead of forwardRef (React 19)
  • tsx-extend-native-props [blocked] — Extend native element props with ComponentPropsWithRef instead of redeclaring them
  • tsx-discriminated-props [blocked] — Model mutually-exclusive props as discriminated unions
  • tsx-event-handler-types [blocked] — Type event handlers with React synthetic event types
  • tsx-hook-typing [blocked] — Type useState/useRef for nullable and mutable state

5. Generic Patterns (HIGH)

  • generic-constrain-dont-overconstrain [blocked] — Constrain generics minimally
  • generic-avoid-distributive-surprises [blocked] — Control distributive conditional types
  • generic-mapped-type-utilities [blocked] — Build custom mapped types for repeated transformations
  • generic-return-type-inference [blocked] — Preserve return type inference in generic functions

6. Compiler Performance (MEDIUM-HIGH)

  • compile-explicit-return-types [blocked] — Add explicit return types to exported functions
  • compile-avoid-deep-recursion [blocked] — Avoid deeply recursive type definitions
  • compile-project-references [blocked] — Use project references for monorepo builds
  • compile-base-types-over-unions [blocked] — Use base types instead of large union types
  • compile-isolated-declarations [blocked] — Enable isolatedDeclarations for parallel declaration emit

7. Error Safety (MEDIUM)

  • error-result-type [blocked] — Use Result types instead of thrown exceptions
  • error-exhaustive-error-handling [blocked] — Use exhaustive checks for typed error variants
  • error-typed-catch [blocked] — Type catch clause variables as unknown
  • error-discriminated-error-unions [blocked] — Model domain errors as discriminated unions

8. Runtime Patterns (MEDIUM)

  • perf-union-literals-over-enums [blocked] — Use union literals instead of enums — enums are non-erasable
  • perf-avoid-delete-operator [blocked] — Avoid the delete operator on objects
  • perf-object-freeze-const [blocked] — Use Object.freeze with as const for true immutability
  • perf-object-keys-narrowing [blocked] — Avoid Object.keys type widening
  • perf-map-set-over-object [blocked] — Use Map and Set over plain objects for dynamic collections

9. Quirks & Pitfalls (LOW-MEDIUM)

  • quirk-excess-property-checks [blocked] — Understand excess property checks on object literals
  • quirk-empty-object-type [blocked] — Avoid the {} type — it means non-nullish
  • quirk-structural-typing-escapes [blocked] — Guard against structural typing escape hatches
  • quirk-variance-annotations [blocked] — Use variance annotations to document generic intent (not for speed)

How to Use

Read individual reference files for detailed explanations and code examples:

  • Section definitions [blocked] — Category structure and impact levels
  • Rule template [blocked] — Template for adding new rules

Reference Files

FileDescription
references/_sections.md [blocked]Category definitions and ordering
assets/templates/_template.md [blocked]Template for new rules
metadata.json [blocked]Version and reference information

來源與署名

來源:pproenca/dot-skills位於skills/.experimental/typescript-refactor提交cf93c57

授權條款: 無授權條款

內容歸原作者所有。SourceWeft 從公開儲存庫中收錄這些內容。

檢舉或申請下架