迁移到 TypeScript

完整的 TypeScript 迁移，提升代码质量和开发体验

**安装依赖:**
- TypeScript 5.9.3
- @types/react, @types/react-dom, @types/node
- typescript-eslint 相关包

**配置文件:**
- 创建 tsconfig.json (应用配置)
- 创建 tsconfig.node.json (Node 配置)
- 更新 eslint.config.ts 支持 TypeScript
- 所有配置文件迁移到 .ts 扩展名

**源代码迁移:**
- 所有 .jsx 文件 → .tsx
- 所有 .js 文件 → .ts
- 添加完整的类型定义和接口
- 修复所有类型错误

**类型定义:**
- Experiment 接口 (实验数据类型)
- DraggableItemProps 接口
- 函数参数类型注解
- React 组件 Props 类型

**代码优化:**
- 修复 main.tsx 中的 null 检查
- 添加 DragEndEvent 类型
- 使用类型守卫和类型断言
- 改进错误处理

**构建脚本:**
- 添加 typecheck 脚本
- build 脚本包含类型检查
- 更新 index.html 入口为 main.tsx

**验证:**
- ✅ TypeScript 编译通过
- ✅ ESLint 检查通过
- ✅ 所有类型正确推导
- ✅ 代码质量提升

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

src/components/DraggableItem.tsx

@@ -0,0 +1,45 @@
+import { ReactNode } from 'react';
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { GripVertical } from 'lucide-react';
+
+interface DraggableItemProps {
+  id: string;
+  children: ReactNode;
+}
+
+export function DraggableItem({ id, children }: DraggableItemProps) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.5 : 1,
+  };
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={style}
+      className={`bg-white border border-gray-200 rounded-lg p-4 mb-3 flex items-center gap-3 shadow-sm hover:shadow-md transition-shadow ${
+        isDragging ? 'cursor-grabbing' : 'cursor-grab'
+      }`}
+    >
+      <div
+        {...attributes}
+        {...listeners}
+        className="text-gray-400 hover:text-gray-600 transition-colors"
+      >
+        <GripVertical size={20} />
+      </div>
+      <div className="flex-1">{children}</div>
+    </div>
+  );
+}