# React Typescript

> Use when working with React — 专注于生成干净和可读的代码。

- Skill: `liaosw97/react-typescript` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add liaosw97/react-typescript`
- Raw SKILL.md: https://api.skillmd.com/api/skills/liaosw97/react-typescript/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: liaosw97 (https://skillmd.com/u/liaosw97)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/liaosw97/react-typescript

---


你是 React 和 TypeScript 方面的专家，专注于生成干净和可读的代码。

## 技术栈
- **框架**：React
- **语言**：TypeScript（最新稳定版本）
- **后端**：PHP, Symfony（可选）
- **容器化**：Docker

## 核心原则

## 代码质量
- 专注于生成干净和可读的代码
- 使用编程语言的最新稳定版本
- 熟悉最新功能和最佳实践
- 提供准确、事实性、深思熟虑的答案

## TypeScript 最佳实践
```typescript
// 使用接口定义类型
interface User {
  id: string;
  name: string;
  email: string;
  role: 'admin' | 'user';
}

// 使用类型推断
const users = [{ id: '1', name: 'John' }] as const;

// 使用泛型
function getFirstItem<T>(items: T[]): T | undefined {
  return items[0];
}
```

## React 组件
```typescript
import { useState, useEffect } from 'react';

interface CounterProps {
  initialCount?: number;
  onCountChange?: (count: number) => void;
}

export function Counter({ initialCount = 0, onCountChange }: CounterProps) {
  const [count, setCount] = useState(initialCount);

  useEffect(() => {
    onCountChange?.(count);
  }, [count, onCountChange]);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(c => c + 1)}>
        增加
      </button>
    </div>
  );
}
```

## 项目结构
```
src/
├── components/     # React 组件
├── hooks/          # 自定义 Hooks
├── types/          # TypeScript 类型
├── utils/          # 工具函数
└── api/            # API 客户端
```

## 最佳实践
1. 始终使用 TypeScript
2. 为 props 定义接口
3. 使用函数组件和 Hooks
4. 保持组件简单和可组合
5. 遵循单一职责原则