代码质量专家
您是维护TypeScript/React项目高代码质量的专家。
何时使用
当用户要求检查或提高代码质量时，Claude应自动使用此技能：
- 修复TypeScript错误或警告
- 审查代码以寻找最佳实践
- 强制执行一致的模式
TypeScript标准
严格模式要求
- tsconfig.json中的
strict: true - 不使用
any类型（改用unknown） - 导出函数上显式返回类型
- 使用可选链进行空值检查
类型安全模式
// 好 - 显式类型
function processData(data: UserData): ProcessedResult {
return { ... };
}
// 坏 - 隐式any
function processData(data) {
return { ... };
}
// 好 - 空值处理
const value = obj?.property ?? defaultValue;
// 坏 - 未经检查的访问
const value = obj.property;
代码模式
组件结构
// Props接口位于组件上方
interface ComponentNameProps {
/** 属性描述 */
propName: string;
/** 可选属性，默认值 */
optional?: boolean;
}
// 显式函数组件
export function ComponentName({ propName, optional = false }: ComponentNameProps) {
// Hooks首先
const [state, setState] = useState<StateType>(initial);
// 派生值
const derived = useMemo(() => compute(state), [state]);
// 回调
const handleClick = useCallback(() => {
// ...
}, [dependencies]);
// 渲染
return <div>...</div>;
}
Hook结构
interface UseHookNameOptions {
/** 必需选项 */
required: string;
/** 可选，默认 */
optional?: number;
}
interface UseHookNameReturn {
/** 当前状态 */
value: string;
/** 更新函数 */
setValue: (value: string) => void;
}
export function useHookName(options: UseHookNameOptions): UseHookNameReturn {
const { required, optional = 10 } = options;
// ...
}
质量检查
类型检查
pnpm tsc --noEmit
常见问题
| 问题 | 修复 |
|---|---|
类型'X'不可分配给类型'Y' |
检查类型兼容性，添加类型守卫 |
对象可能是'undefined' |
添加空值检查或可选链 |
参数'x'隐式具有'any'类型 |
添加显式类型注释 |
属性'x'不存在于类型'Y'上 |
向接口添加属性或使用类型断言 |
避免的反模式
不要做
// 类型断言以逃避类型系统
const value = data as any;
// 忽略错误
// @ts-ignore
const broken = thing.property;
// 未使用的变量
const unused = 'never used';
// 生产中的控制台日志
console.log('debug');
相反，做
// 运行时检查的类型守卫
function isValidData(data: unknown): data is ValidData {
return typeof data === 'object' && data !== null && 'id' in data;
}
// 显式错误处理
if (!data) {
throw new Error('Data is required');
}
// 移除未使用的代码
// 完全删除它
// 使用适当的日志记录
if (process.env.NODE_ENV === 'development') {
console.log('debug');
}
项目特定规则
平台抽象
- 所有平台代码通过
getPlatformAdapter() - 永远不要直接导入平台特定的模块
- 使用
isNative(),isTauri(),isCapacitor()进行检查
组件规则
- 每个组件都需要一个Storybook故事
- Props必须有TSDoc注释
- 为传递给子组件的事件处理器使用
useCallback - 对昂贵的计算使用
useMemo
Hook规则
- Hooks必须返回类型化对象
- 包含@example的TSDoc
- 处理加载、错误和成功状态
- 在useEffect返回中清理订阅
审查清单
审查代码时：
- [ ] 没有TypeScript错误（
pnpm tsc --noEmit） - [ ] 没有
any类型 - [ ] 所有导出都有TSDoc
- [ ] 一致的命名（PascalCase组件，camelCase函数）
- [ ] 错误处理存在
- [ ] 没有console.logs
- [ ] 编写或更新测试
- [ ] 组件的Storybook故事