{post.data.title}
+ + + + {post.data.tags && post.data.tags.length > 0 && ( + + )} +
+
+
+
+
+
+
+
+{title}
+ + + +{summary}
+ + {tags.length > 0 && ( + + )} +{summary}
+ + {tags.length > 0 && ( + + )} +又是静态内容
+
+```
+
+### 延迟加载
+
+非首屏图片延迟加载:
+
+```html
+
+```
+
+## 调试技巧
+
+### Chrome DevTools
+
+1. 切换设备模拟
+2. 查看断点效果
+3. 测试不同屏幕尺寸
+4. 模拟网络速度
+
+### 有用的 CSS
+
+调试边框:
+
+```css
+/* 开发时使用 */
+* {
+ outline: 1px solid red;
+}
+```
+
+## 常见陷阱
+
+1. **固定高度**: 避免使用固定高度,使用 `min-height` 代替
+2. **像素完美**: 不同设备有差异是正常的
+3. **忽略横屏**: 记得测试横屏模式
+4. **过多断点**: 保持简单,不要为每个设备单独设置
+
+## 检查清单
+
+- [ ] 移动端优先设计
+- [ ] 触摸目标至少 44x44px
+- [ ] 图片响应式处理
+- [ ] 测试常见断点
+- [ ] 检查横屏模式
+- [ ] 优化加载性能
+- [ ] 测试真实设备
+
+## 总结
+
+响应式设计是一门艺术,需要在美观、性能和用户体验之间找到平衡。记住:
+
+- 从小屏幕开始
+- 使用现代布局技术
+- 关注性能
+- 在真实设备上测试
+
+优秀的响应式设计应该让用户感觉不到它的存在 —— 一切都是那么自然流畅。
diff --git a/src/content/posts/typescript-best-practices.md b/src/content/posts/typescript-best-practices.md
new file mode 100644
index 0000000..92b3b5d
--- /dev/null
+++ b/src/content/posts/typescript-best-practices.md
@@ -0,0 +1,237 @@
+---
+title: "TypeScript 最佳实践"
+date: 2024-11-10
+summary: "TypeScript 为 JavaScript 带来了类型安全，但如何正确使用它以获得最佳开发体验？本文总结了一些 TypeScript 开发中的最佳实践和常见陷阱。"
+tags: ["TypeScript", "JavaScript", "编程"]
+---
+
+# TypeScript 最佳实践
+
+TypeScript 已经成为现代前端开发的标配。正确使用 TypeScript 可以显著提高代码质量和开发效率，但不当使用也可能适得其反。
+
+## 基础类型定义
+
+### 使用类型推断
+
+TypeScript 的类型推断很强大，不需要每个地方都显式标注类型：
+
+```typescript
+// ❌ 不必要的类型标注
+const count: number = 0;
+const name: string = "TypeScript";
+
+// ✅ 利用类型推断
+const count = 0;
+const name = "TypeScript";
+```
+
+### 优先使用接口而非类型别名
+
+对于对象类型，接口通常是更好的选择：
+
+```typescript
+// ✅ 使用接口
+interface User {
+ id: number;
+ name: string;
+ email: string;
+}
+
+// ❌ 避免过度使用 type
+type User = {
+ id: number;
+ name: string;
+ email: string;
+}
+```
+
+但是对于联合类型、元组等，type 更合适：
+
+```typescript
+type Status = "pending" | "success" | "error";
+type Point = [number, number];
+```
+
+## 高级类型技巧
+
+### 使用泛型提高复用性
+
+```typescript
+// 通用的 API 响应类型
+interface ApiResponse{paragraph}
+ ))} +{post.date}
-{post.summary}
- - )) - } -{heroDescription}
+