feat: 接入Ts配置
This commit is contained in:
zdl
159
CLAUDE.md
159
CLAUDE.md
@@ -20,6 +20,7 @@
|
||||
|
||||
**开发指南**:
|
||||
- [开发工作流](#开发工作流) - 路由、组件、API、Redux 开发指南
|
||||
- [TypeScript 接入](#typescript-接入) - TypeScript 渐进式迁移方案与指南
|
||||
- [常见开发任务](#常见开发任务) - 5 个详细的开发任务教程
|
||||
- [技术路径与开发指南](#技术路径与开发指南) - UI 框架选型、技术栈演进、最佳实践
|
||||
|
||||
@@ -42,6 +43,7 @@
|
||||
|
||||
**前端**
|
||||
- **核心框架**: React 18.3.1
|
||||
- **类型系统**: TypeScript 5.9.3（渐进式接入中，支持 JS/TS 混合开发）
|
||||
- **UI 组件库**: Chakra UI 2.8.2（主要） + Ant Design 5.27.4（表格/表单）
|
||||
- **状态管理**: Redux Toolkit 2.9.2
|
||||
- **路由**: React Router v6.30.1 配合 React.lazy() 实现代码分割
|
||||
@@ -81,6 +83,10 @@ npm test # 运行 React 测试套件（CRACO）
|
||||
|
||||
npm run lint:check # 检查 ESLint 规则（退出码 0）
|
||||
npm run lint:fix # 自动修复 ESLint 问题
|
||||
|
||||
npm run type-check # TypeScript 类型检查（不生成输出）
|
||||
npm run type-check:watch # TypeScript 类型检查监听模式
|
||||
|
||||
npm run clean # 删除 node_modules 和 package-lock.json
|
||||
npm run reinstall # 清洁安装（运行 clean + install）
|
||||
```
|
||||
@@ -1386,6 +1392,159 @@ src/views/Community/components/
|
||||
|
||||
---
|
||||
|
||||
## TypeScript 接入
|
||||
|
||||
### 概述
|
||||
|
||||
项目已于 **2025-11-13** 完成 TypeScript 环境配置，采用**渐进式迁移策略**，支持 JavaScript 和 TypeScript 混合开发。
|
||||
|
||||
**当前状态**: 环境配置完成，准备开始代码迁移
|
||||
**迁移策略**: 新代码使用 TypeScript，旧代码按优先级逐步迁移
|
||||
**类型严格度**: 推荐模式（`noImplicitAny: true`，其他严格检查待后续开启）
|
||||
|
||||
### 已完成的环境配置
|
||||
|
||||
✅ **TypeScript 编译器**: v5.9.3
|
||||
✅ **tsconfig.json**: 推荐模式配置，支持 JS/TS 混合开发
|
||||
✅ **CRACO 配置**: 支持 `.ts` 和 `.tsx` 文件编译
|
||||
✅ **ESLint 配置**: 支持 TypeScript 语法检查
|
||||
✅ **路径别名**: 与现有 `@/` 别名保持一致
|
||||
✅ **全局类型定义**: 基础类型文件已创建在 `src/types/`
|
||||
|
||||
### 可用类型定义
|
||||
|
||||
项目已创建以下基础类型定义文件：
|
||||
|
||||
**`src/types/api.ts`** - API 相关类型
|
||||
- `ApiResponse<T>` - 通用 API 响应结构
|
||||
- `PaginatedResponse<T>` - 分页响应
|
||||
- `ApiError` - API 错误类型
|
||||
- `ListQueryParams` - 列表查询参数
|
||||
|
||||
**`src/types/stock.ts`** - 股票相关类型
|
||||
- `StockInfo` - 股票基础信息
|
||||
- `StockQuote` - 股票行情数据
|
||||
- `KLineData` - K 线数据
|
||||
- `StockFinancials` - 财务指标
|
||||
- `StockPosition` - 股票持仓
|
||||
- `Sector` - 概念/行业板块
|
||||
|
||||
**`src/types/user.ts`** - 用户相关类型
|
||||
- `UserInfo` - 用户基础信息
|
||||
- `AuthInfo` - 认证信息
|
||||
- `LoginParams` / `RegisterParams` - 登录/注册参数
|
||||
- `UserSubscription` - 订阅信息
|
||||
- `UserAccount` - 资金账户
|
||||
- `UserSettings` - 用户设置
|
||||
|
||||
**使用方式**:
|
||||
```typescript
|
||||
// 统一导入
|
||||
import type { StockQuote, UserInfo, ApiResponse } from '@/types';
|
||||
|
||||
// 或从具体文件导入
|
||||
import type { StockQuote } from '@/types/stock';
|
||||
```
|
||||
|
||||
### TypeScript 命令
|
||||
|
||||
```bash
|
||||
# 类型检查（不生成输出文件）
|
||||
npm run type-check
|
||||
|
||||
# 类型检查 + 监听模式
|
||||
npm run type-check:watch
|
||||
|
||||
# ESLint 检查（包含 TS 文件）
|
||||
npm run lint:check
|
||||
|
||||
# ESLint 自动修复
|
||||
npm run lint:fix
|
||||
```
|
||||
|
||||
### 迁移路线图
|
||||
|
||||
详细的迁移指南请参考 **[TYPESCRIPT_MIGRATION.md](./TYPESCRIPT_MIGRATION.md)** 文档。
|
||||
|
||||
**简要路线图**:
|
||||
|
||||
1. **优先级 1️⃣**: 工具层（`src/utils/`, `src/constants/`）
|
||||
- 纯函数，迁移成本低，收益高
|
||||
- 提供类型定义给其他模块使用
|
||||
|
||||
2. **优先级 2️⃣**: 类型定义层（扩展 `src/types/`）
|
||||
- 添加 `trading.ts`, `community.ts`, `chart.ts` 等
|
||||
|
||||
3. **优先级 3️⃣**: 服务层（`src/services/`）
|
||||
- 定义 API 请求/响应类型
|
||||
- 使用 `ApiResponse<T>` 包装响应
|
||||
|
||||
4. **优先级 4️⃣**: Redux 状态层（`src/store/slices/`）
|
||||
- 定义 `RootState` 和 `AppDispatch` 类型
|
||||
- 创建类型化的 hooks
|
||||
|
||||
5. **优先级 5️⃣**: 自定义 Hooks（`src/hooks/`）
|
||||
- 添加泛型支持
|
||||
- 定义完整返回值类型
|
||||
|
||||
6. **优先级 6️⃣**: 组件层（`src/components/`, `src/views/`）
|
||||
- Atoms → Molecules → Organisms → Pages
|
||||
- 优先迁移复用度高的组件
|
||||
|
||||
### 开发规范
|
||||
|
||||
**新代码**:
|
||||
- ✅ **必须使用 TypeScript**（`.ts` 或 `.tsx`）
|
||||
- ✅ 所有函数参数和返回值添加类型
|
||||
- ✅ 组件 Props 使用 `interface` 定义
|
||||
- ✅ 避免使用 `any`（特殊情况需添加注释说明）
|
||||
|
||||
**旧代码迁移**:
|
||||
- 按优先级迁移，不强制一次性完成
|
||||
- 迁移前先阅读 [TYPESCRIPT_MIGRATION.md](./TYPESCRIPT_MIGRATION.md)
|
||||
- 迁移后运行 `npm run type-check` 验证
|
||||
|
||||
**类型定义**:
|
||||
- 公共类型定义导出到 `src/types/`
|
||||
- 组件内部类型可定义在组件文件中
|
||||
- 使用 `type` 还是 `interface` 参考 [迁移指南](./TYPESCRIPT_MIGRATION.md)
|
||||
|
||||
### 常见问题
|
||||
|
||||
**Q: 路径别名 `@/types` 无法识别？**
|
||||
A: 确保在 `tsconfig.json` 中配置了 `paths`，并重启 IDE。使用 `npm run type-check` 而非命令行 `tsc`。
|
||||
|
||||
**Q: 如何处理第三方库没有类型定义？**
|
||||
A:
|
||||
1. 尝试安装 `@types/library-name`
|
||||
2. 创建自定义类型声明文件 `src/types/library-name.d.ts`
|
||||
3. 临时使用 `as any`（需添加 TODO 注释）
|
||||
|
||||
**Q: 迁移期间如何处理 any 类型？**
|
||||
A: 添加 ESLint 禁用注释和 TODO 说明：
|
||||
```typescript
|
||||
/* eslint-disable @typescript-eslint/no-explicit-any */
|
||||
// TODO: 待完善类型定义
|
||||
const legacyFunction = (data: any): any => { ... };
|
||||
```
|
||||
|
||||
**Q: React 组件的 children 类型如何定义？**
|
||||
A: 使用 `React.ReactNode`：
|
||||
```typescript
|
||||
interface Props {
|
||||
children: React.ReactNode;
|
||||
}
|
||||
```
|
||||
|
||||
### 参考资源
|
||||
|
||||
- [TYPESCRIPT_MIGRATION.md](./TYPESCRIPT_MIGRATION.md) - 完整迁移指南
|
||||
- [TypeScript 官方文档](https://www.typescriptlang.org/docs/)
|
||||
- [React TypeScript Cheatsheet](https://react-typescript-cheatsheet.netlify.app/)
|
||||
- [Redux Toolkit TypeScript 指南](https://redux-toolkit.js.org/usage/usage-with-typescript)
|
||||
|
||||
---
|
||||
|
||||
## 更新本文档
|
||||
|
||||
本 CLAUDE.md 文件是一个持续更新的文档。在以下情况下应更新它:
|
||||
|
||||
Reference in New Issue
Block a user