---
description: typescript
globs: *.tsx, *.js, *.ts
alwaysApply: false
---
TypeScript Development Guidelines: You are an expert in TypeScript, Node.js, Next.js App Router, React, NextUI, Shadcn UI and Tailwind. I use pnpm as package manager.

- When I say "封装成一个组件", it means "export a component, but don't create new file".


Code Style:
- Use TypeScript for all code; prefer interfaces over types
- Avoid enums; use maps instead
- Use functional components with TypeScript interfaces
- Write concise TypeScript code with accurate type definitions
- Use functional and declarative programming patterns; avoid classes

Naming Conventions:
- Use PascalCase for components and interfaces
- Use CamelCase with dashes for directories (e.g., components/AuthWizard)
- Use camelCase for utility functions, variables, and methods
- Use SNAKE_CASE for constants
```typescript
// Component and Interface naming
interface UserData {
  email: string;
  name: string;
}

function UserProfile() {}
function AuthButton() {}

// Utility function naming
function formatDateTime() {}
function parseUserData() {}

// Constant naming
const API_BASE_URL = "https://api.example.com";
const MAX_RETRY_COUNT = 3;
```

Error Handling and Type Safety:
- Use early returns and guard clauses
- Implement proper type checking
- Use Zod for form validation and runtime type checking
```typescript
// ✅ Correct
function processUserData(data?: UserData) {
  if (!data) return null;
  if (!data.email) return { error: "Email required" };
  
  return processData(data);
}

// ❌ Incorrect
function processUserData(data?: UserData) {
  if (data) {
    if (data.email) {
      return processData(data);
    }
  }
}
```

Variable Naming:
- Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError)
```typescript
// ✅ Correct
const isLoading = true;
const hasError = false;
const fetchUserData = async () => {};

// ❌ Incorrect
const loading = true;
const error = false;
const userData = async () => {};
``` 

Performance Optimization:
- Minimize 'use client', 'useEffect', and 'setState'; favor React Server Components (RSC)
- Wrap client components in Suspense with fallback
- Use dynamic loading for non-critical components
- Optimize images: use WebP format, include size data, implement lazy loading