Typescript Refactor

pproenca/dot-skills/skills/.experimental/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 从公开仓库中收录这些内容。

举报或申请下架