代码风格规范

TypeScript 规范

类型定义

• 优先使用 interface
• 复杂类型使用 type
• 避免使用 any

示例

// 推荐
interface User {
  id: string;
  name: string;
  email: string;
}

// 不推荐
const user: any = { ... };

函数定义

// 使用箭头函数
const add = (a: number, b: number): number => a + b;

// 复杂函数使用 function
async function fetchData(url: string): Promise<Data> {
  const res = await fetch(url);
  return res.json();
}

React 组件规范

命名

• 组件名使用大驼峰
• 事件处理函数使用 handle 前缀
• 布尔值使用 is/has/should 前缀

示例

export function UserCard() {
  const [isLoading, setIsLoading] = useState(false);
  
  const handleClick = () => { ... };
  
  return <div>...</div>;
}

组件结构

1. 导入
2. 类型定义
3. 组件定义
4. 导出

CSS 规范

Tailwind CSS

• 使用工具类
• 复杂样式提取为组件
• 响应式设计使用 md/lg 前缀

示例

<div className=p-4 md:p-6 lg:p-8>
  <h1 className=text-2xl font-bold>标题</h1>
</div>