AgentSkillsCN

developing-typescript

全面掌握 TypeScript/React 开发技能，涵盖高级类型系统、React 组件架构、Hooks 模式、状态管理、与 Apollo 集成 GraphQL、性能优化，以及 React Testing Library。 当您处理 .ts/.tsx 文件、React 组件，或当用户提及 TypeScript、React、Hooks、Context、Apollo、GraphQL 代码生成、React Testing Library、Vite，或 Next.js 时，可选用此方案。此外，当您需要使用泛型类型、组件模式，或进行包体积优化时，也可参考此方案。

SKILL.md
--- frontmatter
name: developing-typescript
description: |
  Comprehensive TypeScript/React development expertise covering advanced type systems, React component architecture, hooks patterns, state management, GraphQL integration with Apollo, performance optimization, and React Testing Library.

  Use when working with .ts/.tsx files, React components, or when the user mentions TypeScript, React, hooks, Context, Apollo, GraphQL codegen, React Testing Library, Vite, or Next.js. Also use for generic types, component patterns, or bundle optimization.

Developing TypeScript

Expert guidance for building robust, type-safe TypeScript and React applications.

Quick Start

For immediate help, identify your task type and consult the relevant reference:

Working OnReference FileKey Topics
Generics, conditional types, inferencetypescript-coreType system, utility types, declarations
Components, hooks, state managementreact-architectureComposition, Context, reducers
React 19, Server Components, Actionsreact-19-patternsref as prop, useActionState, use(), Server Actions
Apollo Client, codegen, type safetygraphql-integrationQueries, mutations, cache
React Testing Library, integration teststesting-reactUser behavior testing, async
Bundle size, memoization, Core Web Vitalsperformance-optimizationCode splitting, profiling

TDD Phase Awareness

All guidance in this skill is phase-aware. Identify your current phase:

RED Phase (Writing Failing Tests)

  • •Write the smallest test that captures intent
  • •Use concrete values directly in tests
  • •Focus on user behavior, not implementation
  • •Skip edge cases and complex mocking initially

GREEN Phase (Making Tests Pass)

  • •RESIST over-engineering at all costs
  • •Start with simple implementations
  • •Use any temporarily if types block progress
  • •Focus only on making the current test pass

REFACTOR Phase (Improving Design)

  • •NOW apply proper type constraints
  • •Extract custom hooks from components
  • •Add comprehensive type definitions
  • •Improve component composition patterns

Cross-Cutting Principles

These principles apply across all TypeScript/React development:

Type Safety First

  1. •Prefer compile-time errors over runtime errors
  2. •Use strict mode and appropriate compiler options
  3. •Leverage type inference where it improves readability
  4. •Create discriminated unions for state management

Component Architecture

  1. •Prefer composition over prop drilling
  2. •Keep components focused on single responsibilities
  3. •Use custom hooks to extract reusable logic
  4. •Push side effects to dedicated hooks or boundaries

Testing Philosophy

  • •Test user behavior, not implementation details
  • •Write tests that can fail for real defects
  • •Avoid over-mocking; prefer integration tests
  • •Use React Testing Library queries by accessibility

Performance Mindset

  • •Measure before optimizing
  • •Understand React's rendering model
  • •Use memoization strategically, not reflexively
  • •Consider bundle size for every dependency

Examples

Creating a type-safe form component:

code
User: "I need a reusable form that handles different data types"
→ Consult typescript-core.md for generics, react-architecture.md for patterns

Optimizing re-renders:

code
User: "My component re-renders too often"
→ Consult performance-optimization.md for profiling and memoization strategies

Setting up GraphQL with type safety:

code
User: "Integrate Apollo Client with TypeScript codegen"
→ Consult graphql-integration.md for setup and patterns

Writing component tests:

code
User: "Test this form submission flow"
→ Consult testing-react.md for user behavior testing patterns

Anti-Patterns to Avoid

Premature Abstraction

  • •Creating generic components before you have 3 similar cases
  • •Building complex type utilities for one-off uses
  • •Over-engineering state management with Context
  • •Adding dependency injection patterns unnecessarily

Type System Misuse

  • •Using any to silence errors instead of fixing types
  • •Over-constraining types that limit legitimate use cases
  • •Creating deep type hierarchies that confuse inference
  • •Ignoring TypeScript's structural typing strengths

Testing Anti-Patterns

  • •Testing implementation details
  • •Over-mocking to the point tests don't catch real bugs
  • •Testing React internals instead of user outcomes
  • •Creating elaborate test utilities prematurely

Performance Anti-Patterns

  • •Premature memoization without measurement
  • •useCallback/useMemo on every function/value
  • •Splitting code before you have bundle size problems
  • •Optimizing renders that aren't causing issues

Reference File IDs

For programmatic access (e.g., parallel reviews), use these identifiers:

typescript-core · react-architecture · react-19-patterns · graphql-integration · testing-react · performance-optimization